CODEWITHSUNDEEP
jquerycountdown
Devender
Devender

Reputation: 480

Jquery Countdown timer for multiple events

Here is my problem. I am coding a website for a meeting hall. The client wants a countdown to the next meeting on the home page. I figured I would use The Jquery Countdown plugin on http://keith-wood.name/countdown.html as it has everything I need. But as the meeting hall has multiple meetings each day I need it to countdown to the next meeting on expiration. I know the dates and times of all the meetings each day but I don't know how I can switch to the next meeting on expiration. Any thoughts?

Upvotes: 1

Views: 4718

Answers (2)

zequinha-bsb
zequinha-bsb

Reputation: 719

This is not a 40Kb solution like the Keith Wood's one. But, after 5 hours playing with code, I came up with this very versatile solution:

<script type='text/javascript' src='jquery-1.5.1.min.js'></script>
<script type='text/javascript'>

    function countDown(eventID) {
        var $this, h, m, s;
        $this = $('#event'+eventID);
        s = parseInt($this.text().substr(6),10);
        m = parseInt($this.text().substr(3,5),10);
        h = parseInt($this.text().substr(0,2),10);
        s--;
        m = (s < 0) ? --m : m;
        h = (m < 0) ? --h : h;
        if (h < 0) {
            $this.css('display','none');
            $this.parent().slideUp('slow');
            $this.parent().remove();
        }
        s = (s < 0) ? 59 : s;
        m = (m < 0) ? 59 : m;
        $this.text(((h < 10) ? '0'+h : h)+':'+((m < 10) ? '0'+m : m)+':'+((s < 10) ? '0'+s : s));
        setTimeout('countDown('+eventID+')',1000);
        $('.counter').first().show();
    }

    $(document).ready( function() {
        var eventID = 0; 
        $('#nextEvents div').each( function () {
            var nextEventH = parseInt($(this).text().substring(0,2),10);
            var nextEventM = parseInt($(this).text().substring(3,5),10);
            var nextEventS = $(this).text().substring(5,7);
            nextEventH = (nextEventS === 'PM') ? nextEventH + 12 : nextEventH;
            nextEventS = 0;
            var curTime = new Date();
            //curTime = curTime.getHours()+':'+curTime.getMinutes()+':'+curTime.getSeconds();
            nextEventH = Math.abs(nextEventH - curTime.getHours());
            nextEventH = (nextEventH < 10) ? '0'+nextEventH : nextEventH;
            nextEventM = Math.abs(nextEventM - curTime.getMinutes());
            nextEventM = (nextEventM < 10) ? '0'+nextEventM : nextEventM;
            nextEventS = Math.abs(nextEventS - curTime.getSeconds());
            nextEventS = (nextEventS < 10) ? '0'+nextEventS : nextEventS;
            $(this).append("<div class='counter' id='event"+eventID+"' style='display:none; "+
                "position:absolute; top:0; right:0; width:auto; height:auto; color:red; ' >"+
                nextEventH + ':' + nextEventM + ':' + nextEventS+"</div>");
            countDown(eventID);
            eventID++;
        });
    });

</script>

</head>

<body>
   <div id='wrapper' style='position:relative; width:600px; height:400px; background-color:#366; color:#EEE; ' >
    <div id='nextEvents' >
     <div style='position:relative; width:100%; display:block; ' >05:12AM - Meeting with department heads</div>
     <div style='position:relative; width:100%; display:block; ' >05:13AM - Meeting with Department of Finances</div>
     <div style='position:relative; width:100%; display;block; ' >05:14AM - Meeting with Human Resources</div>
    </div>
   </div>

Upvotes: 4

Thomas Kelley
Thomas Kelley

Reputation: 10292

The Countdown plugin has a parameter called onExpiry, which is a callback function that executes every time the Countdown reaches zero. Inside this function, you can (a) calculate the next meeting date, and (b) change the "until" field of the countdown instance to that value.

Here's an example:

HTML

<html>
    <body>
        <div id="countdown"></div>
    </body>
</html>

JavaScript

$('#countdown').countdown(
    {
        until: getNextMeeting(),
        onExpiry:
            function()
            {
                $(this).countdown("change", "until", getNextMeeting());
            }
    }
);

function getNextMeeting()
{
    // Based on the current time, figure out the next meeting time here:
    now = new Date();
    return now;
}

I've set up an example in jsfiddle that resets the time every 5 seconds. Of course, you'll want to adjust that to calculate actual meeting times:

http://jsfiddle.net/wXYSZ/

Hope this helps!

Upvotes: 4

Related Questions