Auto Restart/Reset countdown timer

Question

What i want is that when the timer has reached the end-date and time it automatically start over but by counting down from 60 seconds. Im new to jquery and im strungling with this problem for almost 3 days and i cant get it running. My countdown is working perfectly with the end-data inserted from the database but when it reaches the end-date and time (eg: 0 days 0 hours 0 minutes 0 seconds) it should start by counting down from 60 seconds to zero.

Can someone please help with this problem? Here below a peace of my code im using. Im using it combined with PHP so it also will create the divs used for the countdowns.

JQUERY:

$data = '<script type="text/javascript">
$(function () {';
    foreach( $datarows as $key => $value ) { // start php foreach

    $data .= '
              $(\'#wincountdown'.$datarows[$key]['uid'].'\').countdown({ until: new Date( '. strftime( '%Y,%m - 1,%d,%H,%M',$datarows[$key]['end_bidding']).' ) }) ;
    ';
    } // end php foreach
$data .= '
});
</script>';

HTML

<div id="wincountdown<#nr#>">  </div> //build by db array

So the pieces of code above is working fine. Now it only should automatically restart when end date has been reached. So my question is how can i implement the piece of code to realise what i want it todo, or what function from jquery i should be using and adding? Maybe someone got a piece of code that is doing something like that allready and want to share it?

Please can someone help me? If i was not clear enough please ask me to explain better.

Thanks in advance.

Answer 1

Use the JQuery Countdown plugin.

It has callback events that can be fired when the timer hits zero. When this happens, simply reset and timer.

Assuming this is our html:

<div id="shortly"></div>
<button id="shortlyStart">Start</button>

This is roughly the JQuery you'd need to reset the countdown timer.

// restart the timer on expiry
$('#shortly').countdown({until: shortly,  
    onExpiry: restart, onTick: watchCountdown}); 

$('#shortlyStart').click(function() { 
    // restart the timer on click
    restart();
}); 

function restart() { 
    shortly = new Date(); 
    shortly.setSeconds(shortly.getSeconds() + 5.5); 
    $('#shortly').countdown('change', {until: shortly}); 
} 

// show the timer results 
function watchCountdown(periods) { 
    $('#monitor').text('Just ' + periods[5] + ' minutes and ' + 
        periods[6] + ' seconds to go'); 
}

Answer 2

I studyied your above code again ( bit better this time ) ...and my restart when zero is reached is working! Yeaaahhh. Have to adjust some other stuff in the code, but my main goal is reached...Thanks a lot, this is really helping me to understand jquery a bit better. In basic it is simple, but first the basic has to be understand :)

Thanks a lot!