kbwood / countdown Goto Github PK

View Code? Open in Web Editor NEW

348.0 348.0 130.0 305 KB

jQuery Countdown Plugin

HTML 1.86% JavaScript 97.42% CSS 0.72%

countdown's People

Contributors

Stargazers

Watchers

Forkers

sykostudios mylittlepolygon zgrolink liluxdev schmuli ivppiter frntz hamedrnik benrxv sivajankan rogersvahn suseu davidcaro ethan0417 nickstees huamanlou pmdumuid bensmithett ajitsinghit2 pf-labs niklasfemerstrand facilus mauriciopasquier tobinibot praveenrengarajan lowrye onasusweb whatthefork uberdragon thusslack heymichaelp zytzagoo jamesroypoulter huangxuelun hahnsangkim jiabier maximepaquette xpicio shuai-zh sunwooz kasztelan joshstewart rui-santos junjies skyleft apolakipso jacky1122 sparkartgroup maladev jzavrl andrehol tomasstrejcek valeriu markhughes sowirepo d1g1t rafapaulino webmansa benknox phamthaithinh adis-me weijuer iampawansingh oblomova80 neslonso qwe840207103 jonathanmachado bemyguestdmitriy peterdavehellokitchen modulexcite lazabogdan reulison knitter flaviodelbianco truongtuyen ferleal ezc atouhou backoffbelief johnulist sagarrakshe fiamma06 adrienmoretti obojdi benbro tahmid09 lecajer shkodskihk rcv-legado zq1146787512 spiratom allvie sparkinzy a382695908 logiclabs mailoptin starticofund argellee weijihao avkosorotov

countdown's Issues

countdown only with seconds

Hello!

I have an administration panel where i insert into a database a specific seconds. For example: 60.
Now, i would like to implement this countdown and i'd like to see the same number if more client open the page.
An example: if in the countdown i see 50, the other client watch 50 or less..
Thanks for the reply!

How to shut down a countdown instance?

I'd like to properly shutdown the instance before removing the component from the dom.

Is this possible?

Right now, I'm using Backbone, and if I do not shut it down, I get an error because the timer keeps running.

Uncaught TypeError: Cannot read property 'significant' of undefined in jquery.countdown.js:573

Memory Leak

This plugin have a memory leak.
You can confirm it with chrome task manager for example.
Memory just keep increasing...

Date is a month behind?

$(function() {
launchTime = new Date([2013], [4], [25], [18]);
launchTime.setDate(launchTime.getDate());
$("#countdown").countdown({until: launchTime, format: "odHMS"});
});

This will display as 1 month, 20 days, 17 hours ... Should be 20 days, 17 hours?

serverSync not working

i am trying to use the serverSync option.
The server responds with the following:

{"date":"Aug 29, 2014 18:59:40 +0200"}

and the serverSync Option looks like this:

serverSync: function() {
    var time = null;
    $.ajax({
        url: 'http://domain.com/time.php',
        async: false, dataType: 'json',
        success: function(data) {
            time = new Date(data.date);
        },
        error: function(http, message, exc) {
            time = new Date();
        }
    });
    return time;
},

if i do some console.log() before the return statement, i get the time, provided by the server, but if i change my local system time, the countdown doesn't seem to use that Server Time

Problem onTick when update until

When I update update until.

$('#countdown').countdown('option','until', 300)

onTick is called multiple times.

iOS iframe scroll jumping

Specific problem:
On iOS devices, a page which contains a countdown timer, when inside an iframe, when scrolled more than halfway down, on each tic, will jump to the top.

Steps to reproduce:

Setup a simple html page.
Add an iframe with "http://keith-wood.name/countdown.html" as the src attribute.
Open in Safari on an iOS device or iOS simulator, or Chrome on an iOS device.
Display the iframe.
Scroll the iframe down about 75%.
On each tic, the iframe will jump to the top of the page.

Desired result:
The page should scroll normally, as does those without the countdown timer.

Simple example:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>iframe test</title>
    <style>
      .iframe-container {
        -webkit-overflow-scrolling: touch;
        overflow: scroll;
        position: fixed;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
      }
    </style>
  </head>
  <body>
    <div class="iframe-container">
      <iframe src="http://keith-wood.name/countdown.html" height="460" width="300"></iframe>
    </div>
  </body>
</html>

2 digits numers

Hi
is it possible to have always 2 digits numbers so that "4" becomes "04" ?
tx
Simone

Excessive cpu usage

Using this plugin I noticed that in some browsers it causes very high CPU usage. It's certainly not a problem with the plugin itself, rather the browsers, but I started wondering if the plugin needs to fire up events many times a second when a countdown is clearly performed once per second?

Additionally this behaviour was noticed even on the pages which don't have any counter, only js file included.

Bower package

I would be very happy with a bower package

ReferenceError: Can't find variable: performance

"userAgent" : "Mozilla/5.0 (iPad; CPU OS 7_0 like Mac OS X) AppleWebKit/537.46 (KHTML, like Gecko) Version/6.0 Mobile/11A4414e Safari/8536.25"

Looks like it is here:

https://github.com/kbwood/countdown/blob/master/jquery.countdown.js#L59

Probably should check that the variable exists before using it.

Seconds (or last) column dropping down in Chrome

Thanks for the great plugin! I have encountered an issue which I am unable to fix with CSS and wonder if you know anything that might cause the last column to drop down lower than the rest in Chrome only?

problems with new Jquery version and countdown

i find this problem also in demo pages.
The problem is that when i start the countdown timer, nothing happens, the onTick callback seems to work only once, but after that all the countdown is freeze.
Any ideea way? .

How to add a time

I cannot find an example of adding a time to the countdown date. an you do this?

Russian lang labels2 not work

/* http://keith-wood.name/countdown.html

Russian initialisation for the jQuery countdown extension
Written by Sergey K. (xslade{at}gmail.com) June 2010. */
(function($) {
$.countdown.regionalOptions['ru'] = {
labels: ['Лет', 'Месяцев', 'Недель', 'Дней', 'Часов', 'Минут', 'Секунд'],
labels1: ['Год', 'Месяц', 'Неделя', 'День', 'Час', 'Минута', 'Секунда'],
labels2: ['Года', 'Месяца', 'Недели', 'Дня', 'Часа', 'Минуты', 'Секунды'],
compactLabels: ['л', 'м', 'н', 'д'], compactLabels1: ['г', 'м', 'н', 'д'],
whichLabels: function(amount) {
var units = amount % 10;
var tens = Math.floor((amount % 100) / 10);
return (amount == 1 ? 1 : (units >= 2 && units <= 4 && tens != 1 ? 2 :
(units == 1 && tens != 1 ? 1 : 0)));
},
digits: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
timeSeparator: ':', isRTL: false
};
})(jQuery);
```
            $.countdown.setDefaults($.countdown.regionalOptions['ru']);
            $('.lottery-page #remaining').countdown({
                until: new Date(data.begin_date),
                format: 'dHMs',
                layout: '{dn} {dl} {hnn}{sep}{mnn}{sep}{snn}'
            });
```

Always view "2 Дней"

Add Changes File, Version Number in The Source

Contemplating an upgrade, I'm seeing an issue with timers attached to divs that become hidden (display:none): the expiration function does not fire. But, when an additional timer is attached to say document, both timers fire.

Not sure what version I'm using, the src claims it's for jQuery 1.5.8 but there's no version number; adding such info the the source would be helpful
If I did know the version there's nothing that allows me to easily see if upgrading will fix my problem; a Changes file would be helpful

Also, including the required jQuery version somewhere in the README would be nice. Yes I know that is in the source 😄.

pause / resume

$j('#coopCount').countdown({//#coopCount
                        until       : 120,
                        format      :'s',
                        compact     : true,
                        description :'',
                        onExpiry    :function ()
                        {

                        },
                        onTick: function(periods){

                        },
                        alwaysExpire:true
                    });

j('#coopCount').countdown('pause');
j('#coopCount').countdown('resume');
After these commands, the timer doesn't update itself anymore, visually or here:
j('#coopCount').countdown('getTimes');

if I use the 'resume' again, it refesh itself with the normal value (what it should be), so the timer works somewhere internally, but it doesn't update the values.

Tested on 1.5.11 and last version of the plugin, using jQuery v1.7.1

IE8 issue with "add a new ._super() method"

I just downloaded example countdownBasic.html and then tried to run it I got following error in IE8. Any idea?

SCRIPT5007: Function.prototype.apply: argument is null or undefined 
jquery.plugin.js, line 37 character 8
SCRIPT438: Object doesn't support property or method 'countdown' 
countdownBasic.html, line 17 character 2

Grease Monkey Support

Love the script, was about to use it in a Grease Monkey project but compile failed. Looks like the jQuery plugin code is not liking the sandbox of Grease Monkey.
Is the jquery plugin required?

bower install error

bower install https://github.com/kbwood/countdown.git -D
....
bower EMALFORMED Failed to read /Users/......../Temp/countdown/bower.json
Additional error details:
Unexpected token

Call back handler BEFORE timer expiration

Hi,

I want to change the color of count down one minute before the timer expires.
Is there any call back method which can help?!

Thanks!

Split second difference between different browser tabs

I just used this countdown on my auction project, and noticed that there is a split second difference between browser tabs ( and between different browsers)
This is also visible in the example page: http://keith-wood.name/countdownBasics.html

Is this a bug in the plugin, or is there something wrong with my system?

support for daylight saving time (DST)

currently the plugin doesn't take DST into account.

onExpiry

--- (English)
When OnExpiry is triggered it performs a function, such as playing a sound for example, only when it is in the same tab. why this happens?

--- (Português - Brasil)
Quando o onExpiry é acionado ele executa uma função, como tocar um som por exemplo, só quando está na mesma aba. porque isso acontece?

toggle pause/resume?

Is there a way to toggle state, instead of calling 'pause' or 'resume' alternatively? I want to avoid that logic if possible.

Also, I couldn't find a getter for the current state (paused or not). Is there any? Am I missing something?

I'd like to contribute this .countdown('toggle') but my javascriptfoo is really poor and there are no tests.. I'm afraid of breaking something :P

how to get start time from php mktime()?

For russian language error

now 2 days = 2 дня, but not "2 дней"

but must

6 days = 6 дней

changing options on initialized countdown increments the number of times callbacks occur

First off; this overall is a great plugin, so thank for you building it.

I've been working on a product that is heavily relying on using timers; and for the most part this plugin is has been a massive help; but with added complexities some of the under-the-hood problems are appearing. In a given countdown that is in progress, if I were to add or subtract time (or change any available option while the timer is in progress), that event is added to the $.countdown._timerTargets array. Now, this seems harmless, until you realize that the callbacks that you fire on events such as onExpiry or onTick, are called for every item in the $.countdown._timerTargets array. A simple example:

$(selector).countdown({until: 60, onExpiry: function(){console.log('calling expiry')}, onTick: function(tick){if (tick[6] === 5){console.log('called onTick every 10 seconds on the fives')}}});

setTimeout(function(){$(selector).countdown('option','until',30)}, 15000);

This example will print one console.log messages every 10 seconds on the fives for the first 15 seconds; and then after, it will start printing TWO console.log messages at the same interval.

Obviously, this contrived example doesn't really show the importance of caring how many times your callback functions are called, but it would be seriously hazardous if you are doing complex processes on the callbacks such as database updates.

The only clear way I could resolve this as a patch to prevent it from happening is to constantly clean the $.countdown._timerTargets array, to which I'm not sure if that would cause other consequences.

Let me know if this is a known issue or expected behavior and most importantly, if there's an accepted workaround.

Thanks,

Hassan

Countdown timer on iPad

Got an issue where the timer isnt running atall on the iPad 2, chrome & safari tested. Would be grateful if you could look into this?

Days counter gets prefixed with timestamp

Happening with version 1.6.1
Tested in most recent versions of Chrome stable + Firefox stable

We instantiate the countdown like this

$('#count_down').countdown({
  until: Date.parse("Mon, 18 Mar 2013 00:00:00 +0100"),
  format: 'dHMS',
  layout: '<p>{dnn}:{hnn}:{mnn}:{snn}</p>'
});

The output is this:

<div id="count_down" class="hasCountdown">
<p>15781958:09:00:00</p>
</div>

Does anyone have a clue, why this is happening? I just upgraded from 1.5.1 because the countdown would not run in most recent Chrome releases, so tracking it down from diffs is pretty hard :-)

Countdown 2, fails on IE 8

For IE 8:

The jquery.plugin.js which is used by js countdown, fails with:

SCRIPT5007: Function.prototype.apply: argument is null or undefined
jquery.plugin.js, line 37 character 8
The code is:
prototype[name] = typeof prop[name] == 'function' &&
typeof base[name] == 'function' ?
(function(name, fn){
return function() {
var __super = this._super;

                    // Add a new ._super() method that is the same method
                    // but on the super-class
                    this._super = function(args) {
                        return base[name].apply(this, args); //LINE 37
                    };

                    var ret = fn.apply(this, arguments);                

                    // The method only need to be bound temporarily, so we
                    // remove it when we're done executing
                    this._super = __super;

                    return ret;
                };
            })(name, prop[name]) :

Thanks!

Counting up

I know you have the "since" property for this, but I can't find a way to get the counter to expire in say 30 seconds, counting up.

I've tried since: 0, until: +30 for example, but this won't work...

Issues with file encodings not UTF-8

I am wondering if it is possible to make all your javascript encodings UTF-8? When using this wonderful plugin with a Rails app via https://github.com/mauriciopasquier/jquery-countdown-rails asset precompiling fails for non UTF-8 encoded files. It would be ideal if the files just all had common encoding instead of the randomness below.

$ file jquery.*

jquery.countdown-ar.js:    UTF-8 Unicode (with BOM) text
jquery.countdown-bg.js:    UTF-8 Unicode (with BOM) text
jquery.countdown-bn.js:    Little-endian UTF-16 Unicode text, with CRLF line terminators
jquery.countdown-bs.js:    ASCII text
jquery.countdown-ca.js:    UTF-8 Unicode (with BOM) text
jquery.countdown-cs.js:    UTF-8 Unicode text
jquery.countdown-cy.js:    UTF-8 Unicode (with BOM) text, with CR line terminators
jquery.countdown-da.js:    UTF-8 Unicode (with BOM) text
jquery.countdown-de.js:    UTF-8 Unicode (with BOM) text
jquery.countdown-el.js:    UTF-8 Unicode (with BOM) text
jquery.countdown-es.js:    UTF-8 Unicode (with BOM) text
jquery.countdown-et.js:    UTF-8 Unicode text
jquery.countdown-fa.js:    UTF-8 Unicode (with BOM) text
jquery.countdown-fi.js:    UTF-8 Unicode (with BOM) text
jquery.countdown-fr.js:    UTF-8 Unicode (with BOM) text
jquery.countdown-gl.js:    UTF-8 Unicode (with BOM) text
jquery.countdown-gu.js:    UTF-8 Unicode (with BOM) text
jquery.countdown-he.js:    UTF-8 Unicode (with BOM) text
jquery.countdown-hr.js:    ASCII text
jquery.countdown-hu.js:    UTF-8 Unicode (with BOM) text
jquery.countdown-hy.js:    UTF-8 Unicode (with BOM) text
jquery.countdown-id.js:    ASCII text
jquery.countdown-it.js:    ASCII text
jquery.countdown-ja.js:    UTF-8 Unicode (with BOM) text
jquery.countdown.js:       ASCII text
jquery.countdown-kn.js:    UTF-8 Unicode (with BOM) text
jquery.countdown-ko.js:    UTF-8 Unicode (with BOM) text
jquery.countdown-lt.js:    UTF-8 Unicode (with BOM) text
jquery.countdown-lv.js:    UTF-8 Unicode text
jquery.countdown-ml.js:    UTF-8 Unicode (with BOM) text
jquery.countdown-ms.js:    ASCII text
jquery.countdown-my.js:    UTF-8 Unicode (with BOM) text
jquery.countdown-nb.js:    UTF-8 Unicode (with BOM) text
jquery.countdown-nl.js:    ASCII text
jquery.countdown-pl.js:    UTF-8 Unicode (with BOM) text
jquery.countdown-pt-BR.js: ISO-8859 text
jquery.countdown-ro.js:    UTF-8 Unicode (with BOM) text
jquery.countdown-ru.js:    UTF-8 Unicode (with BOM) text
jquery.countdown-sk.js:    UTF-8 Unicode (with BOM) text
jquery.countdown-sl.js:    UTF-8 Unicode (with BOM) text
jquery.countdown-sq.js:    UTF-8 Unicode (with BOM) text
jquery.countdown-sr.js:    UTF-8 Unicode (with BOM) text
jquery.countdown-sr-SR.js: UTF-8 Unicode (with BOM) text
jquery.countdown-sv.js:    UTF-8 Unicode (with BOM) text
jquery.countdown-th.js:    UTF-8 Unicode (with BOM) text
jquery.countdown-tr.js:    UTF-8 Unicode (with BOM) text
jquery.countdown-uk.js:    UTF-8 Unicode (with BOM) text
jquery.countdown-ur.js:    UTF-8 Unicode (with BOM) text
jquery.countdown-uz.js:    UTF-8 Unicode (with BOM) text
jquery.countdown-vi.js:    UTF-8 Unicode text
jquery.countdown-zh-CN.js: UTF-8 Unicode (with BOM) text
jquery.countdown-zh-TW.js: UTF-8 Unicode (with BOM) text
jquery.plugin.js:          ASCII text

Value always NaN

Hi there,
I have a asp:Repeater in my page. I need a countdown timer for each items in repeater. But unfortunately I coun't get the script work.

So here is a part of my repeater items in the page:

<div id="extended" class="extended">
      <div class="countdown">
      </div>
      <asp:HiddenField runat="server" Value="March 16, 2013 16:30:00" />
</div>

and the script:

$('.countdown').countdown({
        until: $(this).next().val(),
        layout: '{dnn}:{hnn}:{mnn}:{snn}'
 });

The value of the hidden field always becomes NaN when using $(this).next().val()
I also tried with javascript instead of jquery but neither of them works.

I'd be grateful if you help with this issue. Thanks.

Get layout points from onTick event

I am developing timer with animations. But dom elements always re-created and makes it difficult to make animations. So I build my own dom structure and change it partially from onTick event.

For getting layout points from onTick I set layout as json string:
layout: '{"h10":"{h10}","h1":"{h1}","hl":"{hl}"}'

It's a little strange. Maybe exists a right way for doing this?

countDown plugin is not working with arshaw's full calendar plugin.

Hi sir,

I am not much knowledgeable Pearson in UI designing. I have implemented arshwa's calendar plugin with my webapp, and it was working fine. Now i wanted to implement countdown within the same webapp, but console gives an error saying .countdown is not a function. If i use both separately then their is no problem.

Please let me an answer as soon as possible.

Demo text overlapping

In the demo, the words "minutes" and "seconds" are overlapping. Also the text "show code" does not fit inside the button.

"expiryText" settings doesn't work

Javascript

$('.countdown').each(function(){
    var $this = $(this),
        time = Number($this.data('time')) * 1000,
        date = new Date(time);

    $this.countdown( {until:date, format:'hmS', expiryText:'CLOSED' } );
});

HTML

<div class='countdown' data-time='1410693189'></div>

It just stays on 0 seconds and I see no text

Internet Explorer 10 - Not calling onTick

I'm using Windows 8 with Internet Explorer 10 and find that onTick never gets called. The time is correct when your demo pages load but then never changes.

http://keith-wood.name/countdown.html

Is it an easy fix?

Thanks

Jquery 2.0.3 error

Uncaught TypeError: Cannot call method 'createPlugin' of undefined jquery.countdown.min.js:6
Uncaught TypeError: Object [object Object] has no method 'countdown' lottery-page.js:45

Please update plugin!

Significant and showing seconds when time left is < 2 minutes

Is there an easy way to make the counter show the time left in seconds if there is only 2 minutes left?

I actually want my timer to initially only show days, then when less than 3 days left I want it to show the hours left, then when less than 3 hours left show it in minutes and then as mentioned above when only 2 minutes left show it in seconds..

onExpiry not running if tab is inactive on Chrome

This has got to do with requestAnimationFrame.

To fix this, all I had to do was comment line 69, and use setTimeout instead, like so:

//requestAnimationFrame(timerCallBack);
setTimeout(timerCallBack, 1000/25);

I'm not sure if this affects anything else at all, but it has done the trick for me...

Couldn't cast `[object Object]` to a date object

I’ve used this plugin a lot over the past couple of years. Recently, I went to add it to a new project but keep getting this error:

Uncaught Error: Couldn't cast [object Object] to a date object. jquery.countdown.js:50

I’m not sure what the plugin‘s trying to cast to a date object, or why. Here is what I’m trying:

$('.js-countdown').countdown({
    until: new Date(2015, 7, 11)
});

So I thought the plugin may be automatically wrapping until values in a Date object, so dropped that declaration and just tried passing a string for until instead:

$('.js-countdown').countdown({
    until: '2015-08-11'
});

Nope, same issue.

What’s going on? Has something changed, but hasn’t been reflected in the documentation?

Optional periods not working from template

If I use a layout template in my HTML, such as a hidden div tag or a script tag of type text/template, the optional period symbols are not parsed.

I pass this option to countdown:

layout: $('#featured_offer_countdown_template').html()

See jsfiddle for example:
http://jsfiddle.net/zinkkrysty/YaN3V/

Output is:

{d<}
8 Days
{d>}
12 Hours
10 Minutes

You can comment out line 22 in js to see it working if I put the template as a string instead.

Google Chrome 24.0.1312.5 beta-m not counting down

Just a heads up,
It seems that on my website, countdown works when visiting with most browsers, however with the latest Google Chrome 24.0.1312.5 beta-m it's not working.

explain the use of 2 js files

why do you need both query.plugin.js and jquery.countdown.js ? I don't get it. there is nowhere on the documentation which address thing and it blows my mind there is no explanation to the peculiarity of using two files instead of one.

Also, query.plugin.js is a really bad name choice for the file, since it doesn't describe what this file is, and it's too generic and might, in some setups, to overwrite another file with the same name.

Unexpected behaviour when the counter is paused. It's keeps running on the background.

Something is wrong when I pause the counter, and I get the time using getTimes(). it doesn't return me the displayed time (paused) it gives me another number as if the counter is running in the background. It's never really stopped.

Play with this Fiddle for a while and you will see the problem:
http://jsfiddle.net/J2XHm/4/

Thanks, I hope we can fix this soon! 😃

Original question:
http://stackoverflow.com/questions/15924872/jquery-countdown-running-when-its-paused

Create version that doesn't depend on jQuery

I suggest creating a version of this plugin that doesn't depend on jQuery. There are few jQuery functions that could be easily replaced with pure js. jQuery plugin then can be implemented as a wrapper.

Minified JS Version Fails in IE8

If you try to use the minified version of Countdown 2.0.0 in IE8, you will get a series of Javascript errors, as seen in this screenshot:

The full version of the script works just fine. It's only the minified version that causes this error.

Steps to reproduce:

Edit countdownBasic.html in the jQuery Countdown package.
Change jquery.plugin.js and jquery.countdown.js to jquery.plugin.min.js and jquery.countdown.min.js.
Check in IE8.

Number formating

Hi, thanks for the good work and the incredible choice of localization!
Did you ever considered to add a number formatting option?
Example: 1,000 Hours left (US), 2 342 Hours left (FR), etc...