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
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…
How can I change this script from countdown to a Countup. I need it that way for my website.
Thanks,
Bvs
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.
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
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
Hi, Roy Ho. Hope you don’t mind i use your css *(a bit changed no pics) + this script to my wife photos web page. It looks very good!
KEEP doing great things, BRAVO!!!
thanks, Bozzo
@bozzo – no worries!
@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.
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?
Unfortunately I am not sure how else to help you short of developing the site for you.
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
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.
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
Have you tested it on your local server environment first before uploading it to the live server?
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.
hi Roy,
This is nice code for countdown.
i have faced problem..
I should fit this countdown in width:260px;
pleas advise me..
You would need to create smaller background images and change the width in the CSS file.
hi Roy,
i’m writing from Rome, Italy.
I need to use the countdown, but I suppose I don’t understand how to use the plug in about Italian time.
Where I had to paste the plug in. And better, what I had to subsitute for my time…You use -8 for LA,
for Italy there’s a lot of code…
HI Vale,
You would use +2 for Italy.
very nice application, but can someone change it so you also get months? =/ thanks anyway!
Hi Joeri,
You must certainly can…Just change the format of the UTCDATE.
so if i change the format of the utcdate and put in a date, i get ” X Months, X days, X hours, X minutes, X seconds”?
Here is what I have so far it almost works…
$(‘#countdown’).countdown({until:$.countdown.UTCDate(-7, 2011, 11 – 1, 4), format: ‘ODHMS’, layout:
” + ”+
‘{onn}’+
‘{dnn}’+
‘{hnn}’+
‘{mnn}’+
‘{snn}’+
”+
‘months’+
‘days’+
‘hours’+
‘mins’+
‘secs’+
”+
”
I need to know what shall I write for indian time
UTC: +5:30
I am able to write +5 but i need 30 also.. how can i do that.
please help me out
Hmmm, that’s a good question…I am not sure if this will work but try putting +5.5.
[...] Site: Click here Title: Add a Countdown Timer on Your Website Technology: jQuery Code Site: Click here Demo Site: Click here Title: Creating a date countdown timer in ActionScript 3 / Flash [...]
to add a number to the days part, what can i do?
dnnn ?
for example: 219 days 30hours …
Hi Mistik,
Actually my example DOES show 3 digits days except I am only showing two. Another words nothing need to change other than CSS and the image.
and when I place a count up …I want to place a start date .. can you tell me how to do this?
ex. count up from 13.06.2010
Awesome, thanks. I’m stuck on the arguments (-8, 2010, 1 – 1, 1). I would like a countdown to May 14, 2011, and I’m in Colorado, so I used (-7, 2011, 5 – 14, 1) – Something is not right obviously because the countdown shows up as zeroes. Please explain the last three numbers. Thanks again!
Dang – Totally forgot that January is 0 – all makes sense now. Hope this helps someone!
HI Tio,
glad you got that taken care of! Enjoy the countdown!
Could you please explain how January being 0 would help? I’m trying to set my countdown to July 15, 2011. Argument used is (-8, 2011, 7 – 15, 1), but I keep getting the zeros on my countdown.
@Sean- Well first you must choose your own timezone…-8 is PST…
Is it possible for this timer to pick up time from the server rather then the local PC.?
[...] jQuery countdown timer from 1PlusDesign [...]
I am having trouble with the countdown. I need to countdown to July 15, 2011. Here is what I have so far, but I keep getting all zeros. Oh, I’m also in North Carolina (EST)
$(‘#countdown’).countdown({until:$.countdown.UTCDate(-8, 2011, 7 – 15, 1), format: ‘DHMS’, layout:
I thought I would be able to figure this out, but apparently not. I am trying to add this to a sharepoint site. I have uploaded the code files into my library and added the script to a content editor but all I get is a blank page? Any help? Thanks!
Really good tutorial !! I really like it .. but I have the same problem as Sean though !!! I keep on getting zeros but for my part I am in the island Mauritius, Indian Ocean near Madagascar.
@David – you must select the correct timezone for your country/state….
I noticed that even when I set my GMT time CST right the countdown was off by an hour. Then I realized my server is located in EST timezone. So when the time was set to my servers timezone it worked right. Just an FYI to everyone implementing the code
Quite nice application!
I would really like to grab DATETIME data from a MySQL database and use this to start my countdown from.
I have yet to pull data from PHP using javascript so i do appreciate any help on this.
Would you mind pointing me in the right direction here..
Greatly appreciated
Think I need to clarify this a bit better. I want to get the date a MySQL entry was entered and use an until date of 5 days later.
What would be my best possible approach for this?
Again,
thank you for any help on this…
@Will – unfortunately that is way beyond the scope of this tutorial. But to get you started in the right direction, simply pull the datetime out from your mysql database and put it in an input hidden field, then in your javascript, pull that value out and format it the way the counter accepts it and the rest is the same…
Quick question. I am using this awesome plugin but there is one thing I want to add.I want an image to replace the countdown once it reaches 0′s. Not sure where I would put my line of code for the image to display.
Thanks
To do that you can simply add in an expiring callback with onExpiry: and the function you want to call when it expires.
Thanks for the great tutorial Roy! I used it on a joke site I made: http://whenthefuckdoesschoolend.com
Before finding this page I was using the original code from the jquery countdown plugin that is used.
My original code was :
$(function () {
var eventDay = new Date ( 2011, 10 - 1, 26, 18, 45, 0 );
$('#livetime').countdown({until: eventDay, expiryText: 'Join Us Live Now!'});
$('#year').text(eventDay.getFullYear());
});
I cant seem to get this to work with the layout option any help would be great.
Hello,
I like the countdown; I have a question.
How can I move the position of the countdown from the middle of the page to “top-left” of the page?
Thanks!
You would just need to adjust the CSS of the container.
Thank you for this, it’s one of the best jquery countdown clocks out there.
This is exactly what I need.
By the way, very nice mark up!
I’ve just realised that lik emay people I am getting a load of 0s.
$(‘#countdown’).countdown({until:$.countdown.UTCDate(0, 2011, 11 – 29, 1), format: ‘DHMS’, layout:
I am in Manchester UK and need to set up as GMT.
Any help would be appreciated.
@Taz – first try a different UTC time like -8 for US Pacific time just to see if it works. This will narrow down your issue to see if it is code from other section that is the culprit or if it is the timezone issue.
how to change the date to 12 jan 2012(+5.30gmt),and to align the whole counter to left…please help me
[...] Add a Countdown Timer on Your Website [...]
[...] jQuery countdown timer from 1PlusDesign [...]
Hey sorry, but i read, read, read but for Austria (-1, 2012, 3 – 19, 1) the countdown ist 0000000 ! why??’ can u help me??
ok well i have the answer –> (+1, 2012, 19 – 5, 1) //zum beispiel//