I've been searching the web for some time now to try and figure out where my javascript function will not work more than once on a page. I've looked at quite a few different posts about JavaScript functions not working more than once and the main thing I took from them was that ID's needed to be unique as you can probably tell from my code. However I still havn't managed to do get it working.
Basically, I am trying to add countdown timers to posts being display on a page by using the wordpress loop. The code at the bottom is being called during the wordpress loop.
$pID is the id of the post and this is working fine to create unique div IDs.
The code would initially work on the second of two posts that are being displayed on the page, the first was not counting down.
However, the way it is currently coded neither are working, this is because:
function setCountDown_<?php echo $pID; ?>()
When I added the ID to ^^^ and also:
setCountDown_<?php echo $pID; ?>()
I did this because I thought it wasn't working due to the function perhaps not being unique and that causing an issue somewhere, but clearly that's not the case.
Outside the loop I also have this in the body tag:
<body onload="setCountDown();">
I was wondering if anyone could help me work out what I need to do to get this code working correctly as I feel I am missing something.
Currently the code just counts down from 25 minutes, that's okay for now, eventually it will be from a set date.
Thanks in advance for any help and advice.
<div id="countdown-<?php echo $pID; ?>" class="featured">
<?php
$dateFormat = "d F Y -- g:i a";
$targetDate = time() + (25*60);//Change the 25 to however many minutes you want to countdown
$actualDate = time();
$secondsDiff = $targetDate - $actualDate;
$remainingDay = floor($secondsDiff/60/60/24);
$remainingHour = floor(($secondsDiff-($remainingDay*60*60*24))/60/60);
$remainingMinutes = floor(($secondsDiff-($remainingDay*60*60*24)-($remainingHour*60*60))/60);
$remainingSeconds = floor(($secondsDiff-($remainingDay*60*60*24)-($remainingHour*60*60))-($remainingMinutes*60));
$actualDateDisplay = date($dateFormat,$actualDate);
$targetDateDisplay = date($dateFormat,$targetDate);
?>
<script type="text/javascript">
var days = <?php echo $remainingDay; ?>
var hours = <?php echo $remainingHour; ?>
var minutes = <?php echo $remainingMinutes; ?>
var seconds = <?php echo $remainingSeconds; ?>
function setCountDown_<?php echo $pID; ?>()
{
seconds--;
if (seconds < 0)
{
minutes--;
seconds = 59
}
if (minutes < 0)
{
hours--;
minutes = 59
}
if (hours < 0)
{
days--;
hours = 23
}
document.getElementById("remain-<?php echo $pID; ?>").innerHTML = days+" days, "+hours+" hours, "+minutes+" minutes, "+seconds+" seconds";
SD<?php echo $pID; ?>=window.setTimeout( "setCountDown_<?php echo $pID; ?>()", 1000 );
if (minutes == '00' && seconds == '00')
{
seconds = "00";
window.clearTimeout(SD<?php echo $pID; ?>);
window.alert("Time is up. Press OK to continue."); // change timeout message as required
window.location = "http://www.readfree.ly/" // Add your redirect url
}
}
</script>
Start Time: <?php echo $actualDateDisplay; ?><br />
End Time:<?php echo $targetDateDisplay; ?><br />
<div id="remain-<?php echo $pID; ?>">
<?php echo "$remainingDay days, $remainingHour hours, $remainingMinutes minutes, $remainingSeconds seconds";?>
</div>
<?php
echo $pID;
?>
