What I was trying to acomplish was to display a loading div tag that emcampassed the screen and then hide it when the iframe finally loaded.

Works how I want it to in Firefox, however, not so much in IE.

In IE, the loading div never appears and continues to load the iframe.

Any thoughts?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Test</title>



<script language="javascript" type="text\javascript">
function toggle2(showHideDiv) {
    var ele = document.getElementById(showHideDiv);

    if(ele.style.display == "block") {
            ele.style.display = "none";

      }
    else {
        ele.style.display = "block";

    }
}</script>
</head>
<body style="background:url('Crest.jpg') no-repeat right top;margin:0px;">


<div id="LoadingPage" style="background:url('splashbackdrop.jpg') no-repeat;width:100%;height:100%;position:fixed;display: block;">
<div align=center style="background:url('crest-small.jpg') no-repeat;width:400px;height:200px;padding:50px;border:5px solid black;margin:50px;">
<H2>LOADING...</H2>
<br>
<img src="spinner_white.gif">
</div>
</div>
<iframe name="frame" src="test.cgi" onload="javascript:toggle2('LoadingPage');" style="position:fixed;width:100%;height:100%;border:0;margin:0px;"></iframe>


</body>
</html>

Answered my own question.

Added a nice little z-index to the Div tags :)

Can you mark it solved!

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.