Geek Answers Handbook

How to place div overlay on framesets?

I have a requirement to create a wait wait page using jQuery 1.6.2 for an existing jsp page. I managed to get the div overlay to work, as well as animate the animation in a modal window in the center of the page. However, the overlay covers only one of the sets of frames, the central one.

The html structure is basically (I leave a lot 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 html to load into my jquery function, but in IE8 it did not display an overlay. I also had time to get IE8 to work with the overlay itself, but this is fixed using CSS above.

I need to disable links on the left frame, which is likely to be used by me or overlaps them with overlay. Yes, I know that frames are bad, but this is what I had to work with.

I cannot force the overlay to move to other sets of frames and cover the entire page. I read that this cannot be done with sets of frames, although I assume there may be a workaround. However, when I use the alert for debugging purposes, the overlay spans the entire page.

My question is: why is a warning imposed imposing an overlay on everything? Is there anything else I could do to get the same effect, even with framesets?

+4
source share
2 answers

I ran into the same problem and this is what I found that worked for me.

A frame is basically a window object. All window rules apply to frames. The div attribute refers to the document that is stored inside the window. Because a document cannot leave its window, a div cannot leave its window. You request control at the browser level, but you are allowed to control the level of the document.

However, you can make a DIV over an iframe , but not with a frame set .

UPDATE:

Take this example, my friend. It took some time to solve it, but actually StackOverflow helped me a lot, so I think I should give this example to help others.

This is an html container page, it contains an iframe that will request the set of page frames that you want 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>

Congratulations

+3
source

I ended up using show / hide on a set of frames after explaining from Cairo Solutions. It really worked, but I don't find it possible to span multiple sets of frames with one div.

This is the code I used:

 $('#divName a',top.frames['leftframe'].document).show(); $('#divName a',top.frames['leftframe'].document).hide();

Then I just used the div that I created as an overlay in the main frameset to work along with this, and this solved the problem.

0
source

More articles:


All Articles