hilios / jquery.countdown Goto Github PK

The Final Countdown plugin for jQuery

Home Page: http://hilios.github.io/jQuery.countdown/

License: MIT License

JavaScript 100.00%

jquery.countdown's Introduction

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

jquery.countdown's People

Contributors

Stargazers

Watchers

Forkers

kmikzjh nadiamode simonoff rbdone ynre111601 lahoreonline benjamindemoor dleavitt mylittlepolygon jaekunchoi deafwing bmtuan167 nlevchuk brenothales aaronbjork aizr gaoguoxin tengcong sonic95 xuhuan dev2geek ppowalowski thomaswdonnelly metrobee webcoding kenduemura jasonrr sdeering zgotsch roko131 fifthfloor whitneyredman wolt7321 zhouhongwei zzycami mnishihan facilus tharanp msigley lvlianyun miller18 arieslee tuncaysenturk assiotis grawl onasusweb bartaakos techpackets ezampi waspar hadesain robmayerr jonasthi vincehu cqol errogaht yaoazhen jorwan jojjeatmadington lina1125 cucygh rodrigoluizgenz sagun24 tmp2000 rakesh-mohanta actum gregarious-repo hjujah raymiranda phamngsinh dzeroone ricardocalvo dvdnhm wyrover weiping93 jeffdrumgod iyotake umair-khalil christianstain lokesh-cardinalts shyoon05 hubnik lgrtm ktat vzabaznov teehamaral gespenstt krishnan2987 bdthemes kavallo mlncdk clerkhsiao wp-kitten cvbuelow timothybannister ifch0o1 ssnukala kevinrodbe yfix skyyip

jquery.countdown's Issues

finished event is not correct,early 2 seconds

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);

TypeError: $(...).countdown is not a function

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>

Animation skips every ten seconds or so

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.

Monkeypatching $.remove breaks jQuery UI sortable

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)

require.js bug

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?

register package with bower

It'd be cool if this was installable with https://github.com/bower/bower also

want to show double digits

Hi,
i want to show the double digits like if 1 day left, i want it to show as "01" instead of "1"

Double digits on basic/advanced coupon

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.

Typo in readme Advanced usage

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();"

Can't work with Prototype together in Magento.

Can't work with Prototype together in Magento.
No time left show.

Countdown to Show Minutes Left

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?

Including bootstrap.js 3.2.0 breaks jquery.countdown

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.

It seems to have stopped ticking...? Any tips as to why it would have done this?

"Run this example" is offline

http://static.hilios.com.br/jquery-countdown/examples/basic.html

Add exotic countdown examples

Show off the plugin styling flexibility:

Flip numbers;
Timezone aware countdown;

when countdown finished, countdown again will not work

check this fiddle, you will see: when countdown finished, countdown again on the same element will not work.
http://jsfiddle.net/M6G5t/3/

Interfering with Bootstrap.js

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

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!

"Run this example" link broken

I get taken to a page that says "502 Bad Gateway"

Invalid Time Calculation

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>

Outputting offset hours, minutes, etc.?

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

Conflict with prototype.js

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?

Set UTC (GMT) for dates regardless of geographic location

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

Countdown not working when both jQuery and Prototype JS are loaded

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!

How to set time values without leading zeros?

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?

countdown state

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.

countdown with cookie save is possible?

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);
});

Is the countdown plugin comparing the client's timezone time with the finalDate?

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.

counter

Hi, is there a way to make the plugin do a normal count instead of a count down?

loop

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

How to translate the counter to Portuguese?

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

the left time is not the true time

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>

How explain the time change

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

Looped counter

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)

Is the time-format can be extended?

Is the time-format can be extended to "YYYY/MM/DD hh:mm:ss.sss" or "YYYY/MM/DD hh:mm:ss.s" ?

how to use the milliseconds as the finaldata

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!

How do I not show value 00?

if ($('span').text() == '00') {
    <span style="display: none;"></span>
} else {
    <span>%m</span> %!m:mês,meses;
}

Resetting Countdown

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.

Wrong calculation

Hello, I'm calling the script as following:

$(function() {
$('#countdown').countdown("2012/12/13", function(event) {
var $this = $(this);
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..)

'pause', 'resume', 'start', 'stop' not working

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>

I am using multiple instances and want to remove elements, only to finish in time

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.

http://jsfiddle.net/GqtCc/6/

german days plural/singular

// 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

Rails integration

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

The plugin only works if the finalDate is of the next day. It doesn't work with a finalDate with a difference of few hours.

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?

Timezone depending time

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?

Add Karma runner to automate tests in multiple browsers

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:

Add Karma to packages
Use bower to handle library packages
Configure grunt to use the karma runner
Search for support from Travis server

When countdown already stopped, but still trigger the stopped event when remove it,

Check it here:
http://jsfiddle.net/M6G5t/6/

Days Reports 00

For some reason it's reporting 00 days. It's doing the same thing on. http://hilios.github.io/jQuery.countdown/

How to Round Up Days/Hours/Minutes etc

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:

https://gist.github.com/fatmedia/d59bc45ad181df54f8e7

Change Language

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.

Opportunity for translation

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.