Image or text while waiting for iframe source...

Please start any new threads on our new site at https://forums.sqlteam.com. We've got lots of great SQL Server experts to answer whatever question you can come up with.

All Forums

Development Tools

ASP.NET

Image or text while waiting for iframe source...

Author

Topic

jhermiz

3564 Posts

Posted - 2007-12-11 : 10:09:06

I have a page where I had to place an iframe that takes its content from a completly different site. the problem is the load time for the content within the IFrame, it takes a few seconds (which isnt too bad). However, I dont want users thinking there is nothing there when they get to the page. I tried putting text above the iframe that says "Please wait if content does not appear" but people either dont read or they dont care.

So what I was hoping to do is, is it possible to have an image / text appear in the iframe while it is trying to capture its content?


<table cellpadding="0" cellspacing="0" style="border: 1px solid #24618E" width="100%">
    <tr>
        <td>
            <table cellpadding="0" cellspacing="0" border="0" width="100%">
                <tr>
                    <td class="tdheader" valign="top">
                        Reports <span style="font-size: 8pt; color: red;">(If you don't see anything wait 30
                            seconds as reports may take time to load.)</span></td>
                    <td class="tdheader" align="right" valign="top">
                        <asp:imagebutton id="ibMaxGrid" runat="server" imageurl="images/max.gif" tooltip="Maximize"
                            causesvalidation="False" visible="False" />
                        <asp:imagebutton id="ibMinGrid" runat="server" imageurl="images/min.gif" tooltip="Minimize"
                            causesvalidation="False" />
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <asp:panel id="pReports" runat="server" visible="true" width="100%" height="100%">
                            <iframe src="http://myServer/Reports..." width="100%" height="100%" frameborder="0"></iframe>
                        </asp:panel>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Notice the Bold portion of the iframe, can I place something within it so that it displays while the iframe is trying to load and then hide the image / text once it has loaded ?

Thanks,
Jon

edited by Jeff to re-format the code so the screen isn't extremely wide ...

Weblog -- [url]http://weblogs.sqlteam.com/jhermiz[/url]

spirit1
Cybernetic Yak Master

11752 Posts

Posted - 2007-12-11 : 10:16:51

i guess you could have a grey div with loading written in the IFrame. when the source loads remove it.
no idea on how to do that though...

_______________________________________________
Causing trouble since 1980
blog: http://weblogs.sqlteam.com/mladenp
SSMS Add-in that does a few things: www.ssmstoolspack.com <- new version out

jsmith8858
Dr. Cross Join

7423 Posts

Posted - 2007-12-11 : 10:48:25

Using the iframe's onload event seems to work .... In this example, ESPN.com takes forever to load, so the page displays a nice "loading" message until it finally appears fully loaded in the IFRAME:


<!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>
    <title>Slow IFRAME Test</title>
</head>
<body>
        <div id="waiting">Waiting for frame ...</div>
        <iframe id="rpt" onload="test()" style="display: none;" src="http://www.espn.com">
        
        </iframe>
</body>
<script type="text/javascript">
    function test()
   {
        document.getElementById('waiting').style.display='none';
        document.getElementById('rpt').style.display='block';
   } 
</script>
</html>

- Jeff
http://weblogs.sqlteam.com/JeffS

jhermiz

3564 Posts

Posted - 2007-12-11 : 11:45:01

quote:

Originally posted by jsmith8858

Using the iframe's onload event seems to work .... In this example, ESPN.com takes forever to load, so the page displays a nice "loading" message until it finally appears fully loaded in the IFRAME:


<!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>
    <title>Slow IFRAME Test</title>
</head>
<body>
        <div id="waiting">Waiting for frame ...</div>
        <iframe id="rpt" onload="test()" style="display: none;" src="http://www.espn.com">
        
        </iframe>
</body>
<script type="text/javascript">
    function test()
   {
        document.getElementById('waiting').style.display='none';
        document.getElementById('rpt').style.display='block';
   } 
</script>
</html>

- Jeff
http://weblogs.sqlteam.com/JeffS

Awesome Jeff, did not even remember about onload :) very very very very...very NICE

Jon

PS mladen very very very close :)

Weblog -- [url]http://weblogs.sqlteam.com/jhermiz[/url]

spirit1
Cybernetic Yak Master

11752 Posts

Posted - 2007-12-11 : 12:06:37

well i'm not a UI guy like you or jeff

_______________________________________________
Causing trouble since 1980
blog: http://weblogs.sqlteam.com/mladenp
SSMS Add-in that does a few things: www.ssmstoolspack.com <- new version out

Subscribe to SQLTeam.com

SQLTeam.com Articles via RSS

SQLTeam.com Weblog via RSS

- Advertisement -

Resources