caike / jquery-simple-timer

A countdown timer plugin for jQuery

Simple.Timer

A jQuery plugin that creates a countdown timer.

Usage

Set the desired duration using either data-seconds-left or data-minutes-left data attributes.

<div class='timer' data-minutes-left=3></div>
<div class='timer' data-seconds-left=180></div>

Then start the timer with:

$('.timer').startTimer();

The plugin creates <div> elements with the following CSS classes by default:

• jst-hours
• jst-minutes
• jst-seconds
• jst-clearDiv
• jst-timeout (added only when the timer is finished)

Here's an example of the HTML of a finished timer:

<div class="timer jst-timeout" data-seconds-left="3">
  <div class="jst-hours">00:</div>
  <div class="jst-minutes">00:</div>
  <div class="jst-seconds">00</div>
  <div class="jst-clearDiv"></div>
</div>

The default CSS classes can be used to style the timer or we can specify custom classes via the classNames option. Like this:

$('.timer').startTimer({
  classNames: {
    hours: 'myClass-hours',
    minutes: 'myClass-minutes',
    seconds: 'myClass-seconds',
    clearDiv: 'myClass-clearDiv',
    timeout: 'myClass-timeout'
  }
});

Options

For more options, checkout http://csouza.me/jQuery-Simple-Timer/ and some more examples.

Install

This plugin can be installed manually from github or via npm.

Manual

Clone the repository and reference the jquery.simple.timer.js file from your html:

<script src="jquery.js"></script>
<script src="jquery.simple.timer.js"></script>

npm

To install from npm, run:

npm install jquery-simple-timer --save

jQuery is NOT installed automatically. We need to install jQuery (npm install jquery --save) and then pass it as an argument to the return value of the require() statement. Here's an example:

// file: client.js
"use strict";

let $ = require("jquery");
require("jquery-simple-timer")($); // passing jQuery as argument

$(function(){
  $('.timer').startTimer();
});

Tests

Open tests/index.html

Contributors

• Carlos Souza
• Rafael Oshiro
• ASCIIcat
• Vicky Leong
• Alex Sandro

jquery-simple-timer's Issues

Accept custom element classes via options.

Accept custom classes for span elements (hours, minutes, seconds and clearDiv) and for timeout via a classNames option. Like this:

  $('#timer').startTimer({
    classNames: {
      hours: 'banana-hours',
      minutes: 'banana-minutes',
      seconds: 'banana-seconds',
      clearDiv: 'banana-clearDiv',
      timeout: 'banana-timeout'
    }
  });

missed onComplete event when computer is asleep

Using Simple-Timer as an auto-logout for a private database I encountered an issue: e.g. the timer is set to 30', the computer goes to standby at 28' and is re-activated 4 minutes later, the timer is at 23h 58', having missed the onComplete event at 0'00''.
Inserting a new line 125
if (timeLeft < 0) timeLeft = 0;
did solve this for me.

how to limit the number of timer loop?

Hi,
I want to specify the number of the timer loop! I can set the loop interval but I don't know how to limit the loop number?!
any idea?
thanks
Mansour

how can i stop the timer

hi,excuse me , im working with your timer but i dont know how can i stop the timer ? please
thanks
sincerely

Any chance how to show days left?

Hi, thanks for your script - it is easy and working as expected. Only one thing I miss is posibble to show days left. I've tried to extend plugin but it is broken :) Would be fine to have this option.

Unable to re-set timer to different duration.

Hi, i tried using the timer with data-seconds-left =2 , after the 2 seconds run out, i run some ajax, after ajax returns, i want to run the timer with a 10 seconds duration.
Any idea on how to make this possible?
The timer seems to run back the 2 seconds timer even after i change the data-seconds-left to 10 seconds via $('#timer').attr('data-seconds-left',10);
Thanks.

Set time limit

Raise error if time is greater than 99:99:99

bug (or not) with pause and onComplete

When I use the function :
$(function(){
$('.timer').startTimer({
onComplete: function(){
console.log('Complete');
},
allowPause: true
});
If you do nothing, the console show 'Complete', but if you pause it (by clicking on timer), at the end time, there is nothing on the console to try :
https://rawgit.com/caike/jQuery-Simple-Timer/master/examples/index.html

Jquery Timer is not working in IE browser

Hi Carlos,

I am using this code . It is not working in any version of IE. Although it works fine in all other browsers like Mozilla,Chrome and Safari. Could you provide any solution.

Thanks,
Deepak

Custom classes break other timers

This happens when using multiple timers on the page with different class names on each.

deprecate bower publishing.

We'll stick with npm only.

Ie 11 not working

not working in ie 11. im getting this error

Object doesn't support property or method 'isInteger'

Bump version

Bump version so that bower sees new features.

onComplete event does not work when different tab is active

When using multiple tabs in Safari or Chrome, the onComplete event is not properly fired if a different tab is active when the timer finishes.

can't pause the timer

i can't do pause and resume functionality in this timer library

StopTimer and clearInterval

Hi!!
I have a timer and i want a function to stop timer.

var inter = $(`#my-record-${id} .timer`).startTimer();

But the library don't have any function to stop.

Thanks

counter would change if we change system clock

if I set timer for 30 minutes and I change system clock to 5 minutes earlier, timer would increase by 5 minutes

Add clearInterval function to element

From this

$('.timer').startTimer({
  onComplete: function(element){
    clearInterval(element.intervalId);
    element.addClass('timeout');
  }
});

to this

$('.timer').startTimer({
  onComplete: function(element){
    element.clearInterval();
    element.addClass('timeout');
  }
});

Add option to loop forever

Add option to repeat forever.

$('timer').startTimer({
  loop: true, // restarts timer after each time out
  loopInterval: 5, // waits 5 seconds before starting timer again
})

timer pause and play

how to pause the timer by clicking on some button without clicking on the timer ? I've tried all the suggestion you gave and from the previous issues solved. But it didn't help me out. Please response ASAP.

Add restart example to the docs.

Add example showing how to restart the timer from the onComplete function and with a new value for timeout. Mention the .attr() method will not work and we must use the .data() method instead. See #20

Publish to npm

According to the official plugin website, these should be published to npm.

http://plugins.jquery.com/
http://blog.npmjs.org/post/111475741445/publishing-your-jquery-plugin-to-npm-the-quick
http://blog.npmjs.org/post/112064849860/using-jquery-plugins-with-npm

on almost complete

Is it possible to add an "on almost complete" to the mix so the counter gets other styles when the time is almost up?

Count down to time?

A data-timeout="HH:ii" of the finish time would be appreciated.

Ho to debugg this?

I used your plugin severyl times but no it's not working anymore.

I load it like this:

<div class="sunLocDuration timer itIsDay" data-seconds-left="19999"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/caike/jQuery-Simple-Timer/1bc86823/jquery.simple.timer.js"></script>
<script>
  $( document ).ready(function() {
    $('.timer').startTimer();
  });
</script>

This does nothing. It doesnt even throw an error. It simply doesn't work. What's the catch here?

Set data-seconds-left value using jquery on page load

Thanks for this plugin its really helpful. Can you please tell me how can I set the value using jquery of this below tag. I cannot give time to data-seconds-left with my h4 tag. Its remaining time is coming from the server-side. So, I need to assign it on page load.

Wrong initial time when time left is greater than 24 hours

When either seconds and minutes left are greater than 24 hours, the timer resolves wrong initial time.

Reported in #22

Option to change div to other elements.

It would be interesting to have the possibility to configure the element type created for hour, minutes and second. Currently it is only possible to create a div, but I had the need to use span.

https://github.com/caike/jQuery-Simple-Timer/blob/master/jquery.simple.timer.js#L69

Automatically detect the simple-timer class

Requiring the lib automatically detects elements with class='simple-timer', like so:

<span class='simple-timer' data-minutes-left=30></span>

Add support for minutes left

Add support for data-minutes-left

Is there the possibility of counting the days?

Fix clearing the timer

Fix this https://github.com/caike/jQuery-Simple-Timer/blob/master/dojo.js#L5

Pass intervalId as the argument to the onComplete function.

bump version and publish

Todo:

• Bump version
• Publish to npm
• Update website with allowPause examples (gh-pages branch)

if data-minutes-left="0"

I use your Time as a Sun clock which counts down the seconds to sunset.

If the data-minutes-left="0"is set to 0 (which happens after sunset) there is nothing displayed anymore. Is it somehow possible to keep it in the 00:00:00 format?

"jQuery is not defined" when using the NPM installation method.

I followed the NPM installation method:

"use strict";
let $ = require("jquery");
require("jquery-simple-timer")($);

$(() => {
  $('.timer').startTimer();
});

and it says jQuery is not defined.

Not sure if this has something to do with the fact that Im transpiling ES6 code using babelify and browserify.

Note: The jQuery is not defined comes from the plugin file itself "jquery.simple.timer.js:189"

Thanks in advance!