walmik / timer.jquery Goto Github PK

Is there a quick way of using this plugin to display a clock showing the current time?

Thanks

I need a help , when applying reset the timer displays error , showing a strange time .

I couldn't figure it out from the documentation or source.

Running npm run karma or simply karma start, the following error is thrown:

27 09 2017 09:42:41.009:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
27 09 2017 09:42:41.011:INFO [launcher]: Launching browser Firefox with unlimited concurrency
27 09 2017 09:42:41.018:INFO [launcher]: Starting browser Firefox
27 09 2017 09:42:43.229:INFO [Firefox 52.0.0 (Mac OS X 10.10.0)]: Connected on socket Cxr9nVgX9rdK8OxXAAAA with id 83739655
Firefox 52.0.0 (Mac OS X 10.10.0) Basic functions allows starting a timer in a given dom element FAILED
	TypeError: this.each is not a function thrown
Firefox 52.0.0 (Mac OS X 10.10.0): Executed 6 of 6 (1 FAILED) (0.01 secs / 0.035 secs)

Currently time beyond 24 hours is display as 25:10:30. It should be displayed as
1 days 1:10:30 or simply 1:01:10:30

Add please Bower.

hi how to make the countdown timer ? )

• Add a div on the right that holds the links
• Add autotrack https://github.com/googleanalytics/autotrack
• Update GA to use autotrack

I'm loving this plug-in and it would completely satisfy my needs if it supported counting down from a preset time. Is this currently possible? If not, it would make a great enhancement.

Currently the timer goes to the 25th hour after 24 hours. It should ideally move to the next day.

Recently we disabled tests in order to provide a major update while still retaining backward compatibility. This required us to temporarily mute the tests. Need to re-enable them again and fix as required.

If we set a countdown timer of 20 sec & paused it at 15 sec, it stops but on resuming it again after 5 sec, it starts from 10 sec instead of 15 sec.

Hello! 😄

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 😄 I'd be cool if you share your way of doing it. 😄

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

Add a digital mode for displaying time, like this

1. 00:34
2. 00:09:23
3. 01:01:50:30

Hello,

In current behaviour, once the timer was started + paused, when leaving the input field, it resumes the timer.

Steps to reproduce on jquerytimer.com :

• click "start timer"
• wait couple of seconds
• click "pause"
• Put cursor in input
• Leave the input field

Result: timer resumes

Is there a way to not have this behaviour ? Ie: leaving the input doesn't resume the timer ?

Thanks!

Edit: even with the following code it doesn't resume the timer on blur.

$timer.on('blur', function() {
    if(hasTimer) {
        $timer.timer('pause');
    }
});

Edit 2:

Found what was causing the blur event: https://github.com/walmik/timer.jquery/blob/master/src/utils.js#L218 but it doesn't look to be configurable.

Hi,

Just thought I would let you know that the download link on your website is broken.

Well done on this reopo 👍

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

Being single threaded, JavaScript can execute one piece of code at a time. This is blocking in nature which also affects the timer event. 1000ms is not always 1000ms as other things are happening in the browser. This affects the timer value and renders it inconsistent.

Implement a method that fixes this inconsistency.

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 want to set initial value manually instead of 0th sec for timer..
can you help me how to set manual value in timer function

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

Example
<div. id="timer1">
$('#timer1').timer('destroy');

Wehre i can find the history of timer.jquery

Hi! I'm having a lot of fun working with this, and it's doing 99% of what I need to do, so thanks for making such a solid plugin! One thing I noticed is that callbacks don't work as I expected them to when the time is edited. For example, if the timer's at 8 seconds and I have a 1s duration, but then I pause it and set the time to 6 seconds, the callback doesn't execute until we hit 9 seconds, instead of now executing at 7 seconds as I thought it might after editing the time.

I got around that by adding the following after lines 105, 110, and 114 under makeEditable() in order to reset the duration relative to totalSeconds every time the time is edited.

if (options.duration) {
duration = options.duration = timeToSeconds(options.duration);
// Sets the duration to be that distance from the new edited time
duration = totalSeconds + duration;
}

I guess if you set a single 5 minute timer, you'd probably want to have it go off at 5 min even if you edited the time leading up to that, but for a short term repeating duration it probably makes sense to reset it each time. I don't have the skills to add that distinction in as an option, but I just thought I'd mention what I came across

it would be nic, if there would be a start time (in seconds)

$(selector).html('') in callback() does not work, if need to clear countdown message after time up

is there any possibility to make countdown of timer?

Is it possible to display a format like: 75:15 ?

I tried %M:%S, but instead of 75:15, it only displays 15:15

Hello!

It's will be great if the timer can send a "paused" status.

Thanks!

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.

Hi guys,

Great script here - very useful. I'm having a slight issue with it - allow me to explain.

I have a series of timed events each on triggered after another (think about a triathlon style thing where you have a run, a cycle and a swim so each one is timed in sequence).

I have structured this by having a series of timers 'nested' within the callbacks.

My issue is that some users may want one phase (e.g. the cycle in the above example) to be skipped so they set it to a nil value. Unfortunately loading zero into the timer doesn't then trigger the callback and the don't get the opportunity to do the swim (in the above example.)

I have tried loading a fractional second (0.001s) into the function but this seems to round to 1 second so is not really suitable for exact timings.

Do you guys have anything you can suggest to help me out here? I really just need to skip to the callback.

`function startTimer(duration, cbk) {

// Load variable dur based on duration input
var dur = duration;

if(dur == 0)
{
    // If the item has a nil duration need to make timer stop at 0
    // and then somehow callback to continue the function loops

    $('#Elapsed').timer({

        seconds: 0,

        duration: '0s',      // This doesn't fire the callback, 0.001s time delay is too high though

        callback: cbk     // Needed to continue the script

    }); // End Elapsed
}
else
{
    // Set the duration for the timer using the input
    var d = "'" + duration + "s'";

    // Now need to start the timer
    // Use the jQuery timer plugin code

    $('#Elapsed').timer({

        seconds: 0,

        duration: d,

        callback: cbk

    }); // End Elapsed

} // End if

} // End startTimer`

Thanks!
Wayne

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

It would be better to have reverse time counting

How do I get the second ? I need to show an alert to the User when missing 10 seconds.

您好，首先我很抱歉不太会讲英语，我在项目中使用你的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.

To replicate it, is a matter of letting it run for about 5minutes and you will notice that it will be off by about 15 to 20 seconds. (it will count faster than usual timers)

Thanks for your time and hard work.

Cheers

hi

I found an issue with the callback if we resume the timer from a preset value.

$('#timerId').timer({
    seconds: 100
    duration: '3s',
    callback: function() {
      console.log('Notify me every 3 seconds');
    },
    repeat: true //repeatedly calls the callback you specify
});

I was able to fix the issue by updating the duration with the increment of initial seconds.

        if (options.duration) {
          duration = options.duration = timeToSeconds(options.duration);
          // Akhil - fix for duration and initial seconds
          if (options.seconds) {
            var duration_time = options.duration + options.seconds;
            duration = duration_time = timeToSeconds(duration_time);    
          }
        } 

I thought it might be helpful if someone else has similar requirement.

Edit - sorry please ignore, problem solved.

Great plugin by the way :)

a timer called periodically should be reset after callback function called
Intervall set to 30sec -> Start: 1 End: 30 -> callback -> Start: 1 End: 30 ...

If callback function fired, the timer starts again asynchronously but i need a synchronously callback (for example for a ajax call)

Hello!

It's will be great if this plugin can suport a regresive counter.

Thank for this simple plugin.

Very nice plugin!!! You have done a great job!!!

Is there any way to display a format with milliseconds?

Thank you for your time

Very nice plugin!
Could we also have a counting down option?
Need to start at 60s and counting down to 0.

$('#clockdiv').timer({ format: '%h:%m:%s' });
$('#clockdiv2').timer({ format: '%h:%m:%s' });

Hello and thank you for this utility.

I am trying to test it. I created a jsfiddle for this:
https://jsfiddle.net/t30Lugfn/
That is really simple, yet I couldnt make it work. Can you comment?

Cheers

At the moment the timer will updated each second.
adding a new option for a refresh frequence like 5sec 10sec etc.

It would be great if we can define the format of the displayed text.

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

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! 👍

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