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>
Unsolved 
