Refresh an iframe without losing it's text/flickering

Question

I run a radio website, and I am trying to make it so that the content (radio info) refreshes automatically.

Currently it is very ugly at refreshing.

I want it to keep the content of the iframe of the radio info until after it is done refreshing.

Here is my code: PHP for the content with the iframe: http://pastebin.com/fwBjMEUs

PHP for the Radio Info that is to be refreshed: http://pastebin.com/XyfhG8Kn

Answer 1

You are much better off using AJAX for this. This uses a div instead of an iFrame as a container. Just make sure the PHP file only outputs the HTML you want inside the div and then add this script to the page you want to display it on:

<script>
function refreshinfo(){
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("currentinfo").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","http://www.x86cam.com/wp-content/plugins/radio-info.php",true);
xmlhttp.send();
}
setInterval(refreshinfo, 20000); /*How often to refresh in ms; currently 20 secs */
</script>

Then replace your iframe with <div id="currentinfo"></div> and you should be all set!

EDIT: I've checked the php page that you pull the information, and all you need to do is remove the <centre> and </centre> tags from it i think, but it may work left in!