"Css Hour Ruler"
Bootstrap 3.0.0 Snippet by briancphillips

<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()) }

Related: See More


Questions / Comments: