Go Back   CodingForums.com > :: Client side development > JavaScript programming > DOM and JSON scripting
Reload this Page Loading image for an iframe in a hidden div

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rating: Thread Rating: 2 votes, 3.00 average.
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 12-05-2006, 11:38 PM   PM User | #1
bolo
New to the CF scene

 
Join Date: Dec 2006
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
bolo is an unknown quantity at this point
Loading image for an iframe in a hidden div
Hi All, n00b to this forum!

I have an IFRAME loading into a page and naturally it is loading last and I would like for a loading.gif image to pop in there first to let people know that there is something loading in that beautiful white space.

I think I need to create two DIVs, one with the 'loading' image and one with the text. The latter should be hidden to start with. Then use an onload event to hide the loading animation DIV and show the text DIV. I think......?

So here is where I am:
Code:
<div><img src="images/loading.gif"></div>

<div>
<iframe style="display:none" width="325" height="276" src="FRAME.php" frameborder="0" scrolling="auto"></iframe>
</div>
So what I need to figure out is the javascript (I assume is best) that would define the onload function to make the loading div show then hide it and show the FRAME.php in the frame once ready.

Any help or direction to head is very appreciated!
bolo is offline   Reply With Quote
Old 12-06-2006, 04:25 PM   PM User | #2
1212jtraceur
Regular Coder

 
Join Date: Oct 2006
Posts: 206
Thanks: 1
Thanked 0 Times in 0 Posts
1212jtraceur is an unknown quantity at this point
Instead of having 2 divs, you could have one with loading.gif as it's background. The iframe's visibility would be hidden, and when it loads, it would be visible.

CSS:
Code:
div#frameWrapper
{
background-image: url("images/loading.gif");
height: 276px;
width: 325px;
}

iframe#frame
{
height: 276px;
width: 325px;
visibility: hidden;
overflow: auto;
border-width: 0;
}
JS:
Code:
function xonload()
{
document.getElementById('frame').style[visibility] = 'visible';
}
XHTML:
Code:
<div id="frameWrapper">
<iframe id="frame" src="FRAME.php" onload="xonload();" />
</div>
Note that I used CSS rather than attributes for the appearance of the iframe and for the background image.

Hope this helps,
1212jtraceur
Last edited by 1212jtraceur; 12-06-2006 at 04:28 PM.. Reason: Prematurely posted
1212jtraceur is offline   Reply With Quote
Old 12-07-2006, 01:36 AM   PM User | #3
bolo
New to the CF scene

 
Join Date: Dec 2006
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
bolo is an unknown quantity at this point
Thanks for the quick reply! I can't get the above to work, heres the output page:

http://www.bolocreative.com/frametest/index.php

The pages code is like this:

Code:
<head>
<title>Loading Image for IFRAME</title>
<style type="text/css">
div#frameWrapper
{
background-image: url("images/loading.gif");
background-repeat:no-repeat;
height: 276px;
width: 325px;
}

iframe#frame
{
height: 276px;
width: 325px;
visibility:hidden;
overflow: auto;
border-width: 0;
}
</style>
<script type="text/javascript">
function xonload()
{
document.getElementById('frame').style[visibility] = 'visible';
}
</script>
</head>

<body>
<div id="frameWrapper">
<iframe id="frame" src="FRAME.php" onload="xonload();" /></iframe>
</div>
</body>
</html>
Maybe I'm missing something? I appreciate your input.
bolo is offline   Reply With Quote
Old 12-07-2006, 02:38 AM   PM User | #4
david_kw
Senior Coder

 
Join Date: Nov 2006
Posts: 1,000
Thanks: 0
Thanked 0 Times in 0 Posts
david_kw will become famous soon enough
Just a couple things:

document.getElementById('frame').style.visibility = 'visible';

plus you are missing the <html> tag at the beginning

david_kw
david_kw is offline   Reply With Quote
Old 12-07-2006, 03:58 AM   PM User | #5
1212jtraceur
Regular Coder

 
Join Date: Oct 2006
Posts: 206
Thanks: 1
Thanked 0 Times in 0 Posts
1212jtraceur is an unknown quantity at this point
Whoops, I did miss the quotes in

Code:
document.getElementById('frame').style[visibility] = 'visible';
But yeah, style.visibility is better anyways...

Perhaps this instead would work:

Code:
function xonload()
{
document.getElementById('frameWrapper').id = 'frameWrapper2';
}
with this CSS:

Code:
div#frameWrapper2
{
height: 276px;
width: 325px;
}
Or, if you set a background for FRAME.php, it should cover images/loading.gif.

Hope you get it working,
1212jtraceur
1212jtraceur is offline   Reply With Quote
Old 12-07-2006, 12:56 PM   PM User | #6
bolo
New to the CF scene

 
Join Date: Dec 2006
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
bolo is an unknown quantity at this point
I applied the changes suggested by david_kw and it works great in IE but unfortunately failed FF test. Is there a particular piece of code that FF is getting upset with? It appears the ability to hide the background image isnt available for FF: www.bolocreative.com/frametest/index.php

Thanks again!
bolo is offline   Reply With Quote
Old 12-07-2006, 03:52 PM   PM User | #7
1212jtraceur
Regular Coder

 
Join Date: Oct 2006
Posts: 206
Thanks: 1
Thanked 0 Times in 0 Posts
1212jtraceur is an unknown quantity at this point
Ok, I've put this together, and it works in Firefox 2:

Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<title>Loading Image for IFRAME</title>
		
		<meta http-equiv="content-type" 
			content="text/html;charset=utf-8" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
div#frameWrapper
{
background-image: url("http://www.bolocreative.com/frametest/images/loading.gif");
background-repeat:no-repeat;
background-position:center;
height: 276px;
width: 325px;
}

div#frameWrapper2
{
background-image: none;
height: 276px;
width: 325px;
}

iframe#frame
{
height: 276px;
width: 325px;
visibility: hidden;
overflow: auto;
border-width: 0;
}
</style>
<script type="text/javascript">
function xonload()
{
document.getElementById('frameWrapper').id = 'frameWrapper2';
document.getElementById('frame').style.visibility = 'visible';
}
</script>
</head>

	<body>
		<div id="frameWrapper" align="center">
			<iframe id="frame" src="http://www.bolocreative.com/frametest/FRAME.php" onload="xonload();" />
		</div>
	</body>
</html>
I noticed that FRAME.php doesn't have an <html> tag...
1212jtraceur is offline   Reply With Quote
Old 07-17-2007, 07:06 PM   PM User | #8
patrickm07
New to the CF scene

 
Join Date: Jul 2007
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
patrickm07 is an unknown quantity at this point
Hello - I would like to do the same but my iframe script is a little too complicated for me... please can someone show me how to code it so that a loading GIF 'images/ajax-loader.gif' is displayed while the iframe on www.cvenanglais.com/acheter.htm is being called up. Here is the code... thanks!


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CV en anglais - acheter</title>
<br />
<META NAME="DESCRIPTION" CONTENT="Nous fournissions des traductions fidèles en anglais de tout document lié au recrutement.">
<META NAME="KEYWORDS" CONTENT="cv en anglais, modèle cv anglais, traduction de cv en anglais, rediger cv anglais">
<style type="text/css">
<!--
#Layer1 {
position:absolute;
width:200px;
height:73px;
z-index:1;
left: 9px;
top: 1px;
background-color: #FFFFFF;
}
#Layer2 {
position:absolute;
width:683px;
height:38px;
z-index:2;
left: 18px;
top: 78px;
}
#Layer3 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 150px;
top: 5px;
}
#Layer4 {
position:absolute;
width:0px;
height:21px;
z-index:1;
left: 121px;
top: 5px;
}
#Layer5 {
position:absolute;
width:21px;
height:23px;
z-index:3;
left: 104px;
top: 100px;
visibility: inherit;
}
#Layer6 {
position:absolute;
left:7px;
top:125px;
width:11px;
height:141px;
z-index:0;
}
#Layer7 {
position:absolute;
left:28px;
top:114px;
width:179px;
height:178px;
z-index:4;
}
#Layer8 {
position:absolute;
left:9px;
top:91px;
width:135px;
height:7px;
z-index:5;
}
#Layer9 {
position:absolute;
width:200px;
height:115px;
z-index:5;
}
#Layer10 {
position:absolute;
left:323px;
top:128px;
width:188px;
height:153px;
z-index:6;
}
#Layer11 {
position:absolute;
left:351px;
top:117px;
width:320px;
height:282px;
z-index:5;
}
#Layer12 {
position:absolute;
left:355px;
top:115px;
width:322px;
height:287px;
z-index:0;
}
#Layer13 {
position:absolute;
left:355px;
top:409px;
width:322px;
height:276px;
z-index:5;
}
#Layer14 {
position:absolute;
left:28px;
top:410px;
width:317px;
height:296px;
z-index:6;
}
#Layer15 {
position:absolute;
left:20px;
top:114px;
width:5px;
height:725px;
z-index:7;
}
#Layer16 {
position:absolute;
left:956px;
top:112px;
width:8px;
height:725px;
z-index:8;
}
#Layer17 {
position:absolute;
left:948px;
top:1564px;
width:7px;
height:121px;
z-index:9;
}
#Layer18 {
position:absolute;
left:20px;
top:1564px;
width:6px;
height:151px;
z-index:10;
}
#Layer19 {
position:absolute;
left:30px;
top:1697px;
width:785px;
height:22px;
z-index:11;
}
#Layer20 {
position:absolute;
left:29px;
top:175px;
width:908px;
height:1325px;
z-index:12;
}
#Layer21 {
position:absolute;
left:956px;
top:838px;
width:10px;
height:725px;
z-index:13;
}
#Layer22 {
position:absolute;
left:20px;
top:840px;
width:6px;
height:697px;
z-index:14;
}
#Layer23 {
position:absolute;
left:67px;
top:1718px;
width:643px;
height:67px;
z-index:15;
}
#Layer24 {
position:absolute;
left:325px;
top:18px;
width:395px;
height:47px;
z-index:15;
}
#Layer25 {
position:absolute;
left:207px;
top:1627px;
width:540px;
height:18px;
z-index:16;
}
#Layer26 {
position:absolute;
left:226px;
top:1647px;
width:477px;
height:18px;
z-index:17;
}
#Layer27 {
position:absolute;
left:195px;
top:115px;
width:178px;
height:27px;
z-index:18;
}
#Layer28 {
position:absolute;
left:35px;
top:146px;
width:733px;
height:47px;
z-index:18;
}
#Layer29 {
position:absolute;
left:678px;
top:78.5px;
width:238px;
height:40px;
z-index:18;
}
#Layer30 {
position:absolute;
left:56px;
top:121px;
width:336px;
height:31px;
z-index:19;
}
.style40 {
font-size: 16px;
font-family: Arial;
font-weight: bold;
color: #061365;
}
.style41 {
font-family: Arial;
font-size: 12px;
}
#Layer31 {
position:absolute;
left:30px;
top:1727px;
width:1249px;
height:27px;
z-index:20;
}
#Layer32 {
position:absolute;
left:169px;
top:1711px;
width:388px;
height:6px;
z-index:20;
}
#Layer33 {
position:absolute;
left:151px;
top:1760px;
width:34px;
height:468px;
z-index:21;
}
#Layer34 {
position:absolute;
left:300px;
top:1711px;
width:486px;
height:6px;
z-index:20;
}
#Layer35 {
position:absolute;
left:30px;
top:1711px;
width:597px;
height:1px;
z-index:21;
}
.style42 {
font-family: Arial;
font-size: 10px;
color: #666666;
}
.style29 {font-size: 10px; font-family: Arial; }
.style39 {color: #666666}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>
<div id="Layer1"><img src="../graphics/CVanglaislogov3.jpg" width="300" height="76" border="0" usemap="#Map3" />
<map name="Map3"><area shape="rect" coords="9,10,294,70" href="default.htm" target="_self" alt="Accueil" />
</map></div>
<div id="Layer2">
<div id="Layer4"></div>

<map name="Map">
<area shape="rect" coords="80,5,134,23" href="http://www.hotmail.com" target="_blank" />
</map>
<map name="Map4">
<area shape="rect" coords="147,7,196,24" href="#" />
</map>
<map name="Map2">
<area shape="rect" coords="174,7,215,22" href="default.htm" target="_self" alt="Home" />
<area shape="rect" coords="234,9,276,19" href="default.htm" target="_self" alt="Products" />
<area shape="rect" coords="307,9,326,21" href="default.htm" target="_self" alt="Buy now" />
</map>
<img src="../graphics/tabs/Final%20tabs/corrected/Acheter.jpg" width="670" height="38" border="0" usemap="#Map7" />
<map name="Map7" id="Map7">
<area shape="rect" coords="45,5,101,26" href="default.htm" target="_self" alt="Accueil" />
<area shape="rect" coords="114,4,171,26" href="produits.html" target="_self" alt="Produits" />
<area shape="rect" coords="185,7,241,27" href="acheter.html" target="_self" alt="Acheter" />
<area shape="rect" coords="257,6,308,26" href="faq.html" target="_self" alt="FAQ" />
<area shape="rect" coords="325,5,379,26" href="contact.html" target="_self" alt="Contact" />
</map>
<map name="Map6">
<area shape="rect" coords="45,6,98,23" href="default.htm" target="_self" alt="Acceuil" />
<area shape="rect" coords="114,6,169,25" href="produits.html" target="_self" alt="Produits" />
<area shape="rect" coords="185,7,240,26" href="acheter.html" target="_self" alt="Acheter" />
<area shape="rect" coords="257,6,304,25" href="faq.html" target="_self" />
<area shape="rect" coords="325,6,379,25" href="contact.html" target="_self" alt="Contact" />
</map>
<map name="Map5">
<area shape="rect" coords="47,8,98,24" href="default.htm" />
<area shape="rect" coords="115,7,167,24" href="produits.html" />
</map>
</div>
<div id="Layer15"><img src="../Tabs/VerticalLine1.jpg" width="2" height="726" /></div>
<div id="Layer16"><img src="../Tabs/VerticalLine1.jpg" width="2" height="726" /></div>
<div id="Layer17">
<div align="right"><img src="../graphics/FooterCurveRightLONG.jpg" width="10" height="151" /></div>
</div>
<div id="Layer18"><img src="../graphics/FooterCurveLeftLONG.jpg" width="10" height="152" /></div>
<div id="Layer20"><!-- logiforms code - cut an paste this code into anywhere on your page -->
<script language="JavaScript" type="text/javascript">
var queryString = unescape(location.search.replace(/^[^\?]+\??/,'').toLowerCase());
if (window.location.href.indexOf('?') < 0){ baseurl = window.location.href}else{baseurl = window.location.href.substring(0,window.location.href.indexOf('?'))}
if (queryString.indexOf('?') >= 0){var appendchar='&';}else{var appendchar='?'};
queryString = queryString + appendchar + 'lflocationname='+baseurl;
var url = 'https://www.logiforms.com/formdata/user_forms/12379_4855156/47965/'+queryString;
document.write('<IFRAME SRC="'+url+'" ');
document.write('HSPACE="2" VSPACE="2" NAME="win1237947965" ');
document.write('SCROLLING="auto" WIDTH="850" HEIGHT="1580" ');
document.write('MARGINWIDTH=5 MARGINHEIGHT=5 FRAMEBORDER="0"></IFRAME>\n');
document.write('<NOFRAMES>');
document.write('<A HREF="#" onClick="window.open(\''+url+'\',');
document.write('\'win1237947965\', \'toolbar=no,width=600,height=400,left=20,top=20, screenX=20,screenY=20,status=no,scrollbars=yes, resizable=no\');return false">Click here to open the window</a>\n');
document.write('</NOFRAMES>');
</script>
</div>
<div id="Layer21"><img src="../graphics/VerticalLine1.jpg" width="2" height="726" /></div>
<div id="Layer22"><img src="../graphics/VerticalLine1.jpg" width="2" height="726" /></div>
<div id="Layer29"><img src="../graphics/tabs/Final tabs/Acheter-ext.jpg" width="281" height="38" /></div>
<div id="Layer30"><span class="style40">Acheter</span><br />
<span class="style41">Merci de remplir le formulaire suivant et cliquez sur <strong>envoyer</strong>. </span></div>
<div id="Layer34"><img src="../graphics/FooterLine-EXT.jpg" width="648" height="3" /></div>
<div id="Layer35"><img src="../graphics/FooterLine.jpg" width="648" height="3" /></div>
<div id="Layer3" class="style42" style="position:absolute; left:197px; top:1695px; width:681px; height:15px; z-index:22"><a href="default.htm" target="_self">Accueil</a> <a href="produits.html" target="_self">Produits</a> <a href="acheter.html">Acheter</a> <a href="faq.html" target="_self">FAQ</a> <a href="contact.html" target="_self">Contact</a> <span class="style29"><a href="conditions-generales.html" target="_blank">Conditions G&eacute;n&eacute;rales</a> <a href="non-responsabilite.html" target="_blank">Non-responsabilit&eacute;</a> <a href="declaration-confidentialite.html" target="_blank">D&eacute;claration de confidentialit&eacute;</a> <a href="partenaires.htm" target="_self">Partenaires</a> </span></div>
g
</body>
</html>
patrickm07 is offline   Reply With Quote
Old 02-18-2008, 11:46 PM   PM User | #9
hschenker
New to the CF scene

 
Join Date: Feb 2008
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
hschenker is an unknown quantity at this point
Here's what works for me - the key is the "allowtransparency" attribute for the iframe:

<div style="background: #ffffff url(/images/loading.gif) no-repeat 50% 5%;">
<iframe allowtransparency src="http://www.example.com/iframecontent.html" title="frameContent" width="740" height="500" scrolling="no" frameborder="0" style="text-align:center;"></iframe>
</div>
hschenker is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


« Previous Thread | Next Thread »
Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT +1. The time now is 10:17 AM.
Advertisement
Log in to turn off these ads.