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.
Features
- Extremely easy to integrate
- jQuery compatible
- Unobtrusive javascript
- Easily skinable
Demo
Download
- New version: jquery.lwtCountdown-0.9.5 jquery.lwtCountdown-0.9
- PHP demo code
- HTML demo code
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.
Tags: more
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
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
Fantastisc! Works excellent now!
Thanks for this great script!!
Jerry
[...] to integrate, jquery compatible, easily skinable. Dark and light versions available. Preview | Details | [...]
[...] to integrate, jquery compatible, easily skinable. Dark and light versions available. Preview | Details | [...]
very nice.
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.
excellent work and very good looking .. just one thing, it take a little while to load.
thanx for sharing
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
I was sure I’d forget to “rewind” the damn thing at some point.
Thanks!
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.
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!
How can we disable the “week” functionality? I just need to countdown in days! Thanks, great job! I love it!
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;
}
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.
Hey.. How abt adding a pause and start, and reset options..
Excellent and very good design !!!!
Thanks from Germany !
Thomas
[...] View tutorial [...]
In version HTML, when the countown end and i want redirect to a new link to a page web as I make?
Thanks
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.
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!
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!
@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!
wow!
Im just learning php and all that fancy db stuff. And I got this to work! This web shit is awesome!
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.
[...] View tutorial [...]
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
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
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.
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!!
New version is out, featuring many of the things proposed here.
Thank you all for your comments.
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!
Bob,
The countdown decrements by 1 second intervals using javascript to count that (client time).
You can resync it with the server at any time using an AJAX call (Check the reset function in this example)
Thanks for using the script!
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.
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
}
});
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
Hello Martin,
Thanks for the heads up!
Your way seams to be working perfectly.
The same thing can be achived by just reordering the lines:
This works:
targetTime.setFullYear(options.targetDate.year);
targetTime.setMonth(options.targetDate.month-1);
targetTime.setDate(options.targetDate.day);
But this does not: (3 weeks instead of 7)
targetTime.setDate(options.targetDate.day);
targetTime.setMonth(options.targetDate.month-1);
targetTime.setFullYear(options.targetDate.year);
Just another wtf js moment I guess.
Thanks again!
Vassilis
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()
}
});
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?
Hi, Great Job
Is there a way to make it work with Cufon?
Thanks
Diego
@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);
}
};
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;
};
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 ?
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