Countdown To A Future Date With A jQuery Countdown Timer

Posted on

I’ve created a new jQuery Plugin that counts down to a specific date in the future. It has a cool animation that scrolls the numbers down instead of just changing the time without an animation. The plugin is pretty easy to use it accepts a few basic options that should give you most of the flexibility that you would need.

Updated*

  • Added ability to have units of time as separators instead of just :.
  • Added option speed to specify how quickly a unit of time increments.

Download The Plugin

To view a live implementation of the countdown timer, check one out here on a coming soon page. If your feeling up to it, go ahead and subscribe to the mailing list too. I don’t think you’ll want to miss it.

The source code for the timer is hosted on github at https://github.com/zackperdue/Countdown

If you use git:
[email protected]:zackperdue/Countdown.git

or Download Countdown Timer

Countdown Options

var defaults = {
		target: 'September 24, 2011',
		parts: ['days', 'hours', 'minutes', 'seconds'],
		separator: ":",
		leadingZero: true,
		height: 180,
                speed: 200,
	}
  • target: the future anticipated date used to count down to.
  • parts: An array of units of time you would like to include, for example: days, hours, minutes, and seconds.
  • separator: The visual separator you would like to divide the units of time with. Default is :. Other choices are short OR full. If you use short as the separator, the separators will be the first letter of each unit of time they represent (d, h, m, s). If you use full as the separator, the separators will be the unit of time entirely like this (Days, Hours, Minutes, Seconds).
  • leadingZero: Do you want a zero appended to the units of time? True or False.
  • height: The height of the numbers. This is important for the timer to scroll correctly.
  • speed: The speed in which the units of time transition in Milliseconds. Default is 700 Keep this under 1 second as the timer could become inaccurate.

It’s Easy To Use

To use the timer plugin, all you need to do is add an html element with designated as a timer like so:

<div class="timer"></div>

Then include the script below the jQuery script and choose your element and specify the options:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	<script type="text/javascript" src="http://yourdomain.com/assets/js/jquery.countdown.js"></script>
	<script type="text/javascript">
		$(function(){
			$('.timer').countdown({
				target: "October 31, 2011 00:00:00", 
				parts: ['days', 'hours', 'minutes', 'seconds'],
				separator: ":",
				leadingZero: true
			});
		});
	</script>

Below is a picture of an actual application that I was using it in.

Something Epic Is Coming

Known Bugs

  • Countdown seems to speed up after being in another browser tab
  • Sometimes in Google Chrome the timer ticks one second and then stops. Refresh to fix it.

Future Revisions

Leave Some more suggestions in the comments of some extra features you would like to see in later releases. Here are some features I will be adding soon.

  • Add options for animation speed
  • Add Hooks for zero hour for the countdown date Implemented Mon, Apr 1st 2013

Can You Contribute?

Yes! I would love for you to help me make this plugin better. If you would like you may fork it on Github and make a pull request with your changes and improvements. Leave some comments on what you think of the plugin either here or on the github page. Enjoy your countdowns!

  • Jeremy

    this is quite nice. curious though, would you consider adding the ability to include descriptors for a version not used inline? I suppose that adding the content via css would be an acceptable way to tackle it, but not all jquery-capable browsers also handle the css as well. I was thinking, instead of: 69:20:02:xx that is could be adjusted via the css doc stacked or sentence form to read:
    69 Days,
    20 Hours,
    02 Minutes,
    xx Seconds …

    before I go messing with it myself, I thought I’d offer the idea to include as part of the original. 

    • Zack

      Hey Jeremy,

      Thanks for your input, ill see what i can do. I actually thought about putting this feature in there but i wanted to roll it out to my coming soon page. Once i know people like this i will for sure update it. I’ll add this in soon. Make sure you are subscribed so you know when its updated. Should be in another day or so.

      Cya!

      • Jeremy

        for sure. and kudos on the great demo page. it’ll sell people on it on inspiration and looks alone. I’m subscribed too. I don’t know when or if I’ll get a use for it soon, but this is probably the best countdown script I’ve seen in years. simple, small, clean implementation. very nice.

        • Zack

          Thanks a lot m8, Its actually more than a demo page, if you are interested, it subscribe to the mail list, Ive got something up my sleeve at the end of the countdown.

          • Kruss555

            when I attatching 3 items of countdown object – it works not correct!

          • http://zackperdue.com Zack Perdue

            Yeah, It only works with one instance on the page at a time. Sorry about not specifying. I will be rewriting this soon to give it more features.

  • Kolle36

    Hi there, very nice plugin you created like it a lot, although it seems that it has some problems with internet explorer 8?

    • http://www.facebook.com/zackperdue ‘Zachary Jacob

      It very well could have problems in that browser, I have only checked it on a mac. With FF, Safari, Chrome, Opera. Feel free to send a pull request on github with bug fixes.

      Thanks Kolle36

  • http://www.facebook.com/arturs.zaluzinskis Arturs Zaluzhinsky

    Hi, I changed two option of that. First I changed sliding effects of seconds to normal countdown without any effect so for usage in classic official pages:
    Code:
    speed: -1, // in example page

    Second I changed default captions of titles for multi language support. Changed one line and added another one:
    parts: [‘days’, ‘hours’, ‘minutes’, ‘seconds’], //in jquery.countdown.js;
    lang_lv: [‘ dienas’ , ‘ stundas’, ‘ minūtes’, ‘ sekundes’], // added below;
    and in the same file
    }else if(defaults.separator == “full”){
    timer.push(”+ defaults.lang_lv[i] +”);
    So, now it supports multi language and official style

    Regards, Arturs

    • http://zackperdue.com Zack Perdue

       Hey Arturs,

      Thanks for outlining these changes. I’ll see if i can get them integrated soon.

  • Rana

    Thank you for this :)

  • http://twitter.com/wingsinpain wingsinpain

    Hi, I was wondering if you can have two instances of this plugin? Can I reset one of them or set them to null or something? Because one of my instances jumps from the target on my other instance and back. So my question is, is it possible to reset an instance when creating a new one on the same page?

    • http://zackperdue.com Zack Perdue

      No, the countdown timer will not work correctly with multiple instances. However, It would not be difficult to rewrite it to work with multiple instances.

      • http://twitter.com/wingsinpain wingsinpain

        Aha… So you can’t remove instances in some way? I’m not that good at jQuery so I can rewrite your wonderful plugin!

        • http://zackperdue.com Zack Perdue

          Yeah i understand. I would like to rewrite it myself soon. Just so busy!

          There is no method that exists to remove an existing timer. I will put something like that in the next version.

          • http://twitter.com/wingsinpain wingsinpain

            Thank you for your answer. I was wondering if you can lead me in to the path so I can do this my self temporarely. I believe what I want is to set the countdown object to null in some way?

          • http://zackperdue.com Zack Perdue

            Well, you could unbind all of the events that were originally attached to the countdown element. But you would have to read the plugin code and make sure you didnt miss anything. The plugin also adds stuff to the dom, so you would have to remove that stuff too. Basically undo everything the plugin does.

  • tapas dwivedi

    This is great! Thanks! :)

    • http://zackperdue.com Zack Perdue

      Glad you like it!

  • Jamie
    • http://zackperdue.com Zack Perdue

      All you need to do is change the size of the text to where you want it, then adjust the boxes that wrap the text until they fit snug around the text. Its trial and error at any size, but works great for how you want it. Thats what makes this plugin so diverse. Check out how these people do it: http://thinkglobalconference.com/

      • Jamie

         hi zak thank you very much, i’ve managed to shrink it own so i can completley see the whole line, i do have another question for you, is there any way to add the days, hours, mins, seconds text under the countdown timer, am working on some coming soon templates for website x5 evolution 9, ande i’ve got a feeling people may want the text underneath aswell as the coun down clock.

        • http://zackperdue.com Zack Perdue

          You can always create style a psuedo element for the :before or :after with css. You can do one for each part. 

          .part-days:after{    content: “Days”;     position: absolute;     bottom: 0; left: 0;     font-size: 19px;}

          • Jamie

             hi zack where abouts do i put it on the css also i have another problem when i try to centre everything it comes out like this

            day
            hours
            mins
            seconds

            and then when i try to coreect that it all comes out on top of each other how do i fic that.

          • http://zackperdue.com Zack Perdue

            You just put the styles at the bottom of your stylesheet. Make sure your pseudo element has the same width as your part, then just five each pseudo element a text-align: center;

          • Jamie

             hi zack i’ve sent you an email via the contact form, am still having problems, i’ve even studied your source code for the coming soon page and copied the css details of there but still nothing works anychance you can help us out with the code.

          • Jamie

             hi zack i’ve managed to get the counter working but need some help with the html text, ive managed to change the coulur of the text i wrote underneath the timer but i need to align the text centre, change the colour, and the font size but i can’t seem to find the code to combine all of them together.

  • Vlad

    How can I align the counter by center ?

  • carol

    Does this countdown timer automatically against to whatever timezone you are based in when you view it? e.g I am based in New Zealand using UTC+12 timezone but I want to set the timer in US time e.g. UTC-5.

    • carol

      *sorry need to rephrase my question. I want to know if the user will see their local time.

    • http://zackperdue.com/ Zack Perdue

      Yes, it will use the time on the users machine since it is in javascript, however, you can also set the current time to whatever time you want by interpolating the time from the server using your server side language of choice. ruby, php, etc…

  • http://www.facebook.com/jeri.burtchell Jeri Burtchell

    What would I need to add to get it to display a message on expiration? Like “Sale is Over!”?

    • http://zackperdue.com/ Zack Perdue

      All you would need to do is add an if statement during every tick to check if its at 0. if it is, stop the timer and display a message.

      • http://www.facebook.com/jeri.burtchell Jeri Burtchell

        How much would you charge to code it for me? I’m great at finding/using jquery scripts. Not so great when it comes to tweaking. :)

    • http://zackperdue.com/ Zack Perdue

      I updated the repo. Check here for more details: https://github.com/zackperdue/Countdown

  • Pingback: 30 Impressive Countdown Timer Scripts for You - DJDESIGNERLAB

  • Pingback: Best Countdown Timer Scripts for Your Projects - Inspiring Geek