Pause on stopwatch doesn't work

GoogleCodeExporter commented 9 years ago

I was hoping to make a stopwatch with a button you click to start and stop the 
timer, which like most stopwatches started paused.

setting startpaused: true does not work for me.

You sample code left me a little in the dark about how to use the events, which 
I thought would be "triggered" using object.trigger("event-name") - maybe these 
don't work because the pause doesn't work...

here's my sample code (using jquery 1.4.2):

$(document).ready(function () {
    $(".clicky-button").click(function (e) {
        if ($(this).hasClass("pause")) {
            $(this).removeClass("pause");
            $(this).addClass("play");
            $("#clock").trigger("resume");
        } else {
            $(this).removeClass("play");
            $(this).addClass("pause");
            $("#clock").trigger("pause");
        }
    });
    $("#clock").epiclock({
        startpaused: true,
        mode: $.epiclock.modes.stopwatch
    });
});

My project needs to use an input box to show (and update) the value but since 
it's value is set with .val() not .html() that doesn't work either and I'll 
probably have to end up copying the value into it using yet another timer.

Original issue reported on code.google.com by tim.stcl...@gmail.com on 16 Jul 2010 at 7:38

GoogleCodeExporter commented 9 years ago

Hey Tim,

Sorry, this is a miss on my part with some pretty misleading documentation. 
I've gone through and updated the documentation to hopefully clear up some of 
this confusion. 

To point you in the right direction, let me highlight some of the 
clarifications:

- Events are read only, they're so you can be notified of changes to a clock, 
not to trigger them.
- There's documentation on the [ClockGuide Clock Object] now available, which 
is how you would go about changing this. Ex:

{{{
$(function()
{
    $('#clock').epiclock({startpaused: true, mode: $.epiclock.modes.stopwatch});

    $('.clicky-button').click(function (event)
    {
        $('#clock').data('epiclock').toggle();
    });
});
}}}

That code should build you a paused stopwatch which, whenever you click 
clicky-button, will toggle the paused status of the clock.

As for putting the value into an input field, that's something not currently 
supported in this version of epiclock. You can mimc the functionality by doing 
something like this:

For the html:
{{{
    <div id="clock" style="display:none"></div>
    <input id="time" type="text" value="0:00:00" />
}}}

For the JS:
{{{
    $(function (){
        $('#clockd').epiclock({mode: $.epiclock.modes.stopwatch, format: 'X:i:s'}).bind('rendered', function ()
        {
            $('#time').val($(this).data('epiclock').print('x:i:s'))
        });
    });
}}}

Original comment by gars...@gmail.com on 16 Jul 2010 at 3:55

GoogleCodeExporter commented 9 years ago

Hi autostart do not works, here is my code:

$('#stopwatch').epiclock({startpaused:true,mode: $.epiclock.modes.stopwatch, 
format: 'x:i:s', renderer: 'retro'});

Please help me

Original comment by realt...@gmail.com on 24 Jul 2011 at 5:28

Frerit / epiclock

Pause on stopwatch doesn't work #17