Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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!

  • #2
    Regular Coder
    Join Date
    Oct 2006
    Posts
    206
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #3
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Just a couple things:

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

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

    david_kw

  • #5
    Regular Coder
    Join Date
    Oct 2006
    Posts
    206
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #6
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #7
    Regular Coder
    Join Date
    Oct 2006
    Posts
    206
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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...

  • #8
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #9
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •