How to put a div overlay over framesets?
I have a requirement to create a please wait page using jQuery 1.6.2 for an existing jsp page. I was able to get the div overlay to work, along with an please wait animation in a modal window in the center of the page. However, the overlay only covers one of the framesets, the center one.
The html structure is basically (I'm leaving a lot out for clarity):
...
<frameset >
<frame id="topMostFrame">
<frameset>
<frame id="leftMostframe">
<frame id="centerMostFrame">
</frameset>
</frameset>
<noframes>
</noframes>
</body>
</html>
JQUERY
function getTheOverlay(){
$(document).ready(function() {
$("#loading-div-background").css({opacity: 0.5});
$("#loading-div-background").show();
//alert("In getOverlay!");
});
}
function remove(){
$(document).ready(function() {
$('#loading-div-background').hide();
});
}
HTML
<div id="loading-div-background" style="display:none" class="ui-widget">
<div id="loading-div" class="ui-corner-all">
<img style="height:80px;margin:50px;" src="/images/loading.gif" alt="Loading.."/>
</div>
</div>
CSS
#loading-div-background {
display:none;
position:absolute;
top:0;
left:0;
background:gray;
width:100%;
height:100%;
/* Next 2 lines IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
}
#loading-div {
width: 300px;
height: 200px;
background-color: #ffffff;
text-align:center;
position:absolute;
left: 50%;
top: 50%;
margin-left:-150px;
margin-top: -100px;
}
I tried moving the html to load in my jquery function, but it didn't display the overlay in IE8. I also had a time getting IE8 to work with the overlay itself, but that is fixed using the CSS above.
I need to disable the links on the left frame, which is probably the approach I'll use or else cover them with the overlay. Yes I know frames are bad, but that is what I was given to work with.
I can't get the overlay to go over the other framesets and cover the entire page. I've read that this is impossible to do with framesets, although I'm guessing there could be a workaround. However, when I use an alert for debugging purposes, the overlay covers over the entire page.
My question is: why is using an alert making the overlay cover everything? Is there something else I could do to get the same effect, even with the framesets?
Answer
I faced this same problem and this is what I found that worked for me.
A frame is basically a window object. All the rules about windows apply to frames. A div belongs to a document which is held inside a window. Since the document can't leave its window, the div can't leave its window. You're asking for control at the level of the browser, but all you are permitted is control at the level of the document.
However, you may do a DIV over an iframe but not a frameset.
UPDATE:
Take this example my friend, It took some time for me to solve it, but really , StackOverflow has helped me a lot, so I feel that I must put this example here to help others.
This the html of page-container, it contains an iframe that will request the page-frameset that you are wanting to overlay.
<head>
<style type="text/css">
html, body#mybcontainer_body{margin:0px;padding:0px;border:none;height:100%;width:100%;}
#mybcontainer_div{position:absolute;top:0px;bottom:0px;left:0px;right:0px;}
#mybcontainer_iframe{position:absolute;top:0%;left:0%;height:100%;width:100%;}
</style>
</head>
<body id="mybcontainer_body" >
<div id="mybcontainer_dialog" style="display:none;">Some Text Here</div>
<div id="mybcontainer_div"><iframe id="mybcontainer_iframe" border="0" frameborder="0" scrolling="no" noresize="noresize" src="page-two-contain-frameset"></iframe></div>
</body>
My Regards