jQuery Countdown - Daily Countdown, with secondary

Question

1. Daily Countdown

I'm trying to use Keith Wood's jQuery countdown plugin (http://keith-wood.name/countdownRef.html) in order to create a page of daily countdowns. E.g.:

• A - counts down to 07:00 each day
• B - counts down to 09:00 each day
• C - counts down to 11:00 each day

I'm doing in a fairly hacky way:

var foo = new Date();
foo.setHours(11)
foo.setMinutes(0)
foo.setSeconds(0)
$('#fooCountdown').countdown({until: foo});

Basically, I just create a new Date object which defaults to now, then set the time to the time I want for today.

However, this is pretty hacky, and also it doesn't reset at the end of the day - once the new day ticks over, it's still counting down to the time on the previous day.

Is there a cleaner or better way of doing daily countdowns with this plugin?

2. Secondary Countdown

Secondly - I also want each countdown, when it expires, to count down to a second later time that day.

E.g. for A - once it reaches 07:00, it then starts counting down to 15:00 for that day.

I'm doing this using the onExpiry function:

$('#officeCountdown').countdown({until: officeOpens, onExpiry: OfficeOpen, alwaysExpire: true});

...

function OfficeOpen() {
    $('#officeCountdown').countdown('option', {until: officeCloses, onExpiry: OfficeClose, alwaysExpire: true});
}

function OfficeClose() {
    alert('Office has closed')
}

The first part - counting down down until officeOpen seems to work.

However, the second part - counting down until OfficeClose doesn't - it seems to always start counting down the difference between officeOpens and officeCloses, instead of using the current time - and also, the function OfficeCLose never seems to trigger.

Any thoughts?

Answer 1

I would suggest you use the excellent Datejs plugin for creating/handling dates.
(read the getting-started and the docs because it is really extensive)

This way you could do

$('#fooCountdownA').countdown({
    until: Date.today.set({hour:7}) 
});
$('#fooCountdownB').countdown({
    until: Date.today.set({hour:9}) 
});
$('#fooCountdownC').countdown({
    until: Date.today.set({hour:11}) 
});

---

As for the countdown, the plugin does not seem to be friendly to re-using countdowns.. Perhaps you are better off creating dummy elements and inserting them in the dom to hold the countdown, and destroying them on expiry..