jQuery Countdown Plugin

That’s funny, I did basically the same yesterday, only using PHP and CSS though. You can see my randomly styled PHP countdown here. Great blog you have.

Nice! I like this kind of stuff! Love your snippets

Really nice plugin…

But to be hones, I though it’s about a plugin counting down the time until a specific event… I am looking for a jquery-thing counting back the time until a specific date… Nevertheless => cool!

@Dirk – looks reallyreally great!

Really Nice one. Thanks for sharing.

Cool snippet! Made this myself last week but this one is much better! Thanks man!

very cool script. I’d like apply it on my website

excelente!

nice effect with the font-size :)

these snippets are all cool but they never seem to work for me. Its so frustrating. I have the countDown.js file linked with the sample code, altered to have my div class in there…and nothing. dammit.

I copied the source and it worked. Thanks :)
Maybe its something with the linked file that I’m doing wrong or the placement of the sample usage vs. the link…. I don’t know. anyway thanks again

ezFlash

Hi all,

Nice script I only have one question; I would like to use this script to countdown from let’s say 5 minutes and then repeat that. Hoe can I archieve this?

Thanks for this demo. I love the idea but I wanted to know if you could show how to alter this code so that it becomes a date countdown? I am looking for countdown to tax day.

Thanks for the plugin.
Here is a small modification for those who want to show time instead of minutes

//where do we start?
if(!to && to != settings.endNumber) { to = settings.startNumber; }

hours = Math.floor(to / 60);
minutes = Math.round(to % 60);
if (minutes < 10) {
minutes = "0"+minutes;
}

And change the text of course:

//set the countdown to the starting number
$(this).text(hours + ‘:’ + minutes).css(‘fontSize’,settings.startFontSize);

Try this, if you maybe need to have a choice on the direction it is counting:

jQuery.fn.countDown = function(settings,to) {
settings = jQuery.extend({
startFontSize: ‘12px’,
endFontSize: ‘12px’,
duration: 1000,
direction: ‘down’,
startNumber: 10,
endNumber: 0,
callBack: function() { }
}, settings);
return this.each(function() {

//where do we start?
if(!to && to != settings.endNumber) { to = settings.startNumber; }

//set the countdown to the starting number
$(this).text(to).css(‘fontSize’,settings.startFontSize);

//loopage
$(this).animate({
‘fontSize’: settings.endFontSize
},settings.duration,”,function() {

if(settings.direction == ‘down’){
if(to > settings.endNumber + 1) {
$(this).css(‘fontSize’,settings.startFontSize).text(to – 1).countDown(settings,to – 1);
}
else{
settings.callBack(this);
}
}

if(settings.direction == ‘up’) {
if(to < settings.endNumber + 1) {
$(this).css('fontSize',settings.startFontSize).text(to + 1).countDown(settings,to + 1);
}
else{
settings.callBack(this);
}
}

});

});
};