I have two iFrames on a WordPress page that automatically refresh every 10 seconds, and I want to offset the time that they refresh by 5 seconds. I came up with the idea to load one iframe in when the page loads, and load the second iframe in after a 5 second delay.

So far, the following code waits 5 seconds to display the second iframe, but they still end up refreshing at the same time.

I have been working all day on this, and I feel like I’m missing something really simple.

<iframe width="100%" id="delayFrame" src="http://example.com"></iframe>

Here is the jQuery:

jQuery(function($){
jQuery("#delayFrame").slideUp(300).delay(5000).fadeIn(400);  });

Here is the code that the iFrames use to refresh, located in the source file itself:

<script type="text/javascript">
$(document).ready(function() {
    var refreshId = setInterval(function() {
    var fadeInData = function fadeInData() { $("#responsecontainer").fadeIn(); }
    var delaydata = function delayData(){$("responsecontainer").delay('5000');}
    var loadData = function loadData() { $("#responsecontainer").load('display.php', fadeInData); }
    $("#responsecontainer").fadeOut(loadData);
    }, 10000);
$.ajaxSetup({ cache: false });


});

Read more here: Load the source of an iFrame after a delay


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: