The purpose of this code is to loop through the urls and insert the latest one into the iframe. Below, I am using jquery's countdown plugin.
<?php
$count=0;
$urls[]="http://www.techcrunch.com";
$urls[]="http://www.livingsocial.com";
$urls[]="http://www.guardian.co.uk";
$urls[]="http://www.google.com";
$urls[]="http://www.rightmove.com";
$urls[]="http://www.godaddy.co.uk";
foreach ($urls as $count){
?>
<script type="text/javascript">
$(function start() {
var changetimer = new Date();
changetimer.setSeconds(changetimer.getSeconds() + 10.5);
$('#defaultCountdown').countdown({until: changetimer, onExpiry: liftOff});
$('#year').text(changetimer.getFullYear());
});
function liftOff() {
document.getElementById("mainview").src = '<?php echo($count); ?>';
}
</script>
<?php } ?>
</head>
the below is in the body tag
<iframe id="mainview" width="800" height="400" src="http://www.holidays.com">
</iframe>
The problem here is this code skips through the list of urls so quickly you only see the first one, and the last url. The urls inbetween are so far invisible and the countdown timer only appears once. I am using the jquery countdown plugin.
How do I make this slow down and show each iteration of the count down individually before moving to the next? thank you very much.
The problem is that you are setting all of your timers to go off at exactly the same time. You need to set them for different times. Instead of adding 10.5 seconds for each one, maybe add "10.5*the array index" so that each one waits a little longer than the previous.
Do it like this:
<?php
$count=0;
$urls[]="http://www.techcrunch.com";
$urls[]="http://www.livingsocial.com";
$urls[]="http://www.guardian.co.uk";
$urls[]="http://www.google.com";
$urls[]="http://www.rightmove.com";
$urls[]="http://www.godaddy.co.uk";
?>
<script type="text/javascript">
$(function start() {
var changetimer = new Date();
changetimer.setSeconds(changetimer.getSeconds() + 10.5);
var urls = <?php echo json_encode($urls); ?>;
$.each(urls, function(i, url){
setTimeout(function(){
liftOff(url);
} ,5000*i); //Change every 5 seconds
});
$('#year').text(changetimer.getFullYear());
});
function liftOff(url) {
document.getElementById("mainview").src = url;
}
</script>