Question

Firstly, how can I have jQuery continuously check the time, and add an id to a <div> tag if the current time is in between two set times? I’m making a clock for a school (where the clock is a website sent over cable to TVs in every room), where each period is expressed like this:

<div class="period 1">Period 1: 7:32-8:14</div>

I’m getting the start time and end time from DataMapper, so really, the code in the view (an eRB file) is:

<% @periods.each do |@period| %>
<div class="period <%= @period.id %>"><%= @period.string %>: <%= @period.start_time.strftime("%I:%M") %>&ndash;<%= @period.end_time.strftime("%I:%M") %></div>
<% end %>

My question is how I can get jQuery to continuously check the current time, and if it is in between @period.start_time and @period.end_time. If so, add id="active" to the <div>.

Would I have to set up something for JavaScript to interface with Ruby via .get?

If you have any questions, please ask.

Answer 1

You can acheive this using Javascript’s Date() object.
Revision due to clarification of question

CSS

.active { font-weight: bold; } // Or whatever styling you need

Javascript

var loop = setInterval(function() {
  var d = new Date();
  var dh = d.getHours();
  var cP = 16; 
  /* make cP your earliest period
  earlier than 1600, but that's for it to
  work with the current time for me (8pm) 
  each pass with increment by 1 hour.*/
  $('.period').each(function() {
    if (dh==cP) $(this).addClass('active'); // add active if current
    else $(this).removeClass('active'); // otherwise remove it
    cP++; // Add an hour each loop, assuming each period is 1hr
  });
}, 60000); // 60000 milliseconds = 1 minute update

​

Links to check out

Live Example – http://jsbin.com/okoso3
Live Example 2 (Revision) – http://jsbin.com/okoso3/2
About Date() – https://developer.mozilla.org/en/JavaScript/Reference/global_objects/date