Adding a jQuery Countdown to Our “Coming Soon” Page
videos

Adding a jQuery Countdown to Our “Coming Soon” Page

on Jul 30th 2012 with 26 comments
Tutorial Details
  • Topic: jQuery
  • Difficulty: Intermediate
  • Screencast duration: 21 mins
Download Source Files
Demo View It Online
This entry is part 4 of 4 in the series "Coming Soon" Page

"Coming Soon" Page

To finish off our Coming Soon page let’s now give the countdown timer some functionality. We’re going to use a jQuery plugin which will allow the timer to count down to a given date and time.

jQuery Countdown Timer

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes or YouTube!

Additional Resources

Series Navigation<< Building a “Coming Soon” Page With HTML and LESS

Adi Purdila is AdiPurdila on Themeforest
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Whether it’s websites, logos or print materials, my work philosophy is the same: never take any shortcuts and always put my heart and soul into each project because in the end, it’s the small details that count and the more effort I put into a project, the better it represents myself as a person and a designer and at the same time, it represents my client in a manner that’s appropriate to his needs. If you’re interested in the HTML Templates and Landing Pages I’m developing, you can check them out on my portfolio page on ThemeForest.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • matt

    Looks half complete since the design would suggest the numbers should “flip” yet that is clearly not the effect of the jquery.

    Would seem more appropriate to design a digital looking clock for this effect.

    • http://impartcreative.com Dan

      I’d say the white border through the center of the number doesn’t fully give the impression that the number is made up of two pieces.

    • Gabriel

      I was thinking the same thing.

      • dsdsd

        dsd

  • Pingback: My Stream | Adding a jQuery Countdown to Our “Coming Soon” Page | My Stream

  • supprof

    thank you adi purdila
    your tutorials are very helpful and your designs very inspired
    thank’s keep making tutorials

  • Danil

    What you think about to clear placeholder in input, when mouse clicked? Is it a good practice? I seem it’s more easy…

  • Pingback: Adding a jQuery Countdown to Our “Coming Soon” Page | Shadowtek Hosting and Design Solutions

  • http://www.futuristicfreelancing.blogger.com Ian

    Thanks for the great series Adi!

    Man you’re great, I can’t wait till I can teach other people like you can! ;)

  • http://www.adipurdila.com AdiPurdila
    Author

    Hi guys,

    I do agree about the flip timer, improvements are always welcomed and I’ll take your advice in the future :)

    @Danil, that placeholder is the new HTML5 placeholder so it only disappears when you write something which personally I think is better than disappearing when clicking on it. If you wanna use a different technique you can use the onFocus/onBlur duo for the input, removing and adding the placeholder manually.

    @Ian thanks, I think you’ll all like what I have planned next :)

  • Greg

    Hi,

    I followed the tutorial exactly but for some reason the “display: inline;” isn’t working for me, the list items still show up underneath each other instead of side by side. Therefore the timer-piece images don’t show up properly either…

    Any ideas?

    Thanks. Great tutorial!

    • http://www.adipurdila.com AdiPurdila
      Author

      Hmm, can you give me a link Greg so I can have a look?

      • http://www.facebook.com/ralph.glimmerveen Ralph Glimmerveen

        Hi Adi, Thanks for the tutorial! in my case it isn’t working in firefox en ie how can i solve this?

    • http://facebook.com/ragzor ragzor

      hey,

      try using
      #countdown li{
      display:inline-block;
      }

  • http://www.codedevelopr.com/ Jason

    The problem with these count-down scripts that people often overlook, is the timezone issues. IF I am launching a Product at 6pm Eastern Standard Time then I need my countdown script to get the time from the server and not the user’s computer as the user’s computer will always be the time from there timezone. I don’t want someone in New York to have a 3 hour difference then the guy in California for when my site opens to the public….

  • Danil

    Hello Adi. I noticed that You always know hex nuber of color. Tell me, you remember all of them or you have some technic to know which number you need. Thanks.

  • http://devingredients.com Catalin

    Great job! Awesome result :-)

  • Mene

    Hi! Great job, very nice tutorial even for me that I’m a principiant.
    But I have a problem with Internet Explorer 9… This script doesn’t work there.
    Any suggestion?

    Thanks a lot.

  • aqeel

    it does not work on IE9 please solve this problem

  • Pingback: 10 Creative & Best Coming soon/Under construction page template | Platina Studio Blog

  • Pingback: 16 Free template html tạo trang under construction

  • Squiggles

    Not working in FF, I am getting Invalid date. Here’s an example: 12 Tuesday 2012 17:30:00

    • http://www.facebook.com/ralph.glimmerveen Ralph Glimmerveen

      Hi Squiggles, did you made it work in ff?

  • Pingback: 22 Free and Fresh jQuery Plugins and Tutorials | Smashing Spy

  • steveking

    how do it setup the notifier?

    • Adi Purdila
      Author

      Hi there,

      See the reply above :)

  • Raku

    How do it setup the email notifier?

  • Adi Purdila
    Author

    Hi everyone,

    I’ve tested this in the latest version of FF (18.1 right now) and in IE8 and IE9 and it works fine for me. For those of you who had problems in IE and FF, what versions were you using? Also, check the console, do you have any errors logged there?

    • http://www.facebook.com/ralph.glimmerveen Ralph Glimmerveen

      Hi Adi,

      i am using ff 19.0 and it isn’t working it wasn’t working in 18.02 as well. in firefox i get a alert : nvalid date. Here’s an example: 12 Tuesday 2012 17:30:00

      • Adi Purdila
        Author

        Hi Ralph,

        The date you provided isn’t valid :) You should use something like this: “17 august 2013 12:00:00″

  • Pingback: 16 Free template html tạo trang under construction | Mibu's blog

  • Pingback: 20 Impressive Free jQuery Countdown Scripts of 2013