jQuery Countdown Script

Friday, February 12th, 2010 at 8:29 pm | Projects

Update (5/2/2010): This plugin has been updated. Please refer to the plugin’s page for up to date information.

This is an Easy to use animated countdown javascript.

Full example features a complete “under construction” page with 2 skins.

jQuery Countdown

Features

  • Extremely easy to integrate
  • jQuery compatible
  • Unobtrusive javascript
  • Easily skinable

Demo

Go to the project’s page for more details and download.

    The example includes a very basic “under construction” page. If you are looking for a full featured under construction page Themeforest has some great ones.

    I’d love to hear back from you. Leave your comments.

    Be Sociable, Share!

    Tags:

    93 Responses to “jQuery Countdown Script”

    1. Jerry says:

      Thanks a million for this script. Love the looks of the countdown app! But I’m not able to get the form to work. As I see it I only have to change the database settings (and the date for counting down to) and that’s it. But it keeps giving the technical error message.

      Jerry

    2. admin says:

      Sorry, I put the subscription form in as example, and didn’t really document it.

      You also need to create the database table:

      CREATE TABLE `subscribers` (
      `email` VARCHAR( 255 ) NOT NULL ,
      `subscribed_at` DATETIME NOT NULL
      )

      I hope this is useful!
      Thanx,

      Vassilis

    3. Jerry says:

      Fantastisc! Works excellent now!

      Thanks for this great script!!

      Jerry

    4. [...] to integrate, jquery compatible, easily skinable. Dark and light versions available. Preview | Details | [...]

    5. [...] to integrate, jquery compatible, easily skinable. Dark and light versions available. Preview | Details | [...]

    6. rami says:

      very nice.

    7. Garry says:

      Dude whats up with the PHP example, which on top is absolutely uncommented !?!?
      In order to test it you have to have a PHP server running, WHAT A BUMMER.
      Just put it in a plain old HTML file as everybody else does, so checking it out IS NOT A PAIN.
      Script great example file a complete fail.

    8. Ahmad says:

      excellent work and very good looking .. just one thing, it take a little while to load.

      thanx for sharing

    9. Rob says:

      Maybe you should change the demo to be more into the future… The timer reached zero and is no longer fun to watch

      Great work by the way!

      Rob

    10. Vassilis says:

      I was sure I’d forget to “rewind” the damn thing at some point.
      Thanks!

    11. Vassilis says:

      OK Garry, you are right. You don’t have to rub this all over my face!
      I will add an HTML version soon.
      HTML version added.

    12. max bratsun says:

      Hey hey! Thanks for wonderful piece of code. It has just one issue to my mind. It doesn’t have any event ‘ended’ callback so the timer can’t be removed (for example) when the set date is reached. Cheers!

    13. Carlos says:

      How can we disable the “week” functionality? I just need to countdown in days! Thanks, great job! I love it!

    14. Vassilis says:

      Hi Max,

      Thanks for your comment.
      That is a cool idea, I will be adding this in the next version.

      Meanwhile if you want to add a call to a function when the count down is finished do so in line 53:

      if (diffSecs <= 0)
      {
      // Call your function here
      diffSecs = 0;
      }

    15. Vassilis says:

      Hello Carlos,

      I see a lot of people prefer it that way so I will add this as a feature soon.

      In the meantime, if 2 digits are sufficient for the day count you can do the following:
      1. Remove the “weeks_dash” div from your HTML code
      2. Change line 59 of the js file to:
      days = Math.floor(diffSecs/60/60/24);
      (remove: “%7″)

      This will work fine if your target date is less than 100 days in the future.

    16. Vishal Gosalia says:

      Hey.. How abt adding a pause and start, and reset options..

    17. ThomB says:

      Excellent and very good design !!!!
      Thanks from Germany !

      Thomas

    18. vanessa says:

      In version HTML, when the countown end and i want redirect to a new link to a page web as I make?

      Thanks

    19. co. says:

      Thank you for this awesome piece of tiny, optimized code.

      Question:
      How do I reset the countdown function? My values are loaded from external Ajax page and it gets messy when the values get changed (it counts down the old time and new times). Thank you in advance.

    20. Dusan says:

      Tnx for script! Its awesome! I looked around the internet for many times to found something like this :)

      I have two questions :)

      1. How to add hundredths to script? This give faster rotation on screen and looks cool … for my page :)

      2. How to put all digits in one row? why they are in two, i cant find that in css, what controls it?

      Sorry for my english :)

      All the best!

    21. Steve says:

      Great script! Is it possible to get instancing to work with this? Multiple countdowns are spawned correctly but only the very last one actually counts down. Thanks!

    22. Vassilis says:

      @Steve, @co., @Vishal Gosalia
      Hang on guys, a new version is coming up that supports those features.

      @vanessa
      Check my previous reply to Max

      Thanks all!

    23. Nate says:

      wow!

      Im just learning php and all that fancy db stuff. And I got this to work! This web shit is awesome!

    24. Pete says:

      Is there a way possible to not have the slidedown effect and simply change change to the new second? The slidedown effect seems to cause my site to jump around and I’ve heard it’s a height issue but increasing the height of the elements doesn’t resolve it.

    25. dd says:

      Thank you so much. I can’t believe I was able to achieve what I wanted – “a simple countdown” with some style changes. I am self taught by deconstructing things – I really know nothing about all this php js html etc. and it worked!!!
      http://www.stitchartz.com

    26. sumit says:

      Hey thanks for the script , its working great splly the effect … :) , i need one help from your end , can you please tell me what function can be used if the time is over and also i want to pass on php varible with the next page call , can u please help me out

    27. Andrew says:

      Any chance of optimising the performance of this a bit? Running the timer is pretty CPU heavy for me, to the extent that my Core 2 Duo MacBook Pro noticeably warms up when it’s running. It’s pegging ~20% CPU use.

    28. natty says:

      Hi Vassili,

      First of all thanx a lot for this script, you did damn great job!!

      But I wonder if the time set could be set usng a period instead of a fixed date.

      In fact I need a countdown which for example be set for 2 weeks and when the 2 weeks are passed (and si the countdown has reached zero), would start again to the biginin for more to weeks,…

      Do you think it could be possible?

      Whatever is the answer again thanks a lot!!

    29. Bob says:

      Does the countdown sync with server time? I’m looking to implement a countdown for auctions, and need multiple instances of a countdown running on the same page all sync’d with server time.

      Thanks!

    30. Bob says:

      Thanks for the quick reply Vassilis. What I mean by sync with the server time, is for the end user’s time to sync with server time.

      So if a server is located on the East Coast (-0500), and an item is ending in auction in 10 minutes, anyone one the East coast would see 10 minutes remaining, but anyone on the West coast would see 3:10 remaining if the end user’s time didn’t sync with server time.

      I’m asking because I don’t see anything in the code that updates the timer based on your time zone location.

      Thanks again.

    31. Vassilis says:

      The plugin does not take the visitor’s timezone into account. I’ll consider adding this in a future release.

      That said, there’s probably a workaround for your problem.
      You can set the countdown by offset (instead of a specific target date).

      So you can use server side code to estimate how much time is actually remaining and set it up like this:

      $('#countdown_dashboard').countDown({
      targetOffset: {
      'day': 0,
      'month': 0,
      'year': 0,
      'hour': 0,
      'min': 10,
      'sec': 0
      }
      });

      That would mean 10 minutes for everyone regardless of the visitor’s timezone.

      You can even do it the lazy way and just add seconds:

      // This will also count down 10 minutes:
      $('#countdown_dashboard').countDown({
      targetOffset: {
      'day': 0,
      'month': 0,
      'year': 0,
      'hour': 0,
      'min': 0,
      'sec': 600
      }
      });

    32. Martin says:

      Hi, thanks for the script!

      I have some problems with 31.xx.xxxx dates. For example today – 9.6.2010 countdown to 31.7.2010 showed 3 weeks (it should be 7 weeks). However if I set countdown to 30.7.2010, it showed 7 weeks.

      So i improve a script for targetDate a little bit:

      if (options.targetDate){
      targetTime.setMonth(options.targetDate.month-1, options.targetDate.day);
      targetTime.setFullYear(options.targetDate.year);
      targetTime.setHours(options.targetDate.hour);
      targetTime.setMinutes(options.targetDate.min);
      targetTime.setSeconds(options.targetDate.sec);
      }

      Hope this won’t mess up countdown next month:-D

    33. jvdmeulen says:

      I also wanted the serverside time so i adjusted the source a little bit.
      In the plugin find:
      var nowTime = new Date();
      and after that add:

      if (options.targetDate.serverDate) {
      nowTime = options.targetDate.serverDate;
      };

      then in the html/php/js do this:

      $('#countdown_dashboard').countDown({
      targetDate: {
      'day': 1,
      'month': 12,
      'year': 2010,
      'hour': 0,
      'min': 0,
      'sec': 0,
      'serverDate': new Date()
      }
      });

    34. Peter says:

      Hey Vassilkis,

      will you tell us or implement the weeks removal together with making days display three digits. It tried modify it myself but all I manged was showing the third digit on top of the second.

      I guess that’s why you said in your previous post that it will only display less than 100 days properly.

      Any easy get-around this issue?

    35. Diego says:

      Hi, Great Job
      Is there a way to make it work with Cufon?
      Thanks
      Diego

    36. Nicholas Boll says:

      @Peter

      I had the same issue. Here is the solution:
      $.fn.dashChangeTo = function(id, dash, n, duration) {
      $this = $(‘#’ + id);

      for (var i=($this.find(‘.’ + dash + ‘ .digit’).length-1); i>=0; i–)
      {
      var d = n%10;
      n = (n – d) / 10;
      $this.digitChangeTo(‘#’ + $this.attr(‘id’) + ‘ .’ + dash + ‘ .digit:eq(‘+i+’)', d, duration);
      }
      };

    37. Nicholas Boll says:

      Also for those of you using omitWeeks = true, there will be an unwanted flashing of #of-Days that doesn’t make sense. The ‘omitWeeks’ is getting set *after* the first ‘doCountDown’ is called, making the first time give you days as if ‘omitWeeks’ was false. To fix this, move the few lines containing the if (config.onComplete) and if (config.omitWeeks) to just before the first $(this).doCountDown is called. So do this:

      $.fn.countDown = function (options) {

      config = {};

      $.extend(config, options);

      diffSecs = this.setCountDown(config);

      if (config.onComplete)
      {
      $.data($(this)[0], ‘callback’, config.onComplete);
      }
      if (config.omitWeeks)
      {
      $.data($(this)[0], ‘omitWeeks’, config.omitWeeks);
      }

      $(‘#’ + $(this).attr(‘id’) + ‘ .digit’).html(”);
      $(this).doCountDown($(this).attr(‘id’), diffSecs, 500);

      return this;

      };

    38. Toni says:

      THX for that great script !!!

      How is it with the license ?
      Can I use it on my site ? Which license is it …. GNU GPL ???
      Is a backlink enough when I use it ?

    39. Vassilis says:

      Hi Tony,

      Thank you for your interest in the script.

      It is released under MIT License which roughly means you can do pretty much anything with it.
      A backlink is not needed but would be very appreciated!

      Hope this helps,

      Vassilis

    40. Olga says:

      After countdown load a new page… how its work?

    41. Felix says:

      First of all, thanks fo the great script. It is simply wonderful. I am using it on a Joomla based site.

      It is working with Firefox 3.x and I.E. 8 but not with Chrome… The images are shown but nothing happens. The numbers (which count down) don’t appear.

      I read it on JED that I should take out the lines which load the jquery, but I’m a newby in javascipt and do not know where to find it. Also I don’t know if this is the way to do it. Could you please give me a hand? Or is there any other solution?

      Thanks in advance,

      Felix

    42. PADAMAN420 says:

      I would like the time to only have hours, minutes, seconds

      Is this possible ??

    43. George says:

      Great job..

      I have one question please.

      i am using this:
      // Set the Countdown
      jQuery(document).ready(function() {
      $(‘#countdown_dashboard’).countDown({
      targetOffset: {
      ‘day’: 0,
      ‘month’: 0,
      ‘year’: 0,
      ‘hour’: 0,
      ‘min’: 0,
      ‘sec’: 5
      },
      // onComplete function
      onComplete: function() { $(‘#complete_info_message’).slideDown() }
      });
      });

      and i am removing the $(‘#complete_info_message’).slideDown() inside the function and adding a php code. For eg

      The script runs the php before complete the count down.
      Any help please?

    44. CO says:

      Hi,

      I have a problem on joomla. I use Jommlart template such as JA RASITE or JA NORITE.

      The countdown doesn’t work with this template. I guess it is a conflict with JQuery or something like that ? How to solve this problem ?

    45. George says:

      Hello again..
      Bill i want to ask you something.
      As we can see in other web pages that uses this or similar scripts for count down, when a countdown timer is in 10 minutes for eg when you refresh the web page the time remains and continues to count down.
      Is it possible with your script?
      When i am refreshing the web page the countdown starts from the beggining.

      Regards m8

    46. Vassilis says:

      @Sulaiman

      As in beer… :)

    47. Vassilis says:

      @Olga

      Use the onComplete event:

      onComplete: function() { window.location.href='' }

    Leave a Reply