by Derek Pinkerton
30. May 2006 17:50
In some recent work on the new QualTrax user interface I had to load a document into the main interface using an IFRAME. This worked great using the Response.BinaryWrite that I mentioned in my previous post to dynamically load the correct document to the user's browser. While I was testing this I noticed that a "pop-up" menu I had, which was actually a div whose visibility was set to hidden, and then reset to visible when the user clicks on a certain menu item, was appearing below the document that I loaded into my IFRAME.
Of course a pop-up loading behind something else isn't very useful so I found the following workaround that allows you to "float" div tags over an iframe.
Let's say my original source looked something like the following:
<div style="position:absolute; left:100px;top 100px; height:400px;">
Floating Menu content Here
<a href="someOtherDoc.htm" target="document">
</div>
...
<iframe name="document" src="someDocument.htm" Frameborder="0"></iframe>
If the IFRAME in the above source happened to lie in the same space that the absolute positioned DIV, it would get precedence over the div and display above it. From what I have read on the subject this is because the iframe is a windowed control, which means that the same thing will happen with any other windowed controls like the drop down list. I found a few suggestions online that did not work for me so here is what I came up with that does work (at least it has for me :) )!
<div style=" position: absolute; left:175px;width:300px; top:105px; height:400px;visibility:hidden; z-index: 10; background-color:White;border:solid 1px Gray;">
Floating Menu content Here
<a href="someOtherDoc.htm" target="document">
</div>
<iframe id="treeHolder" frameborder="0" style="position:absolute;z-index:9;left:174px;width:303px;top:105px;height:402px;filter:alpha(opacity=0);"></iframe>
...
<iframe name="document" src="someDocument.htm" Frameborder="0" style="z-index:1;"></iframe>
In the above code I am using another IFRAME that will sit just underneath the "pop-up", and both of these will appear on top of the IFRAME that my actual content is loading into. (Notice the Z-Index of both the div and both iframes.) The "filter:alpha(opacity=0);" style that is applied to the new IFRAME makes it fully transparent so it does not cover the pop-up. We have to do this because if you set it's visibility to hidden, or it's display to none it will not be rendered and therefore the pop-up will still pop under.