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
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.
Tags: more
@PADAMAN420
Sure, just delete the HTML code for weeks and days and you are set.
@George
PHP code will always be executed before Javascript as the first on is server side and the latter is client side.
You can use AJAX to achieve what you want.
@George
Use a set date if you want to do that.
Alternatively, use the server session store to save the target time and set the setup variables accordingly.
for eg vassilis?
Hi,
When using a date that require more than 99 weeks off it squishes the weeks digits together too much.
Would it be possible to add another column of months to script?
Gary
Would someone be so kind as to show the complete script with weeks omitted and 3 digit days added?
Great plugin!
But I’m wanting to know how this could be modified to include capability for timezones, I have a specific case where I need to only show the countdown if before 4:00PM/16:00 EDT(eastern daylight time) but the countdown will still be showing for everyone west of the EDT timezone at 4:00PM/16:00 which is not desired.
Can this be used on wordpress blog?
Love the script, however I’m having some issues with IE where the Days/Hours/Mins don’t always load, load halfway, or only one number loads. Is there some trick to force IE to behave correctly?
Thanks
I really like this plugin! Kinda cool to have the ticking down feature rather than a static number.
BUT —- (isn’t there always a BUT?)
I get this error at the top of the page when it loads….
Warning: extract() [function.extract]: First argument should be an array in /mywebsite/wp-content/plugins/jquery-t-countdown-widget/countdown-timer.php on line 71
Warning: extract() [function.extract]: First argument should be an array in /mywebsite/wp-content/plugins/jquery-t-countdown-widget/countdown-timer.php on line 201
Any ideas why this is happening?
Hi, just to tell that I had the same problem then Boone and I realized I was using the jquery-1.3.2.js. When I changed it to jquery-1.4.js the plugin became ok even on IE.
Does this show different countdowns if you are in different timezones?
I have an event that is starting on 2pm Dec 1 EST, and want to show the countdown across timezones to that 2pm EST event. How would I do so?
WOW! Nice scripting!
I have one question; is it possible to remove the day timer and replace the hours with 24+ timer. So if there are 2 days left, the script shows me 48 hours instead of 2 days?
Hope you can help me out!
Thanks
lol, got it working already, nice peace of coding, good to read!
Replace
——————————————————————
hours = Math.floor(diffSecs/60/60)%24;
——————————————————————
With
——————————————————————
hours = Math.floor(diffSecs/60/60);
——————————————————————
Hi!
I have updated the script so it allows a starting time to be passed as a parameter. It’s useful when you want to use server time instead of client’s time which can be wrong.
In your setup, add the following option:
–
$(‘#countdown’).countDown({
‘serverStartTime’ :
});
–
In the lwtCountdown-1.0.js file, around line 75 replace var nowTime = new Date() with:
–
if(options.serverStartTime)
var nowTime = new Date(options.serverStartTime);
else
var nowTime = new Date();
–
Math
Hi I sthere a version of the plugin compatible with jQuery 1.3.I really liked it but cannot upgrade to 1.4 as of now and need to use the plugin in jQuery1.3. But in 1.3 it breaks in IE.Can some one please help me
This countdown clock doesn’t appear to work past 6 days. Anyone else having as issue? I just want the countdown to start at 47 days and count down.
To have years, days … only edit this code like that and add a
0
if ($.data($this[0], ‘omitWeeks’) == true)
{
days = Math.floor(diffSecs/60/60/24);
weeks = Math.floor(diffSecs/60/60/24/7);
}
else
{
days = Math.floor(diffSecs/60/60/24)%365;
years = Math.floor(diffSecs/60/60/24/365)
}
$this.dashChangeTo(id, ‘seconds_dash’, secs, duration ? duration : 800);
$this.dashChangeTo(id, ‘minutes_dash’, mins, duration ? duration : 1200);
$this.dashChangeTo(id, ‘hours_dash’, hours, duration ? duration : 1200);
$this.dashChangeTo(id, ‘days_dash’, days, duration ? duration : 1200);
$this.dashChangeTo(id, ‘years_dash’, years, duration ? duration : 1200);
did anyone found that the cpu loaded quite high with this script ? it jump from 0 to 20+
I wanted to do an offset date where it would count down 30 seconds from a submit event. As maybe a suggestion in the core setCountDown function to shorten the normal countdown call:
//in $.fn.setCountDown
else if (options.targetOffset)
{
options.targetOffset.day = options.targetOffset.day == undefined ? 0 : options.targetOffset.day;
options.targetOffset.month = options.targetOffset.month == undefined ? 0 : options.targetOffset.month;
options.targetOffset.year = options.targetOffset.year == undefined ? 0 : options.targetOffset.year;
options.targetOffset.hour = options.targetOffset.hour == undefined ? 0 : options.targetOffset.hour;
options.targetOffset.min = options.targetOffset.min == undefined ? 0 : options.targetOffset.min;
options.targetOffset.sec = options.targetOffset.sec == undefined ? 0 : options.targetOffset.sec;
targetTime.setDate(options.targetOffset.day + targetTime.getDate());
targetTime.setMonth(options.targetOffset.month + targetTime.getMonth());
targetTime.setFullYear(options.targetOffset.year + targetTime.getFullYear());
targetTime.setHours(options.targetOffset.hour + targetTime.getHours());
targetTime.setMinutes(options.targetOffset.min + targetTime.getMinutes());
targetTime.setSeconds(options.targetOffset.sec + targetTime.getSeconds());
}
//front code to initiate 30 second countdown
$(“form#id”).submit(function(){
$(‘#countdown_dashboard’).countDown({
targetOffset: {‘sec’: 30}
});
});
//instead of current way
$(“form#id”).submit(function(){
$(‘#countdown_dashboard’).countDown({
targetOffset: {
‘day’ : 0,
‘month’ : 0,
‘year’ : 0,
‘hour’ : 0,
‘min’ : 0,
‘sec’: 30
}
});
});
Hi,
I was wondering how can i get just Days, Hours And Minutes.
My event is in 152 days i want to display 152 days instead of 26 weeks.
How can i do that?
Regards
Excelent!!!!!
Does this script use the time from the client’s browser? Or Server?
Thanks for that. I have tried to add to the code but it is not right.
I added just after the target Date of my event:
jQuery(document).ready(function() {
$(‘#countdown_dashboard’).countDown({
targetDate: {
‘day’: 138,
‘month’: 1,
‘year’: 2011,
‘hour’: 23,
‘min’: 58,
‘sec’: 0
}
targetOffset: {
‘day’: 0,
‘month’: 0,
‘year’: 1,
‘hour’: 0,
‘min’: 0,
‘sec’: 3
}
});
$(‘#email_field’).focus(email_focus).blur(email_blur);
$(‘#subscribe_form’).bind(‘submit’, function() { return false; });
});
@defsound
Current time is retrieved with JS so it’s the client’s time.
Hi,first of all, congratulations for this very good script!
I would like to showa link while time is not ended and once it’s ended show a message. I saw and tried to use onComplete righ after the code but it did not work. I may be missing something. This is the code I’m using, could you help me?
// 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() }//don’t know where to set the message and is there a method to show a link here once time is not ended?
});
});
Hello,
just I want to have minutes and also after counting finished form submitted?
Any solution for this job?
Hi,
How do i trigger image instead of the default slideDown onComplete event? Actually, i am building site to create Groupon.com sort of counter. When the count down end, the Buy button image will be disabled.
Please advice and hope to hear from you as soon.
Cheers.
Im working on MVC 2, the script works very well, but not working the onComplete option. this is my code:
jQuery(document).ready(function () {
$(‘#countdown_dashboard’).countDown({
targetOffset: {
‘day’: 0,
‘month’: 0,
‘year’: 0,
‘hour’: 0,
‘min’: 0,
‘sec’: 0
}
});
$(‘#countdown_dashboard’).stopCountDown();
var minutos = $(“#minutos”).val();
$(‘#countdown_dashboard’).setCountDown({
targetOffset: {
‘day’: 1,
‘month’: 1,
‘year’: 0,
‘hour’: ,
‘min’: ,
‘sec’:
},omitWeeks: true, onComplete: function() { $(‘#complete_info_message’).slideDown() }
});
$(‘#countdown_dashboard’).startCountDown();
});
[...] Click here Demo Site: Click here Title: jQuery Countdown Script Technology: jQuery Code Site: Click here Demo Site: Click here Title: jQuery Countdown Technology: jQuery Code Site: Click here Demo [...]
is there any way to just display how many days are left and omit everything else?
Hy,
First, my compliments on this countdown timer…GREAT WORK!
I want to use it to countdown until my new site goes online.
I only use the HTML version.
How do i set up the HTML version to autoredirect to my new site when the counter hits “0″?
I already letting the index to autorefresh every 5 seconds.
Hello, how can i get more then 99 weeks? Enddate: 21.12.2012
Hello,
who can i put more than 99 weeks? Thanks
Hi Bill!
How are you getting on?
I was just going to ask if it is possible to use a code that redirect to a URL as soon the countdown timer reaches zero?
Give me a hand, please.
Thanks
It seems the onComplete event cannot be used in setCountDown function.
I have multiple countdowns and each of them should start the following.
Is it possible to inverse the script, no to create a count down but create a count “up” …
Thanks a lot!
Is there a way to customize the slide down effect? I want to make it shorter.
So I wanted to do the 3 digit days instead of weeks. I downloaded the HTML Under Construction archive from the project site and simply added the date to countdown to and the omitWeeks variable, but when I add the omitWeeks = true it sets all the values to zero. It works once I take out the omitWeeks variable but I don’t see why. Here’s the code that I have in the file downloaded from the project site
$(‘#countdown_dashboard’).countDown({
targetDate: {
‘day’: 30,
‘month’: 11,
‘year’: 2011,
‘hour’: 7,
‘min’: 0,
‘sec’: 0
}
omitWeeks: true
});
@Math
the code is great and it works like a charm. i have a question about the using server time. im not exactly clear on where to include the “‘serverStartTime’ :” option as mentioned in your comment. do i add it somewhere underneath targetDate, where day, month, etc. is? and what kind of value do i add next to it? do i add a number? how do i let it know, i want it to retrieve the server’s time? any help would be appreciated and thanks for the hard work.
@Admin, thank you for this, it looks and works really well.
@ Defsound, it depends which option you use. If you use targetDate then it is using the users PC clock and calender to count down to a time and date and will be different for each user, if you use targetOffset then you can choose the period of time to count down to. If you want everyone to see the same countdown amount then you should use the latter.
I wrote the following in php to calculate the difference between a now and a future date and to submit the calculated difference to the targetOffset function. I hope its useful to someone.
[code]
<?php
function time_difference($endtime){
//converting from a unix time stamp
//we deduct 1 day, 1 month and 1970 years as this is when unix time is counted from
$days= (date("j",$endtime)-1);
$months =(date("n",$endtime)-1);
$years =(date("Y",$endtime)-1970);
$hours =date("G",$endtime);
$mins =date("i",$endtime);
$secs =date("s",$endtime);
$difference="'day': ".$days.",'month': ".$months.",'year': ".$years.",'hour': ".$hours.",'min': ".$mins.",'sec': ".$secs;
return $difference;
}
// $future_date should be a unix timestamp
$future_date = 1420113600; // 1st Jan 2015 12:00:00 (noon)
$endtime = $future_date - time(); //gives the number of seconds between now and the future date
$countdown = time_difference($endtime);
echo "
jQuery(document).ready(function() {
$('#countdown_dashboard').countDown({
targetOffset: {",$countdown,"
}
});
});
";
?>
[/code]
Hello
First congratulations for the script, very functional!
Doubt, how would he show the days to hours? Type: 2 days 48 hours show. – 3 days 72 hours show ..
Thanks
@luger
Here’s my setup:
[code]
$(document).ready(function (){
$('#countdown').countDown({
targetDate: {
'day': 1,
'month': 12,
'year': 2012,
'hour': 23,
'min': 0,
'sec': 0,
'utc': true
},
'omitWeeks': true,
'serverStartTime' :
});
});
[/code]
The part was missing in my published comment. It got lost somewhere when submitting the comment.
Hope it helps.
–
Math