Hi to all, I have the following situation:
I have an iframe and I want to display a loading animation to the user until the iframe is fully loaded, this is want I did:
1. I start the iframe with style:display:none
2. I have a div that wraps the iframe
3. When the iframe is fully loaded a method is called from the iframe 'removeDivs', I change the div to be invisble with style:display:none and I set the iframe to be visible with stle:display:""
4. The problem: Because the div wraps the iframe, after changing the style of the iframe its stay invisible, the property I set doesn't affect.
Thanks in advanced

<html>
<head>
<style>    
.loading-indicator {    
 font-size:8pt;    
 background-image:url(../images/loading/loading.gif);    
 background-repeat: no-repeat;      
 background-position:top left;    
 padding-left:20px;    
 height:18px;    
 text-align:left;    
}    
#loading{    
 position:absolute;    
 left:45%;    
 top:40%;    
 border:3px solid #B2D0F7;    
 background:white url(../images/loading/block-bg.gif) repeat-x;    
 padding:10px;    
 font:bold 14px verdana,tahoma,helvetica;    
 color:#003366;    
 width:180px;    
 text-align:center;    
}    
</style>

<script>
function removeDivs()
{
	document.getElementById('loading').style.display="none";
	document.getElementById('MyIframe').style.display="";
}
</script>
</head>
<body>
<div id="loading">    
<div class="loading-indicator">    
 Page Loading...
<iframe id="MyIframe" src="flash.html" width="500" height="500" style="display:none"></iframe>
</div>
</div>
</body>
</html>
This article has been dead for over six months. Start a new discussion instead.