When building a coming soon or event page, you find yourself in search for a good way to display the remaining time. A countdown gives the feel of urgency, and combined with an email field will yield more signups for your newsletter.
Today we are going to build a neat jQuery plugin for displaying a countdown timer. It will show the remaining days, hours, minutes and seconds to your event, as well as an animated updates on every second. Note: the plugin is also available on Github.
Let’s start with the markup!
The HTML
We will give the plugin the creative name of “countdown”. Called on an empty element, it will fill it with the HTML that is needed for the countdown timer. You don’t need to do anything but choose the element in which you want to show it.
Generated markup
In the above example, the plugin has been originally called on a div with an id of countdown. The plugin has then added a countdownHolder class to it (so a few styles are applied to the element via CSS).
Inside is the markup for the digits. There are two digit spans for every time unit (days, hours, minutes and seconds), which means that you can count down towards a date that is no more than 99 days in the future (for such time frames you should probably not use the timer anyway, it would be discouraging).
The static class of the digits gives them their gradient background and box-shadow. When animated, this class is removed so that these CSS3 touches don’t slow down the animation. The digits are brought together in groups so you can easily style them. Adding a font-size declaration to .countDays, will affect the size of both day digits.
A jQuery Countdown TimerThe .countDiv spans are the dividers between the units. The colon is formed with :before/:after elements.
But how is this markup generated exactly?
The jQuery
First let’s write two helper functions used by the plugin:
- init generates the markup you saw above;
- switchDigit takes a .position span and animates the digits inside it;
assets/countdown/jquery.countdown.js
function init(elem, options){ elem.addClass(countdownHolder); // Creating the markup inside the container $.each([Days,Hours,Minutes,Seconds],function(i){ $( ).html( 0 0 ).appendTo(elem); if(this!="Seconds"
{ elem.append(); } }); } // Creates an animated transition between the two numbers function switchDigit(position,number){ var digit = position.find(.digit) if(digit.is(:animated)){ return false; } if(position.data(digit) == number){ // We are already showing this number return false; } position.data(digit, number); var replacement = $( ,{ class:digit, css:{ top:-2.1em, opacity:0 }, html:number }); // The .static class is added when the animation // completes. This makes it run smoother. digit .before(replacement) .removeClass(static) .animate({top:2.5em,opacity:0},fast,function(){ digit.remove(); }) replacement .delay(100) .animate({top:0,opacity:1},fast,function(){ replacement.addClass(static); }); } Great! Now let’s move on with the plugin body. Our plugin must take an object with parameters for better configurability – a timestamp of the period we are counting towards, and a callback function, executed on every tick and passed the remaining time.،For،brevity, I’ve omitted the functions above from the code.assets/countdown/jquery.countdown.js
(function($){ // Number of seconds in every time division var days= 24*60*60, hours= 60*60, minutes= 60; // Creating the plugin $.fn.countdown = function(prop){ var options = $.extend({ callback: function(){}, timestamp: 0 },prop); var left, d, h, m, s, positions; // Initialize the plugin init(this, options); positions = this.find(.position); (function tick(){ // Time left left = Math.floor((options.timestamp - (new Date())) / 1000); if(left < 0){ left = 0; } // Number of days left d = Math.floor(left / days); updateDuo(0, 1, d); left -= d*days; // Number of hours left h = Math.floor(left / hours); updateDuo(2, 3, h); left -= h*hours; // Number of minutes left m = Math.floor(left / minutes); updateDuo(4, 5, m); left -= m*minutes; // Number of seconds left s = left; updateDuo(6, 7, s); // Calling an optional user supplied callback options.callback(d, h, m, s); // Scheduling another call of this function in 1s setTimeout(tick, 1000); })(); // This function updates two digit positions at once function updateDuo(minor,major,value){ switchDigit(positions.eq(minor),Math.floor(value/10)%10); switchDigit(positions.eq(major),value%10); } return this; }; /* The two helper functions go here */ })(jQuery); The tick function calls itself every second. Inside it, we calculate the time difference between the given timestamp and the current date. The updateDuo function then updates the digits comprising the time unit.
The plugin is ready! Here is how to use it (as seen in the demo):
assets/js/script.js
