AJAX

Show loading Animation before iframe is fully loaded

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Dec 2008

Posts: 30

Reputation: Potato.Head is an unknown quantity at this point

Solved Threads: 0

Potato.Head Potato.Head is offline

Offline

Light Poster

Show loading Animation before iframe is fully loaded

Jun 23rd, 2009

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

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<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>
<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>

•

Join Date: Oct 2006

Posts: 48

Reputation: yilmazhuseyin is an unknown quantity at this point

Solved Threads: 5

yilmazhuseyin yilmazhuseyin is offline

Offline

Light Poster

Re: Show loading Animation before iframe is fully loaded

Jun 23rd, 2009

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