I am a designer, a blogger and a Wordpress nut!

Subscribe to my Feed

Add a Countdown Timer on Your Website

Posted on December 7, 2009 by Roy Ho
countdown

Many times as an online marketer or a product promoter you want to draw a hype to a specific campaign be it a 24 hour sale or days left until free giveaways are over. What better way than to use a nice looking countdown timer to do the job. Let’s bring our friend jQuery into this…

I’ve come across a few websites that have incorporated this method of campaign hype in the past and felt that it is very useful. When a person sees a timer being counted down, you have a natural urgency to buy or participate out of impulse. You feel as though if you don’t react until the timer stops, you would have been left out of an “amazing” deal. But we don’t fall for those promotions now do we?

Here I want to show you how to incorporate a countdown timer for your own product/promotion campaign on your website using jQuery. Credit goes out to Keith Wood for making this awesome jQuery plugin.

CLICK TO DOWNLOAD SOURCE FILES

CLICK TO VIEW DEMO

Feel free to download the graphic from the source file above. I will take you step by step in the coding section.

STEP 1

In your HTML load jquery and the countdown plugin provided. Make sure jquery loads before the plugin of course. Now we need to code the script to invoke the plugin. Put the following code in your header or footer whichever you prefer.

HTML:

<script type="text/javascript">
$(function () {
$('#countdown').countdown({until:$.countdown.UTCDate(-8, 2010,  1 - 1, 1), format: 'DHMS', layout:
'<div id="timer">' + '<hr />'+
	'<div id="timer_days" class="timer_numbers">{dnn}</div>'+
	'<div id="timer_hours" class="timer_numbers">{hnn}</div>'+
	'<div id="timer_mins" class="timer_numbers">{mnn}</div>'+
	'<div id="timer_seconds" class="timer_numbers">{snn}</div>'+
'<div id="timer_labels">'+
	'<div id="timer_days_label" class="timer_labels">days</div>'+
	'<div id="timer_hours_label" class="timer_labels">hours</div>'+
	'<div id="timer_mins_label" class="timer_labels">mins</div>'+
	'<div id="timer_seconds_label" class="timer_labels">secs</div>'+
'</div>'+
'</div>'
});
});
</script>

From the above code you see a function call that targets the selector “#countdown”. Within the function call you will see three arguments. “Until” is to indicate when the count will expire. There are many different options here such as an absolute date, specific number of days…etc. For a full list of what is possible, visit the plugin’s website. I have chose to use an absolute date where “UTCDate” is the universal time and “-8″ is the time for Los Angeles/Pacific. Next is the year argument of “2010″. Then is the month and last is the days. So that statement in English says countdown until 2010 month 1 day 1 relative to Los Angeles/Pacific time zone.

Next argument you see is the “format” which just means the format of the dates where “D” means days, “H” means hours, “M” means minutes and “S” means seconds. There are many option combination of formatting as well which you can see on the plugin’s website.

Finally there is the “layout” where you can style the countdown to your liking. From the code you can see it is pretty straight forward that I have two groups of divs where one are the numbers and the other are the labels. Inbetween the divs you will see “{dnn}” for days, “{hnn}” for hours..etc…These are the actual content to be displayed in the divs which it pulls from the plugin. The “+” sign you see are concatenations or appends.

STEP 2

Now that we have coded the javascript, let’s put in the markup.

HTML:

<body>
<div id="countdown"></div><!--close countdown-->
</body>

That’s it for the markup. Simple huh? Basically the function calls the selector with the ID of “countdown” and it generates the output inside that div.

STEP 3

This last step is what makes everything come to life. The CSS. Let’s go through each section to see what is needed and how I personally did my counter.

CSS:

/* timer general */
#timer {
	position:relative;
}
hr {  /* this creates the overline you see on top of the timer */
	position:absolute;
	top:60px;
	left:0;
	width:972px;
	border:1px solid #ffffff;
}
*:first-child+html hr { /* this is the IE7 hack to position the above overline */
	top:370px;
}

Above you see an ID with timer set to relative so child containers/objects can position absolutely. A horizontal rule to server as an overline effect that you see on the demo and a IE7 hack to position the hr tag correctly.

CSS:

/* timer numbers */
.timer_numbers {
	font-size:100px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	text-align:left;
	color:#ffffff;
}
#timer_days {
	background:url(../images/countdown1.png) #ffffff no-repeat;
	float:left;
	width:236px;
	height:159px;
	padding:10px 0 0 18px;
	letter-spacing:60px;
}
#timer_hours {
	background:url(../images/countdown1.png) #ffffff no-repeat;
	float:left;
	width:236px;
	height:159px;
	padding:10px 0 0 18px;
	letter-spacing:60px;
}
#timer_mins {
	background:url(../images/countdown1.png) #ffffff no-repeat;
	float:left;
	width:236px;
	height:159px;
	padding:10px 0 0 18px;
	letter-spacing:60px;
}
#timer_seconds {
	background:url(../images/countdown2.png) #ffffff no-repeat;
	float:left;
	width:210px;
	height:138px;
	padding:10px 0 0 22px;
	letter-spacing:55px;
}

Above we have the class “.timer_numbers” to set a global font attribute such as size,colors..etc. Then comes the IDs for the actual values days,hours,minutes and seconds. This is where you hook your own background image/graphic. It is set to float left with a set width and height. The padding and letter-spacing has to be played with depending on your image/graphic. For example if the background panels are closer in, your letter-spacing has to follow and be set smaller in size and vice versa. The padding positions the actual numbers left,right,up or down.

You will notice that I have used two different images for this and that is because on the last value, the “seconds” — has no comma after it thus I made an image without the comma to accommodate for that.

Finally we have the labels.

CSS:

/* timer labels */
.timer_labels {
	font-size:40px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	text-align:center;
	color:#666;
}
#timer_labels {
	position:relative;
}
#timer_days_label {
	position:absolute;
	top:150px;
	left:58px;
}
#timer_hours_label {
	position:absolute;
	top:150px;
	left:305px;
}
#timer_mins_label {
	position:absolute;
	top:150px;
	left:570px;
}
#timer_seconds_label {
	position:absolute;
	top:150px;
	left:825px;
}

Similar to the numbers section we just discussed, the class “.timer_labels” serves as the global styling for the labels that go under each value days,hours,minutes and seconds. Then the id “#timer_labels” div is set to relative so the child container/objects can be absolutely positioned. Following that are the value label divs themselves being set into position depending on your background image/graphic.

Well there you have it, a cool countdown timer which can be put to many uses. Please note that I have only scratched the surface of what this plugin can do, for more detailed documentations please visit the plugin’s website.

Have you seen other uses for a countdown timer? Please share with us…

Enjoyed this Post? Please Share!
  • Twitter
  • Digg
  • del.icio.us
  • Facebook
  • Print

About the Author

Roy Ho is a web site design and developer. He blogs tutorials and articles on web design and development to share with the community. He has been practicing this field for 12 years now. He is passionate in the field and very eager to learn more!
This entry was posted in Articles, CSS + HTML, Javascript + jQuery, Tutorials and tagged , , . Bookmark the permalink.
Back to top

14 Responses to Add a Countdown Timer on Your Website

  1. Bvs says:
    January 7, 2010 at 5:36 pm

    How can I change this script from countdown to a Countup. I need it that way for my website.

    Thanks,

    Bvs

    Reply
    • Roy Ho says:
      January 7, 2010 at 6:02 pm

      Hi Bvs,

      All you need to do to make it count up is change “until” to “since” and put in a relative or absolute date or time you would like for it to count up since.

      So the code would look something like this.
      $('#countdown').countdown({since: $.countdown.UTCDate(-8, 2010, 1 - 1, 1)

      That says count up since new years. But take note that it is set to PST so just change it to whatever UTC time zone you’re in.

      Reply
      • Bvs says:
        January 7, 2010 at 7:32 pm

        Hello Roy,

        Thank you for your prompt rely. I am not an expert in this field but I am more like a beginner.

        I like this counter style. I need it as a count-up with a “Year” “Days” “Minutes” and “Seconds” only starting from December 1, 2008.

        I need in it in an HTML format.

        Can you help please?

        Bvs

        Reply
      • Bvs says:
        January 7, 2010 at 7:37 pm

        Forgot to tell you, that my local time is in Fresno, California.

        I need a step-by-step to install this script to my website:

        such:

        what files need to be uploaded?

        Which part needs to be in the header?

        Which needs to be in the body and where else.

        Thanks for everything.

        Bvs

        Reply
  2. Roy Ho says:
    January 7, 2010 at 7:45 pm

    @Bvs
    Did you see the source files link? You can simply download the source files located at the beginning of the post and alter it the way you want. It is fully working html code along with the javascript files needed.

    Reply
  3. Bvs says:
    January 7, 2010 at 8:42 pm

    Yes I saw it and already downloaded it. It has 4 folders inside it, but I don’t know how to use them or where to apply them towards my website?

    Reply
  4. Bvs says:
    January 8, 2010 at 8:45 pm

    hmmm. I hope I am not asking too much, but can you at least walk me through the (4) files that I downloaded from the file source and let me know what do I need to do with each one of them and which file should be uploaded to the site and which file needs to be copied and pasted to the site index file.

    Thanks,

    Bvs

    Reply
    • Roy Ho says:
      January 9, 2010 at 1:26 am

      You simply upload all the files included on to your web server and it should work as is with nothing changed other than the code you want to count “since” instead of count “until”.

      All folders/files are interlinked declared in the html.

      Reply
  5. Bvs says:
    January 10, 2010 at 3:12 am

    Roy,

    Here is what I done, I uploaded all the files to my website (which is by the way an angelfire.com) website. Then I added Step (1) & Step (2) html to my index.hmtl.

    But nothing happend and the counter did not show up on the website. Files have been uploaded separately because angelfire allow uploading of files only and not folders.

    Did I do something wrong that I need to fix?

    Tks

    Bvs

    Reply
  6. cash advance payday loan says:
    February 11, 2010 at 1:42 pm

    I am to a great extent impressed with the article I have just read. I wish the writer of designintheraw.com can continue to provide so much practical information and unforgettable experience to designintheraw.com readers. There is not much to say except the following universal truth: If you see a cactus falling, DO NOT catch it!!! I will be back.

    Reply
  7. Nagaraju says:
    May 11, 2010 at 1:54 am

    hi Roy,
    This is nice code for countdown.
    i have faced problem..
    I should fit this countdown in width:260px;
    pleas advise me..

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

*


*