i have multiple timers on a page but the code doesn't seem to work for it.
in the code below the timer for each post gets started with onload function which calls the jquery code
the code i used i got it from another thread here i just modified it to work with onload for each span but it doesn't work then
<?php
$i=0;
$timeleft="05:00:30";
while ( $loop->have_posts() ) : $loop->the_post();
?>
<span id="countdown<?php echo $i; ?>" onload="start_timer(<?php echo $i; ?>,<?php echo $timeleft; ?>)"> <?php echo $timeleft; ?> </span>
<?php $i++;endwhile;wp_reset_postdata(); ?>
<script type="text/javascript">
function start_timer(num,time){
$(document).ready(function() {
parts = time.split(':'),
hours = +parts[0],
minutes = +parts[1],
seconds = +parts[2],
span = $('#countdown'+num);
function correctNum(num) {
return (num<10)? ("0"+num):num;
}
var timer = setInterval(function(){
seconds--;
if(seconds == -1) {
seconds = 59;
minutes--;
if(minutes == -1) {
minutes = 59;
hours--;
if(hours==-1) {
alert("timer finished");
clearInterval(timer);
return;
}
}
}
span.text(correctNum(hours) + ":" + correctNum(minutes) + ":" + correctNum(seconds));
}, 1000);
});
}
</script>