Member Avatar for adelsin

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>
  • 2 Contributors
  • 2 Replies
  • 110 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by fobos

Dani AI

Generated

Good catch by — this was a stacking-order issue in IE. Browsers rely on stacking contexts and z-index when multiple positioned elements overlap; if the overlay has no z-index (or a lower stacking context), an iframe can end up on top in some IE modes. The correct, robust approach is to explicitly give the overlay a higher z-index and make sure both overlay and iframe are positioned, and to use full-viewport positioning that does not depend on parent heights.

A compact CSS pattern that avoids common pitfalls:

/* full-screen overlay */
#loadingOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.6); /* or an image */
}

/* put iframe below the overlay */
#contentFrame {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

Show the overlay before the iframe load starts and hide it on the iframe load event. Using script to attach the handler and to set the src after showing the overlay avoids flicker:

var overlay = document.getElementById('loadingOverlay');
var frame = document.getElementById('contentFrame');

overlay.style.display = 'block'; // make visible first
frame.addEventListener('load', function () {
  overlay.style.display = 'none';
});
frame.src = 'your-page-or-script';

Extra notes: position:fixed isn’t supported in very old IE (IE6) — in that case use position:absolute with a resize handler or a polyfill. If the iframe hosts plugin content (Flash/ActiveX) or windowed controls, those can render above HTML layers unless the plugin is configured for compositing (Flash needs wmode=opaque/transparent). Also ensure a standards-mode DOCTYPE so stacking behavior is consistent. For deeper reading on stacking contexts and z-index see the MDN reference: z-index on MDN.

Thread status: problem resolved after adding z-index (as noted); ’s request to mark solved is consistent with that outcome.

Recommended Answers

All 2 Replies

Member Avatar for adelsin

Answered my own question.

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

Member Avatar for fobos

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.