Hello ๐, I'm a Software Engineer with experience in payment systems, covering both issuing and acquiring sides. Sometimes, I give Talks and teach at events, universities, and conferences.
More one: edson.hilios.com.br
The Final Countdown plugin for jQuery
Home Page: http://hilios.github.io/jQuery.countdown/
License: MIT License
Hello ๐, I'm a Software Engineer with experience in payment systems, covering both issuing and acquiring sides. Sometimes, I give Talks and teach at events, universities, and conferences.
More one: edson.hilios.com.br
Hello,
I have read the document it supports milliseconds as the finadata. however, I am failed to duplicate.
$('#clock').countdown('420000', function(event) {
$(this).html(event.strftime('%-M Minute%!M %-S Second%!S'));
});
is there any example?
maybe it's not a exact issue. forgive me pls!
Hello there!
It seems that the problem with bootstrap.js (#2) has returned. After including both scripts countdown just stops working.
I'm using jQuery 2.1.1, bootstrap.js 3.2.0 and jQuery.countdown 2.0.4.
The plugin method expects a finalDateTime to countdown to, so I am passing the time from the server as the final future time to the client. So does the plugin compares the server provided time with the client's local timezone time & starts the countdown?.
If so the functionality will run fine for a client in my timezone but not for the client is in some other timezone or in a daylight saving. Then I have to implement some other
approach for time synchronization.
save the value to cookie (with jquery cookies) on page exit and resume countdown on next visit?
like this:
/**
* Set cookie
* @param {string} name Name of cookie
* @param {string} value Value of the cookie
* @param {object} expires Date object of expire time
*/
function setCookie(name, value, expires) {
document.cookie = name + "=" + escape(value) + "; path=/" + ((expires == null) ? "" : "; expires=" + expires.toGMTString());
}
/**
* Get cookie
* @param {string} name Name of cookie
* @return {?string}
*/
function getCookie(name) {
var cname = name + "=";
var dc = document.cookie;
if (dc.length > 0) {
begin = dc.indexOf(cname);
if (begin != -1) {
begin += cname.length;
end = dc.indexOf(";", begin);
if (end == -1) end = dc.length;
return unescape(dc.substring(begin, end));
}
}
return null;
}
window.onload = function () {
var currentDate = new Date(),
availiableExamples = {
set2daysFromNow : 1 * 24 * 60 * 60 * 1000
};
function callback(event) {
// Update every second one time only
if(event.type != "seconds") return;
// Calculate the time left
var timeLeft = [
event.lasting.hours + event.lasting.days * 24,
event.lasting.minutes,
event.lasting.seconds
];
// Convert the number to two digits strings
for(var i = 0; i < timeLeft.length; ++i) {
timeLeft[i] = (timeLeft[i] < 10 ? '0' : '') + timeLeft[i].toString();
}
// Concatenate the strings with : and update the html
$(this).html(timeLeft.join(':'));
}
// Get the time saved into the cookie and turn it to number.
var oldTime = parseInt(getCookie('time'), 10);
if (0 < oldTime) { // If the time saved
$('div#clock').countdown( availiableExamples.set2daysFromNow + currentDate.valueOf() - oldTime, callback);
} else { // If not time saved
$('div#clock').countdown( availiableExamples.set2daysFromNow + currentDate.valueOf(), callback);
}
}
$(window).unload(function() {
// New Date object for the expire time
var exp = new Date();
// Set the expire time
exp.setTime(exp + 2592000000);
// Set a 'time' cookie with the current timer time and expire time object.
setCookie('time', availiableExamples.set2daysFromNow + currentDate.valueOf(), exp);
});
hello hilios,recently I have used the jquey.counddown plugin for my web application,but I found a problem that I can't get the realy left time,for example: I set ToDate is '2013/03/30' but the left time is 5 days ,and the current date is 2013/03/18.I'am in China,I guess the current date is beijing time. but what's wrong I have ?
ex:
$(function() {
var currentDate = new Date();
$('div.clock').each(function(){
$(this).countdown($(this).attr('timer'), function(event) {
switch(event.type) {
case "seconds":
case "minutes":
case "hours":
case "days":
case "daysLeft":
$(this).find('span#'+event.type).html(event.value);
break;
case "finished":
$(this).html('finished');
break;
}
})
})
});
<div class="clock" timer="2013/03/30 22:12:00" >
<span>
<span>ๅฉไฝ</span>
<span id="daysLeft"></span>ๅคฉ
</span>
<span><span id="hours"></span>ๅฐๆถ</span>
<span>
<span id="minutes"></span>ๅ้
</span>
<span>
<span id="seconds"></span>็ง
</span>
</div>
<div class="clock" timer="2013/03/19 13:12:00">
<span>
<span>ๅฉไฝ</span>
<span id="daysLeft"></span>ๅคฉ
</span>
<span>
<span id="hours"></span>ๅฐๆถ
</span>
<span>
<span id="minutes"></span>ๅ้
</span>
<span>
<span id="seconds"></span>็ง
</span>
</div>
<div class="clock" timer="2013/03/20 00:50:00">
<span>
<span>ๅฉไฝ</span>
<span id="daysLeft"></span>ๅคฉ
</span>
<span>
<span id="hours"></span>ๅฐๆถ
</span>
<span>
<span id="minutes"></span>ๅ้
</span>
<span>
<span id="seconds"></span>็ง
</span>
</div>
<div class="clock" timer="2013/03/15 00:00:00">
<span>
<span>ๅฉไฝ</span>
<span id="daysLeft"></span>ๅคฉ
</span>
<span>
<span id="hours"></span>ๅฐๆถ
</span>
<span>
<span id="minutes"></span>ๅ้
</span>
<span>
<span id="seconds"></span>็ง
</span>
</div>
<div class="clock" timer="2013/03/14 13:12:00">
<span>
<span>ๅฉไฝ</span>
<span id="daysLeft"></span>ๅคฉ
</span>
<span>
<span id="hours"></span>ๅฐๆถ
</span>
<span>
<span id="minutes"></span>ๅ้
</span>
<span>
<span id="seconds"></span>็ง
</span>
</div>
For some reason it's reporting 00 days. It's doing the same thing on. http://hilios.github.io/jQuery.countdown/
The monkey patch to make "remove" trigger an event causes jQuery UI's "Sortable" to break when items are removed from the sortable container.
Sortable without countdown:
http://jsfiddle.net/dleavitt/8H447/1/
(click "toggle" to remove an item, sorting continues to work)
Sortable with countdown included:
http://jsfiddle.net/dleavitt/sa6Bp/
(click "toggle" to remove an item, sorting breaks)
finished event is not correct,early 2 seconds.
This problem is caused because the following code
secondsLeft = Math.floor((toDate.valueOf() - currentDate.valueOf()) / 1000);
Should be modified to the following code
secondsLeft = Math.ceil((toDate.valueOf() - currentDate.valueOf()) / 1000);
My second question which i have to ask right after first one.
Is there a way to make this countdown be based on, for example GMT time, so that all clients will have same countdown time?
Testing your Final Countdown plugin and find that it is interfering with the Twitter Bootstrap Tooltip plugin. Sorry, I am not a great Javascript programmer so wondering if you can confirm?
When I remove your plugin tooltips function as expected, when I insert the
<script type="text/javascript" src="javascripts/jquery.countdown.js"></script>it breaks again.
Here is the source for tooltips:
http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js
Thank you for your plugin, it is very nice!
Check it here:
http://jsfiddle.net/M6G5t/6/
Congratulations for the excellent work .
I'm a web designer in Brazil and would like to know how I can translate to Portuguese counter.
I would like to translate the values โโof Days, Hours, Minutes and Seconds as I am working on a site that uses the counter.
I thank for the help and then wish to share the translated file.
You can check out the website I'm producing on the link below.
http://www.andresugai.org/video/index2.html
Thank you
var nextDay = new Date(). setHours(0, 0, 0, 0).getTime() + (1 * 24 * 60 * 60 * 1000);
$('#clock').countdown(nextDay, function(event) {
$(this).html(event.strftime('%H hour%!H, %M min and %S sec.'));
});
that's the code i managed to put in my application.js file. It should count everyday 24 hours till 0, and then restart to 24 hours again (the loop), i can't make it work.
and below is the error i took from chrome console
Uncaught TypeError: undefined is not a function application.js:57
(anonymous function)
hi,lilios,I've used yor countdown and I have got the result exactly,and I have readed the document,but I am puzzled of some cases:
seconds
Called whenever the seconds changes.
minutes
Called whenever the minutes changes.
hours
Called whenever the hour changes.
days
Called whenever the daychanges.
$(function(){
$('div.clock').countdown($(this).attr("timer"),function(event){
switch(event.type){
case "seconds":
alert("seconds");
break;
case "minutes":
alert("minutes");
break;
case "hours":
alert("hours");
break;
case "days":
alert("days");
break;
}
})
})
as you can see above, when I reload the page ,I found that the all of the seconds,minutes,hours and days will be alerted,then alert the seconds every second. I khnow that the event.type means that the time change type .for examlple:
when seconds,it means that the seconds will be alerted when second changed
when minutes, it means that the minutes will be alerted wnen minute changed
when hours, it means that the hours will be alerted wnen hour changed
when days, it means that the days will be alerted wnen day changed
but I can't understand why when the page loaded ,all of them will be excuted
Hi, is there a way to make the plugin do a normal count instead of a count down?
if ($('span').text() == '00') {
<span style="display: none;"></span>
} else {
<span>%m</span> %!m:mรชs,meses;
}
// Now in german
event.strftime('%-D tag%!D:e; %H:%M:%S');
// => 1 tage 23:45:56 (or) 2 tag 23:45:56
plural of days is not correct, it should be:
days = 'tage'
day = 'tag'
CORRECT:
// => 1 tag 23:45:56 (or) 2 tage 23:45:56
this jquery countdown plugin can be looped? im newbie in js so i dont know how if it can be, i need to countdown 24hours, and then after 24 hours, reset time to 24 hours again
According to the documentation, the following code should setup up a timer, then stop it, but instead I get the following error:
[Error] Error: Couldn't cast `stop` to a date object.
parseDateString (jquery.countdown.js, line 63)
setFinalDate (jquery.countdown.js, line 181)
Countdown (jquery.countdown.js, line 140)
(anonymous function) (jquery.countdown.js, line 245)
each (jquery.js, line 4)
each (jquery.js, line 4)
countdown (jquery.countdown.js, line 225)
(anonymous function) (t.html, line 13)
l (jquery.js, line 4)
fireWith (jquery.js, line 4)
ready (jquery.js, line 4)
S (jquery.js, line 4)
Test code:
<html>
<head>
<script src="public/js/jquery.js"></script>
<script src="public/js/jquery.countdown.js"></script>
</head>
<body>
<div id="count"></div>
<script>
$(function() {
$('#count').countdown('10/10/2014', function(event) {
$(this).html(event.strftime('%H:%M:%S'));
});
$('#count').countdown('stop');
});
</script>
It'd be cool if this was installable with https://github.com/bower/bower also
Can't work with Prototype together in Magento.
No time left show.
By this moment the browser testing is done by a human, it's a best practice to automate this kind of test once that they minimize bug at cross environments.
This feature tasks are:
check this fiddle, you will see: when countdown finished, countdown again on the same element will not work.
http://jsfiddle.net/M6G5t/3/
Hi,
I was wondering if you could help me out, I'm a total jQuery rookie and I'm trying to figure out your jquery plugin. I keep on getting an error TypeError: $(...).countdown is not a function when trying to load your script. I'm just not sure what I'm doing wrong, but any help would be great!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Final Countdown Timer</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="/jQuery.countdown-2.0.0/src/jquery.countdown.js" type="text/javascript"></script>
</head>
<body>
<div id="clock">Limited Time Only!</div>
<script type="text/javascript">
$( document ).ready(function() {
console.log( "ready!" );
// 15 days from now!
var date = new Date(new Date().valueOf() + 15 * 24 * 60 * 60 * 1000);
$('#clock').countdown(date, function(event) {
$(this).html(event.strftime('%D days %H:%M:%S'));
});
});
</script>
</body>
</html>
Hi,
i want to show the double digits like if 1 day left, i want it to show as "01" instead of "1"
I'm sure this is possible, but my js experience is pretty limited. I was wondering what would need to be done to round up time because I don't need to display more than one value.
Right now, if I only want to display days it will seem inaccurate. 5 days + 23 hours would make more sense as 6 days, but if you don't want to display the hour component, you just see 5 days.
I hope this is making sense... here's an example of how my code is set up:
My site only shows the minutes left until an event. However I would like it to show the time rounded to the next minute e.g.
Time now = 21:54
Countdown to = 21:55
Would show as 0 minutes. Would prefer for this to show as 1 minute. Is this possible?
I'm using the same animation that is found on the home example page here
http://hilios.github.io/jQuery.countdown/
In both this example page and in my application the animation of the numbers flipping doesn't happen with every second. Every 10 seconds or so the animation doesn't occur even though the number changes.
It does not work when I include require.js.
I get this message:
Uncaught TypeError: undefined is not a function
When I do not load require.js it works fine.
I can't figure out why it doesn't work.
For testing I used the default demo script:
$("div#testdiv").countdown(nextYear + "/01/01", function(event) {
$(this).html(event.strftime('Next year in '
+ '<span>%w</span> weeks '
+ '<span>%d</span> days '
+ '<span>%H</span> hours '
+ '<span>%M</span> minutes '
+ '<span>%S</span> seconds'));
});
Could you please help?
Hello,
I used the basic example you provided (counting till 1/1/2015)
It says 4 days remaining , how come ?
did I do anything wrong ?
<div id="counter"></div>
<script>
$(function(){
$('div#counter').countdown('2015/01/01', function(event) {
$(this).html(event.strftime(' %d days %H:%M:%S'));
});
});
<script>
Show off the plugin styling flexibility:
I am new to JQuery, can anyone help with a brief tutorial on how to get a basic demo working in a rails app? I have tried downloading the .js and .min.js and adding to my assets<javascript and then add //= require for both of them but it is still not recognizing the countdown method
I want to display particular time elements without leading zero, smth like "7 h 2 min 8 sec" instead of "07 h 02 min 08 sec" is there a way to do it?
Is the time-format can be extended to "YYYY/MM/DD hh:mm:ss.sss" or "YYYY/MM/DD hh:mm:ss.s" ?
Hi, it's possible to know if the countdown is paused o running ?
For instance if I run
$('#check-in-timer').countdown('pause');
i'd want to know the current state to resume the timer.
A toggle
method would be usefull.
Thank you very much.
Hello.
I'm currently developing a website in non-english. Can I somehow add a array with the translations for weeks, years, days etc. ?
I gave it a try on my own but failed hard. Thanks, Michael.
I get taken to a page that says "502 Bad Gateway"
Hi!
I'm wondering if it is possible to output the ofset time variables? I am pulling my input from DOM, and then I'm putting that as my coundown time. From that I'd like to get offset minute, hour or any of the possible time variable. I tried with
$('.hour.curr.top').countdown(countDownString, function(event){ var nextHour = event.offset.hours+1; var $this = $(this).html(event.strftime('%H')); });
The first is the div with those classes that the hours should be put, countDownString is the time format in YYY/MM/DD hh:mm:ss
. So far I can only output the remaining hours, but when I put nextHour
instead of %H
I get an error (undefined variable), but if I put html(event.strftime(nextHour + '%H')
I get the offset hour, and the current (how many hours left).
Is it possible to just output the ofset hour?
EDIT: I figured it out. I just needed to put nextHour
without event.strftime
Whoever is with time running out, remove the button, or any other action.
But if not over time continue button.
In the example, it removes all the buttons.
I tried implementing the plugin my code below
Tried on '2014/02/05'
$('#clock').countdown('2014/02/06', function(event) {
$(this).html(event.strftime('%H:%M:%S'));
}); //Works fine
timer 06:45:23
but when I provide the finalDate as
2014/02/05 08:54:52
It doesn't work on the UI I get the timer as 00.00.00. Is it a bug?
One more question how is the plugin getting the current time based on which it starts the countdown?
The jQuery plugin is a great one. Thanks! I'm having some serious issues with it not working when I have Prototype JS loaded as well. I need to use this on a Magento site which require Prototype, typically this is not an issue since the .noConflict() resolves most issues. In this case, even using any known method of .noConflict() does not resolve the issue.
It seems somewhere in the core of countdown.js the mechanism that updates the node gets overridden with Prototype.js and therefore leaves it empty at all times. I can give more details on the behaviour - but wasn't able to find where the actual issue is.
Thanks!
Hi Edson, I like your plugin a lot but I have a couple of questions. How can I translate to another language? I'm trying to figure it looking at the js but I'm lost. And if I want to use the basic style but I just want to display days instead of weeks what should I do?
Best reagards, thanks in advance.
FYI, there is a typo in the first example of the advanced usage section of the readme. There is a "+" when there should be a ":"
"timeLeft[i] = (timeLeft[i] < 10 ? '0' + '') + timeLeft[i].toString();"
Should be...
"timeLeft[i] = (timeLeft[i] < 10 ? '0' : '') + timeLeft[i].toString();"
Hello, I'm calling the script as following:
$(function() {
$('#countdown').countdown("2012/12/13", function(event) {
var
switch(event.type) {
case "seconds":
case "minutes":
case "hours":
case "days":
case "weeks":
case "daysLeft":
$this.find('span#'+event.type).html(event.value);
break;
case "finished":
$this.hide();
break;
}
});
});
but the result I get is wrong:
1 Days 10 Hours 14 Minutes (it's more than 30 days...)
Here's my HTML:
Days
Hours
Minutes
(I removed the spaces and the seconds.. I hope I can do that - it's not clearly stated in the Readme.)
What am I doing wrong? Does the time calculation depends on my system time, or my server time? (I'm on a corporate network so maybe time is calculated centrally by our admin?) (just trying to guess..)
When add prototype 1.7.1 with jquery and countdown js,the div can not show the left time.As firefox & chrome shows ,the divs is flash and change values very quickly.
For not familar with js,I am not sure what caused the problem.
I have rename the $ to other variable name to prevent $ conflicts.While it is no use.
Shall I change the countdown source code for this problem?
Dear Hilion,
i have a problem with the integrated apis.
"stop", "start", or any other method won't work in my project.
I tried to reset the timer via DOM -Manipulations with plain HTML and jQuery but nothing worked fine for me.
When i reset the timer, it overlays with the resetted time, and i get two different values, when i'm logging the value for the timer.
Do you have any ideas?
This is how i initialized it:
var countwodnTimeFormatted = "2014/08/08 12:00:00"
$('#timer').countdown(countdownTimeFormatted, function (event) {
self.timer.html(event.strftime('%H h %M m %S s'))
})
Whether "stop", "pause" nor "start" or "resume" works.
Trying to act with the countdown in Chrome-console:
$('#timer').countdown("stop")
[
<div id=โ"timer" style=โ"display:โ block;โ">โ01 h 59 m 54 sโ</div>โ
]
$('#timer').countdown("stop")
[
<div id=โ"timer" style=โ"display:โ block;โ">โ01 h 59 m 54 sโ</div>โ
]
$('#timer').countdown("stop")
[
<div id=โ"timer" style=โ"display:โ block;โ">โ01 h 59 m 54 sโ</div>โ
]
But the countdown still doesn't count - down.
Hi mate,
Firstly thank you for the code. Not really an issue and no doubt very simple but im crap at js. Im using your example of advanced coupon for the destory function but would like to have double digits 03 weeks 05 days sort of thing.
Trying but keep getting syntax errors.
It would be handy to have the time/date be the same no matter the timezone.
Can you confirm or suggest a solution to allow the following?
As a countdown to a project start, I need to be sure that no matter where in the world the user is looking at the site they will all get the project login at the same time. (countdown ends)
Now, I cannot expressly test this so I may be asking something that is already in place, but before I implement this, I need to be sure.
Many Thanks in advance
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.