Updating multiple 's individually when specific time inside 's match the current time

Question

I'm trying to make an EPG which is supposed to update automatically when the current time reaches the "endtime".

My code basically looks something like this... sorry 'bout the ugly markup.

<span class="channel">
    <span class="channum">01</span>
    TV1
</span>
<span id="tv1" class="showing">
    <span class="starttime">22:30</span> 
    Program Title
    <span class="progresscontainer">
        <span class="progressbar" style="width:50%"></span>
    </span>
    <br />
    <span class="endtime">23:00</span> Program Title
</span>

<span class="channel">
    <span class="channum">02</span>
    TV2
</span>
<span id="tv2" class="showing">
    <span class="starttime">22:15</span> 
    Program Title
    <span class="progresscontainer">
        <span class="progressbar" style="width:0%"></span>
    </span>
    <br />
    <span class="endtime">23:30</span> 
    Program Title
</span>

<span class="channel">
    <span class="channum">03</span>
    TV3
</span>
<span id="tv3" class="showing">
    <span class="starttime">21:45</span> 
    Program Title
    <span class="progresscontainer">
        <span class="progressbar" style="width:75%"></span>
    </span>
    <br />
    <span class="endtime">22:30</span> 
    Program Title
</span>

How do you compare the time inside <span class="endtime"> with the current time and load the content from tv1.php tv2.php and tv3.php into the respective <span>'s with the corresponding id's?

I'm not that strong in jquery so this is all I have so far.

$(document).ready(function() {
    var d = new Date();
    var hh = d.getHours();
    var mm = d.getMinutes();
    if (hh < 10) {hh = '0' + hh;}
    if (mm < 10) {mm = '0' + mm;}
    var time = hh + ':' + mm;

    $('.showing').each(function(){
        var epg = $(this).attr('id') + '.php';
        $(this).load(epg);
    });
});

Hope someone can help me out.

Tip: You have missing open `span` tags somewhere. – emerson.marini Aug 27 '14 at 22:01 — emerson.marini, Aug 27 '14 at 22:01
I count seven open and close span tags. – Ace Aug 27 '14 at 22:08 — Ace, Aug 27 '14 at 22:08
Yes, my bad. It's correct. – emerson.marini Aug 27 '14 at 23:06 — emerson.marini, Aug 27 '14 at 23:06

score 1 · Accepted Answer · answered Aug 27 '14 at 23:02

This script would be a good start. You'll need to adjust it to consider shows starting/finishing in different dates:

$(function() {
    var now = new Date();

    // For easy comparison.
    now.setSeconds(0);
    now.setMilliseconds(0);

    // For debugging.
    $('.now').text(now.getHours() + ':' + now.getMinutes());

    $('.showing').each(function(){
        // Finding out the start time.
        var start = new Date(
            now.getFullYear(), 
            now.getMonth(), 
            now.getDate(), 
            parseInt($(this).find('.starttime').text().split(':')[0], 10), 
            parseInt($(this).find('.starttime').text().split(':')[1], 10), 
            0, 
            0);

        // Finding out the end time.
        var end = new Date(
            now.getFullYear(),
            now.getMonth(), 
            now.getDate(),
            parseInt($(this).find('.endtime').text().split(':')[0], 10), 
            parseInt($(this).find('.endtime').text().split(':')[1], 10), 
            0, 
            0);

        if (now <= end && now >= start) {        
            var epg = $(this).attr('id') + '.php';

            // Removed for debugging.
            //$(this).load(epg);

            // For debugging.
            $(this).html('<b>' + epg + '</b>');
        }
    });
});

Demo

Thanks @MelanciaUK - with the required adjustments to the script it works perfectly :) Now all that needs be to added to script is a calculation of the `progressbar` width in percent based on the `starttime`, `endtime` and `now`. Can you help me with this as well or should I open a new question on that specific matter? — Ace, Aug 28 '14 at 08:26
You should open a new question to keep the SO rules/standards. :) — emerson.marini, Aug 28 '14 at 09:09
Something you should refer to: http://stackoverflow.com/questions/24980827/difference-between-two-times-as-percentage-in-javascript — emerson.marini, Aug 28 '14 at 09:43

Updating multiple 's individually when specific time inside 's match the current time

1 Answers1