Member Avatar for Potato.Head

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>
  • 3 Contributors
  • 2 Replies
  • 2K Views
  • 8 Years Discussion Span
  • Latest Post Latest Post by SrinivasaRao_2

Recommended Answers

All 2 Replies

Member Avatar for yilmazhuseyin

I am not really good with css but I think you should !important in your css. when you put !important tag in css that property does not overwriten by surrounding tags here is page
http://webdesign.about.com/od/css/f/blcssfaqimportn.htm
(just google it there should be some tutorials about that.)
I hope that helps

Member Avatar for SrinivasaRao_2

how can i use this one for iframe which is using as target

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.