jQuery skinnable countdown plugin

jQuery Skinnable Countdown Plugin is a countdown plugin that creates a countdown to zero, showing days (if needed), hours, minutes and seconds, but it lets you do some other things:

  1. You can fire a callback function when timer reaches zero.
  2. You can format the timer entirely your own way. The plugin can give you the time data every second, so you can format it the way you want: the colors you want, animate something using it, do some special FX, whatever. It does it by creating a custom event, "countdownClick".

You can find detailed instructions inside the plugin.

How it works

Usage (simple - default timer):

// Language string. Change this to your own language
dayString = {
    single : 'day',
    plural : 'days'
}
// "target" is the place where you want to put the timer
$(target).countdown(true, deadline, [now, callback]);

Usage (advanced) - the plugin will not print a countdown. Instead, the plugin will give you an object containing days, hours, minutes and seconds for you to format it your style.

$('').bind('countdownClick', function(e, timerObj) {
    --- put your own code here ---
    --- parameter 'e' is the event info ---
    --- parameter 'timerObj' is the timer object ---
} )
.countdown(false, 10, 0, function() {
    $(this).css('color', 'red');
});

Parameters:

  • visible (required): true/false - if you don't want the timer to be print on screen, set this to false.
    Sounds weird, but maybe you don't want the countdown to be formatted by the plugin, you want to give it a different look, or you just want something to happen when time reaches zero.
  • deadline (required): time to zero. If "now" is specified, "deadline" should be a UNIX timestamp. Otherwise, it should be the number of seconds to zero. This parameter is required.
  • now (optional): UNIX timestamp for now, for this exact moment. Used in combination with "deadline", you can, for example, establish a countdown to the next Independence Day. If you don't want to use this parameter, but you need to specify the next one, set this to 0 (zero).
  • callback (optional): A function to be run when countdown reaches zero.

Returns: nothing. But it fires an event named "countdownClick" that returns an object containing the timer. Check "Usage (advanced)" for details.

timerObj structure (for advanced usage):

this.days
this.hours
this.minutes
this.seconds
AttachmentSize
jquery.countdown.js4.43 KB

I could find this plugin finally :) Thanks for sharing...

Great post. Thanks for link.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <i> <b> <strong> <cite> <pre> <code> <ul> <ol> <li> <dl> <dt> <dd> <p> <img> <h2> <h3> <blockquote>
  • Lines and paragraphs break automatically.

More information about formatting options