"Css Hour Ruler"
Bootstrap 3.0.0 Snippet by briancphillips

Post to Facebook Tweet this

1
2
3
4
5
6
7
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="w_1"></div>
<div class="progress timeline" style="background:#333333; width:90%"></div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
body
{
margin:0;
padding:0;
}
div.timeline
{
margin:10px auto;
}
.w_1 {
content: "";
background-color: #ffffff;
position: absolute;
width: 2px;
height: 30px;
top: 0px;
left: -1%;
display: block;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$( document ).ready(function() {
setPosition();
setInterval(function(){ setPosition(); }, 60000);
});
$( window ).resize(function() {
setPosition();
});
function setPosition()
{
var dt = new Date();
var time = dt.getHours() + ":" + dt.getMinutes();
console.log(time);
var barWidth = $('div.timeline').width();
var hours = [0,1,2,3,4,5,6,7,8,9];
var segment = barWidth/(hours.length);
//var hours=[7,8,9,10,11,12,13,14,15,16,17];
//var fHours=[1,2,3,4,5,6,7,8,9,10];
//var fHours=[0,1,2,3,4,5,6,7,8,9];
var hour = time.split(":");
var startHour = 7;
var currentHour = hour[0];
var currentMinute = hour[1];
var key = currentHour - startHour;
var position;
var xpos = $("div.timeline").position();
//position = parseFloat(currentHour) + parseFloat(currentMinute/60);
if(currentHour<12)
//position = parseFloat(barWidth/segment*(key))+parseFloat(currentMinute/60)+startHour;
position = parseFloat(barWidth/segment*(key+parseFloat(currentMinute/60)));
if(currentHour>=12)
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Dashboard Angular

Questions / Comments: