lexxus / jq-timeto

jQuery plugin - timer countdown digital clock

#TimeTo

Note: This package is deprecated and developing is stoped. Use fancy-timer instead.

npm i fancy-timer

jQuery plugin - timer countdown digital clock

Demo

http://lexxus.github.io/jq-timeTo/

Install

npm install time-to

Examples

Countdown timer

Set delay in seconds

$('#countdown').timeTo(100, function(){ alert('Countdown finished'); });

Hide hours

$('#countdown').timeTo({ seconds: 100, displayHours: false });

Set delay to specified datetime

$('#countdown').timeTo(new Date('Dec 10 2013 00:00:00 GMT+0200 (EET)'));

Set captions and dark theme

$('#countdown').timeTo({
    timeTo: new Date(new Date('Dec 10 2013 00:00:00 GMT+0200 (EET)')),
    theme: "black",
    displayCaptions: true
});

Digital clock

$('#clock-1').timeTo();

Usage

$(<selection>).timeTo([options]);

Whithout options it makes simple digital clock with current system time.

where options can be...

Object

Object with initial settings:

• callback: function that call when countdown end, default null;
• captionSize: integer font-size by pixels for captions, if 0 then calculate automaticaly, default 0;
• step: function that is called every {stepCount} ticks, default null
• stepCount: integer execute {step} every {stepCount} ticks, default 1
• countdown: boolean if false then it's as clock, default true;
• countdownAlertLimit: integer seconds left to countdown end after that clock apply CSS class timeTo-alert, default 10;
• displayDays: integer count of digits days to display, default auto (for backward compatibility true means 3);
• displayCaption: boolean if true then captions display, default false;
• displayHours: boolean if false then hide hours, default true;
• fontFamily: string font-family for digits, default 'Verdana, sans-serif';
• fontSize: integer font-size by pixels for digits, default 0 - use CSS instead;
• lang: string language for caption, available 'en', 'ru', 'ua', 'de', 'fr', 'sp', 'it', 'nl', 'no', 'pt', 'pl', default 'en';
• languages: object extra languages or overrides, first level key is lang, second level keys: 'days', 'hours', 'min', 'sec', default {};
• seconds: integer initial time in seconds for countdown timer, default 0;
• start: boolean if true - start timer automaticaly, else need execute .timeTo("start"), default true;
• theme: string nameof color theme, available "white" and "black", default 'white';
• time: string time in format 'H:mm:ss' to set the clock, countdown option automaticaly has to be set to false;
• timeTo: date object specify date and time for current time or for countdown to, default null.

Integer

Initial setting for seconds option

$('#clock').timeTo(100)
// is identical to
$('#clock').timeTo({
    seconds: 100
});

Date object

Initial setting for timeTo option

$('#clock').timeTo(new Date('Dec 10 2013 00:00:00'));
// is identical to
$('#clock').timeTo({
    timeTo: new Date('Dec 10 2013 00:00:00')
});

String

Action for execute. Available: 'start', 'stop', 'reset'.

jq-timeto's Issues

countdownAlert callback

Hi.

Can you implement additional parameter - countdownAlertCallBack?

Thanks in advance.

Timeout display is too fast in jqm popup

I try to display a timeout in a jqm popup like this:

var popup = $('<div data-role="popup" id="timeOutMessageBox" data-overlay-theme="a" data-theme="c" style="max-width:400px;" class="ui-corner-all"></div>').appendTo( page );
var header = $('<div data-role="header" id="header_timeOutMessageBox" data-theme="a" class="ui-corner-top ui-header ui-bar-a" role="banner"><h1 class="ui-title" role="heading" aria-level="1">Timeout Warning</h1></div>').appendTo( popup );
var content = $('<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content"> \
                                <h3 class="ui-title">'+msgText+'</h3> \
                                <div id="countdown"></div> \
                                <a id="timeOutMessageBoxResetButton" href="" data-role="button" data-inline="true" data-theme="c">OK</a> \
                            </div> ').appendTo( popup );
popup.popup();
$("#timeOutMessageBoxResetButton").button();
popup.popup("open");
popup.popup("option", "positionTo", "window" );     
console.log("timout: "+timeout);
$('#countdown').timeTo({ seconds: timeout });

When i set timeout to e.g. 60 it displays very fast 60 milliseconds and than switch to 29:59:59 (minutes:seconds:msec). It is the same problem in Firefox and Chrome. In Chrome there is also the problem that the seconds are about 2-3 times faster than real seconds. The examples from your website looks fine but doing that in this jqm popup breaks the timers i guess :/

Any ideas for a fast fix?

Баг! Таймер может выдать 60 минут.

Приветствую! Не понятно с чем связано и какими действиями можно вызвать этот баг. Иногда может выдать 60 минут. Просьба пофиксить как будет время. Заранее спасибо!

$('#countdown').timeTo({ 'theme': 'black', 'seconds': 30, 'displayHours': false, 'displayMinutes': false, 'callback': function() { // my code } });

Countdown while alert() dialog is shown - callback does not work

Hello.
When the 10 seconds before the end of the timer trigger an alert () and wait until the time runs out, and then click OK - timer takes the values 23:59:59 and callback does not work.

Please, fix this. Thanks in advance.

With best regards,
Alexey

user set time

im having trouble setting the timer to where it waits for the user to input a time, sets time to input, and then start. can someone help?

enhancement request: pause

I would like to pause the timer.

I am timing a real world process. If the person needs to take a break, I would like to be able to pause and resume.

Thanks.

Callback

Hi,

If I refresh page after countdown finish, the countdown restart with 99:23:59:59.
how can we stop that to 00:00:00:00?
thanks

Count down faster when selector contains multiple elements

Just try:

<div class="clock"></div>
<div class="clock"></div>
....
<script>
    $('.clock').timeTo();
</script>

Interestingly, you will find that the clock counts down twice a second.

bug in 25 hours!

Hey tnx for this package
i use it for my clients and
one of them told me when we set 25 hours ( 1 day and 1 hour)
1 days is removed
please test it and if you can fix this i'm not jquery programmer that i fix my self
best regards

countdown not work

    var countdown = $('#countdown');
    countdown.timeTo({
        seconds: 0,// send 0
        lang: 'ru',
        countdown: false, // not work
        countdownAlertLimit: 30,
        displayDays: 2,
        displayCaptions: true,
        captionSize: 12,
        fontSize: 17
    });

result: time
expected: 00 00:00:00

Multiple timeTo in single page jumping/overlapping seconds

When used in multiple timeTo in single page the seconds are not like 9, 8, 7, it jumps to 9,7,5 and so on..

$('#countdown1').timeTo({
timeTo: new Date(new Date('Mon Aug 31 2015 09:00:00 GMT+0800 (PHT)')),
displayDays: 2,
displayCaptions: true,
fontSize: 65,
captionSize: 10
});

$('#countdown2').timeTo({
    timeTo: new Date(new Date('Mon Aug 31 2015 09:00:00 GMT+0800 (PHT)')),
    displayDays: 2,
    displayCaptions: true,
    fontSize: 65,
    captionSize: 10
}); 

Incorrect timer operation

If you minimize the page with a timer and after a while open the timer tries to catch up with time

enhancement request: count up from zero

I would like to have a mode where you start at zero and count up. To use it more like a timer.

I have a count-down timer and then I want to count up to measure the time it takes the human to acknowledge the timer.

Thanks.

countdown true seconds 0 makes clock

    $('#countDownDiv').timeTo({
        seconds: 0,
        displayCaptions: true,
        fontSize: 30,
        countdown: true,
        captionSize: 14,
        countdownAlertLimit: 0,
        start: false,
        callback: timeIsUp
    });

makes clock instead of countdown with zeros. countdown: true, does not seem to have any affect here.

Broken in IE7

Tanks for your work!
The demo page looks broken in IE7
http://lexxus.github.io/jq-timeTo/

problem with time not correct

Hello

i make some change on javascript to get multi var but not show the right time and it set all the same time

demo : https://jsfiddle.net/qh8vteaa/1/

please help me

How to fetch curecnt minutes,seconds value while click button

I need current minutes,seconds value while click submit button

Change the word "hours" for the Spanish translation.

Regards,

In the translation for the Spanish language, the variable "hours", the correct translation is "hours" and not "clock":

Change the file jquery.timeTo.min.js
Solution:

• Search for the string "sp"
• Replace the value of the variable sp with the following line:
  sp: {days: "d \ u00edas" hours "hours," min "minutes" sec "seconds"}

find current time

Can you please add the ability to get thee current time. Change setting the time with data attribute as well. I need to this to extend time if required.

Suggestion: Hide hours or days automatically

i.e if seconds < 3600,
then hide the hour fields.

and if hours < 24,
hide day fields.

This adjustment may not be needed in date based countdown, but in countdowns based on relative durations (by providing seconds), this feature would be very useful.

End Callback Error

The countdown continues the count and do not execute the end callback.

Safari Versión 11.1.1 (13605.2.8)

Steps to reproduce:

Use end callback to redirect to another page
Change to another browser/tab until the countdown ends

CSS in

Hi,

I try the same code , but not working in IE 10, wron display for digit

Can you add a timeFrom or timeSpan parameter?

In case the user has a wrong time on his device the countdown with timeto is showing an incorrect time.

I would like to output the current time and the end time by the server and use your plugin to process both, displaying the countdown.

Maybe the current version is capable of doing this?

Reset time

Hi, tell me how to reset the timer after time is over?