<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>
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;
}
$( 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)
//position = parseFloat(barWidth/segment*(key))+parseFloat(currentMinute/60);
position = parseFloat(barWidth/segment*(key+parseFloat(currentMinute/60)));
position.toFixed(2);
if(position>100) position = 100;
$("div.w_1").css('left', position+'%');
//console.log(fHours[8]);
console.log('The hour is '+hour[0]);
console.log('position is '+position);
console.log('barWidth is '+barWidth);
console.log('Segment is '+segment);
console.log('key is '+ key);
console.log('xpos is '+ xpos.left);
//console.log($("div.progress").width())
}
