pfarmer / jquery-countdown Goto Github PK
View Code? Open in Web Editor NEWA javascript countdown timer - PLEASE SEE FAQ IN WIKI BEFORE OPENING AN ISSUE!
Home Page: http://pfarmer.github.com/jquery-countdown/
A javascript countdown timer - PLEASE SEE FAQ IN WIKI BEFORE OPENING AN ISSUE!
Home Page: http://pfarmer.github.com/jquery-countdown/
Default, script is working, if i change anything it showing blank on my html page..
what would be the problem ???
Add functionality to allow "Next Sunday" or "Next Friday" or "Next Whatever" for countdown date/time.
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; InfoPath.3)
Timestamp: Sun, 2 Oct 2011 09:27:56 UTC
Message: 'digits[...]' is null or not an object
Line: 165
Char: 9
Code: 0
I've just implemented this plugin and it works great on all browsers.
The only problem im having is when I try to view my countdown on an iPhone or an iPad.
It must be something to do with iOS and safari.
Our website is here: http://goo.gl/sbYx3
Any ideas would be great
Thanks
Jason
Hello,
I don't know if I missunderstand the Date Object?
If I set the date like this:
var _date = new Date();
_date.setMonth(10);
_date.setDate(28);
_date.setHours(18);
_date.setMinutes(00);
_date.setSeconds(00);
$('#counter11').countdown({
startTime: _date,
stepTime: 1,
digitImages: 6,
digitWidth: 53,
digitHeight: 77,
image: "img/digits.png"
});
It's in a week (today it's 2011-10-21 11:44). So I would expect the timer to start at 06:06:16:00 right? Right now it says 38:07:14:00. I don't get it?
I Need a tutorial to add date, i installed the plugin and all...
i'm using in html site, but i don't know how to change the date...
please explain the code for this 12/8/2012 this date ????
startTime can be passed with minutes > 60 and seconds > 60.
Pls change $.extend to jQuery.extend to be able to use jQuery in addition to other libs like prototype
It looks like theres a problem with IE with the positioning of the last digit (seconds).
http://screencast.com/t/bfc9UL6UUy7
It works fine in Chrome and Firefox (although I've noticed it in Mobile Chrome, but that's not a big deal). IE8 and IE9 are what I've tested against. If I do the developer tools it looks like the digit is full on disappearing at some point during the sequence.
Any ideas on fixes?
This may be more down to my lack of jquery knowledge.
I'm trying to do a countdown to new year that displays "Happy New Year" after midnight. It works if you have the coundown on your screen at the time, but the problem I'm getting is that if you load the page after the countdown has finished, it starts counting down again. I want it just to display the "Happy New Year" message on page loads after the coundown has finished.
The code I've used is blow.
$(function(){
var _date = new Date();
_date.setYear(2012);
_date.setMonth(0);
_date.setDate(0);
_date.setHours(0);
_date.setMinutes(0);
_date.setSeconds(0);
$('#counter').countdown({
startTime: _date,
digitWidth: 53,
digitHeight: 77,
image: 'img/digits_inverted.png',
timerEnd: function(){ $("#counter").html("<div style='font-size: 4em;'>Happy New Year!</div>"); },
});
Hello!
This is a very nice script! Thank you for sharing!!
I'm hoping you can help me auto renew my startTime after countdown completion. I'd like to add 7 days to the startTime.
eg. countdown would expire on Sunday at 9:15am and renew to the following Sunday at 9:15am.
Here is my code:
$(document).ready(function(){
var _date = new Date();
_date.setMonth(0);
_date.setDate(13);
_date.setHours(09);
_date.setMinutes(15);
_date.setSeconds(0);
$('#counter').countdown({
image: '/development/_lib/images/digits.png',
startTime: _date
});
});
Thank you in advance for the help :)
Dev site: http://www.maynardnambiar.com/development/countdown.html
Hi, great work, could you include methods to start/stop/reset countdown like this example http://www.littlewebthings.com/projects/countdown/example.php?e=start_stop ?
Best regards...
When the coundown updates it only does the animated flip on one figure at a time rather than all of the ones that are changing...
For example.. If the there are 20 seconds on the countdown when it changes to 19 only the 1 will animate. The 0 to 9 will just be an image swap. On a change from 20:00 to 19:59 then only the change from 2 to 1 will be animated.
Time formating is not working if startTime is taken from date object.
This will not format to "dd:hh:mm",
it will stay "dd:hh:mm:ss"
var _date = new Date();
_date.setMonth(10);
_date.setDate(20);
_date.setHours(0);
_date.setMinutes(0);
_date.setSeconds(0);
$('#counter').countdown({
format: "dd:hh:mm",
startTime: _date,
image: 'img/digits.png'
});
Open index.html with IE 9. Press ctrl+scroll down with mouse. You should be able to zoom out. watch the digits disappear.
wont happen if you run the code under compatibility mode (IE 9) or in firefox. test.html doesn't have the docttype and you wont cant see the same problem with it.
if ((typeof o == "object") && (o.constructor == Date)) {
then.....
};
Allow startTime to be either a Date object or a string of ddd:hh:mm:ss.
load index.html , try to zoom in and out in IE 9 (press ctrl and scroll up or down) or the latest chrome. the digits disappear. you can not replicate this problem with firefox or when running IE 9 in compatible mode. also the test.html doesn't have this problem because it doesnt have
Hi, thanks por new updates... this plugin is great... well... I've been trying to do a stop method based on pause method... the idea is stop the countdown, clear the interval and start from 0 because I need reinitiate the countdown with new startTime value... it is like if exits a method reset that accept a new startTime value and from this moment the countdown start from this value.
from line 236 to 246 on jquery.countdown.js file... this is my code:
var stop = function() {
if (interval == undefined)
interval = setInterval(moveStep(0), 1000);
}
this.data("countdown", {
"start": start,
"pause": pause,
"stop": stop
});
...but, to really stop the countdown I must call pause() before stop()... it can't be done by other way?.
I would like to know what is wrong on my code.
Thanks
Best regards
Then the digit is at 9 position he jumps at one pixel to the top.
Hello,
I'm getting a weird error, if I enter the date like this,
var _date = new Date();
_date.setMonth(9);
_date.setDate(20);
_date.setHours(02);
_date.setMinutes(00);
_date.setSeconds(00);
$('#counter').countdown({
startTime: _date,
image: "img/digits.png"
});
The output should be 69:21:15:45.... But I'm getting the output as 69:09:15:45.. It seems the Hours value is either not in a 24-hr format or is being wrongly calculated...
Could some1 help me on this??
How do you successfully implement zero pad? I have a 3-digit-long day countdown (ddd:hh:mm:ss) but when i experiment and use a shorter destination (dd:hh:mm:ss) I want to see a 0 in the first place, indicating less than 100 days till event - for styling/spacing purposes.
Does anyone know how to achieve this? I tried looking everywhere for this, and I even see one example in test.html that seems to be implementing this successfully (though perhaps with different fields), but no indication of how it's being done. Thanks.
I'm on a tight deadline involving this excellent counter script. After spending a lot of time creating my own sprite digits image (6 images for each digit) I've noticed that the transition from 9 to 0 is being skipped. Specifically, the last 5 digits in my sprite (at the bottom) are not being used. This also happens with the original source as I grabbed it.
Any ideas?
It isn't clear to me that http://digidayoff.com/ (the first example) uses this timer anywhere?
Sorry if I'm totally wrong but I compared min and not min and they seem to be totally different versions... Like there is no pause and start in min version.
Hi,
How can i show just days, or Days and Hours instead of all Days:Hours:minutes:seconds ?
Thanks
Hi,
I read the code and didn't see anything about a callback method to make any action when timer is over.
I think it should be great to had it :) (I will write something in my side cause I need it ;))
Regards
I am trying to use you code:
jQuery(document).ready(function($) { $('#counter').countdown({ image: 'wp-content/themes/sometheme/img/digits.png', startTime: '185:6:22:59' });
This code is in a separate file from jquery.countdown.js
They both load in the page but when page is refreshed, counter restarts...
What am I doing wrong??
What do I need to do so countdown starts once and does not restart every page refresh?
I also tried defining startTime in:
var options = { stepTime: 60, format: "dd:hh:mm:ss", startTime: "185:6:22:59", digitImages: 6, digitWidth: 53, digitHeight: 77, autoStart: true, timerEnd: function() { }, image: "digits.png" };
Thanx
I'm trying to force the countdown to be destroyed in the beginning of the ajax load in the document.ready and start a new one, but no success. Can you help me?
Is there a way to use a regular font in place of an digit image?
Hi,
First I'd like to say GREAT PLUGIN, THANKS.
There is a thing that I discovered just today: it's March 31. 2012.
The end date of the project I'm using the countdown for should be in 22 days.
But today, and only today the script displays that the end of the project will be in 52 days!
When I set my computer time to tomorrow date everything works fine.
When I set my computer to yesterday date, again, everything works fine.
But only today I have a problem.
I believe that this is because this year is the leap year, and we have a one more day in the year.
Regards,
Obradinho
If format and startTime are different the numbers can get confused and show 99 seconds or 29 hours for example.
If no format is passed, try and intelligently guess the correct format from startTime like this:
ss
h:s
hh:ss
m:h:s
mm:hh:ss
d:mm:hh:ss
dd:mm:hh:ss
ddd:mm:hh:ss
If format is passed but doesn't match the format of startTime try to intelligently fixup format.
In the demo's I see that there are no transitions for the digits, whereas the digits.png do provide the transitions
Hello,
I've tried the jquery-countdown and its working well, very nice script.
But I found something, that maybe you can help me to solve.
When we use an end Date, the script is counting in the begining of the current month until the date that you choose.
Example:
function do_counter() {
var _date = new Date();
_date.setMonth(1);
_date.setDate(22);
_date.setHours(13);
_date.setMinutes(54);
_date.setSeconds(0);
..........
};
The count should be 117 days and its appearing 147 days, because its counting: September, October, November, December, January 22th.
The correct way would be: September (only 27, 28 and 29th), October (Full Month), November (Full Month), December (Full Month), January until 22th.
Can you help me?
thanks!!
Is there a possibility to use this plugin without images? I'd just like to use regular text.
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.