Nice plugin! I'm trying to wrap my head around it - I'm using it in a project but whenever I add multiple timers to a page, they WORK, however, only one works at a time - and its like the plugin can't keep track of more than one timer at a time

any way to make it work with multiple instances? It looks like its setup to in the plugin code its just not working and can't figure out why!

Thanks for your time and help! :+1:

Hi guys,

Firstly - great script, I'm using it within PhoneGap to create my first basic test app and it's proving very useful.

I am creating a simple timer on one screen where we have 3 simultaneous timers:

1. Elapsed - counts up to a set interval duration (e.g. 20s first, then 10s, then 30s)
2. TotalTime - counts up, will cover multiple intervals (e.g. 1 min in this simple case)
3. Remaining - is a countdown timer from the total of all intervals (e.g. 1 min in this simple case)

Lets ignore the complexities around refreshing the Elapsed timer for each interval and getting the total time for the countdown for the moment.

I start all timers simultaneously using $('#Go').click - assuming this is all I do the counters work well.

I have a pause button triggered by $('#Pause').click which then pauses all the timers at whatever reading they were on using the following code:

$('#Pause').click(function() { // Now need to pause the timers $('#Elapsed').timer('pause'); $('#TotalTime').timer('pause'); $('#Remaining').timer('pause');

• some other unrelated code }); // End Pause click

When I resume the timers however Elapsed seems to work as intended, but the other two timers jump out of sync - e.g. I have a demo running in the background just now which is meant to last 30s but TotalTime is 6:55 and Remaining is -7:25.

I tried flashing an alert when paused to confirm the state of the timers and they all do return "paused" as I would expect so I think I'm implementing it properly.

I noted that there was a closed case for a similar issue which you corrected with the latest version - I tried replacing the script with that one but the problem persisted (and actually created a new one whereby there is a slight delay starting the timers which knocks some other stuff out.)

Would you be able to advise whether this is a script issue or a user issue? Would be great to get this resolved as I can finally close off that piece of my app :)

Many thanks Wayne

Please publish the latest library version as WebJar. So it will be easily accessible from Gradle or Maven in Java projects (and in Scala, Kotlin, Groovy as well).

I think it's a good way to deploy the timer.jquery library.

Example: The Final Countdown (Github) is available at Maven Central.

Hi, great plugin :)

Is there anyway to display the time in h m s rather than just displaying total seconds elapsed when using $('#sampleid').data('seconds'); ?

There appears to be an issue when creating multiple timers, where the "options" from the last instantiated timer, override the values for the previous timers. The most obvious example of this can be seen in the callback or format. In the example below, I have two divs, with the id's of timerTest1 & timerTest2.

            $("#timerTest1").timer({
                duration: '3s',
                format: '%H:%M:%S',
                callback: function () {
                    $("#timerTest1").css("color", "red");
                    alert("This is the timerTest1 callback");
                }
            });
            $("#timerTest2").timer({
                duration: '5s',
                format: '%M:%S',
                callback: function () {
                    $("#timerTest2").css("color", "green");
                    alert("This is the timerTest2 callback");
                }
            });

From digging through the source, it appears that in the "TIMER PROTOTYPE" section, the options object always has the values of the last iteration.

Sample file: test.txt

Plugin does not recognize intentional and unintentional focus and blur events.

For example.

1. I pressed "Start" button.
2. I pressed "Stop" button.
3. Focus on timer input field and change value.
4. Switch focus away from timer input field.
5. Timer will unexpectedly start. It shouldn't since we stopped it in step 2.

Can someone help please - I would like to customise the display so the hh:mm:ss (or just mm:ss) are always displayed ie 00:00. I would also like to hide the sec or min text that is appended to the clock display Any help would be really appreciated

The error has been fixed by adding the jQuery selector '$' as you can see below.

/! timer.jquery 0.7.0 2017-04-15/ (function($) { ... rest of the code ... } (jQuery));

Hello! :smile:

Thanks for your great work. I need to change the timer to "%H:%M:%S" format when it reached 59:59. So far I was able to do it but not sure if this is how you'd prefer to be doing it... if yes, then it would be helpful to others if something like this is also added in the documentation examples. If no :smile: I'd be cool if you share your way of doing it. :smile:

var callDuration = $('#call-duration');

callDuration.timer({
    duration: '61s', //since 3599 is divisible by 59 or 61
    seconds: 3590, //simulation purposes
    format: '%M:%S',
    callback: function() {

        var total = callDuration.data('seconds');

        if(total === 3599) { //change to hour format (3600 - 1 to prevent display bug)
            this.format = '%H:%M:%S';
        }
    },
    repeat: true //repeatedly call the callback
});

您好，首先我很抱歉不太会讲英语，我在项目中使用你的timer.jquery，发现有个问题，在手机下不支持"Object.assign"，我把它换成"$.extend"就好了。 HI,First I'm sorry I don't speak English,I use your timer.jquery for my project, In the mobile browser not support "Object.assign", Me replace "$.extend" it's ok.

I am trying to use this plugin..But it throws me this error in the console:

"Uncaught SyntaxError: Unexpected token import" @ line 2 in Timer.js

I don't know whats wrong...

I don't have a very specific or different working tree...

Project/ ├── action │   ├── CommonAction.php │   ├── DAO │   │   ├── Connection.php │   │   ├── dbInfo.php │   │   └── UserDAO.php │   └── IndexAction.php ├── index.php ├── js │   ├── constants.js │   ├── index.js │   ├── Timer.js │   ├── util.js │   └── utils.js └── stylesheets └── style.css

Some help would be cool :D

Hi,

I have an issue where the timer shows negative time and callback is not called when the mobile screen is locked. When screen is unlocked how to make sure that the timer stops at 0 and doesn't display negative values. Below is my config.

    var totalSeconds = 20;
    $("#t").timer({
        action: 'start',
        duration: totalSeconds,
        countdown: true,
        callback: function () {
            location.reload();
        }
    });

Regards, Bhavana C

Dear Sir/Madam,

how to write the script two functions, such as start a timer & execute a function in 5 minutes & 30 seconds and also execute a function every 2 minutes ? is it true like below :

$('#div-id').timer({ duration: '5m30s', callback: function() { alert('Time up!'); } });

$('#div-id').timer({ duration: '2m', callback: function() { console.log('Why, Hello there'); }, repeat: true });

Thanks in advance Regards,

Arief

$that.timer({
    duration: "10s",
    format: "%ss",
    countdown: true,
    callback: function() {
        console.log('Time up!');
    }
});

I have created a tasks with timer, so if a person keep working for a task is greater than 24 hours then i have to show the 25th, 26th, ... and so on, I'm only keeping the hours for a task, I don't keep the days and hours, Can someone guide me how to achieve this, because right now if the time is 23:59;59 after 1 seconds i can see 00:00:01, it get reset again.

The documentation clearly state that there should be a hidden property:

$("#div-id").timer({
	seconds:	{Int},		// The number of seconds to start the timer from
	duration: 	{String},	// The time to countdown from. `seconds` and `duration` are mutually exclusive
	callback: 	{Function},	// If duration is set, this function is called after `duration` has elapsed
	repeat: 	{Bool},		// If duration is set, `callback` will be called repeatedly
	format:		{String},	// Format to show time in
	editable:	{Bool}		// If click and edit time is enabled
	hidden;		{Bool}		// If true, the timer is not displayed in the selected item.
});

But in the code, there's nothing about it:

function getDefaultConfig() {
	return {
		seconds: 0,					// Default seconds value to start timer from
		editable: false,			// Allow making changes to the time by clicking on it
		duration: null,				// Duration to run callback after
		callback: function() {		// Default callback to run after elapsed duration
			console.log('Time up!');
		},
		repeat: false,				// This will repeat callback every n times duration is elapsed
		countdown: false,			// If true, this will render the timer as a countdown (must have duration)
		format: null,				// This sets the format in which the time will be printed
		updateFrequency: 500		// How often should timer display update
	};
}

Also there's a few typos in the documentation, missing a comma and replacing ; by :, so it should be:

	editable:	{Bool},		// If click and edit time is enabled
	hidden:		{Bool}		// If true, the timer is not displayed in the selected item.