View Full Version : Iframe-divs: a technique for letting divs overlay anything we want

03-22-2012, 08:30 PM
1) CODE TITLE: Iframe-divs - a technique for letting divs overlay anything we want

2) AUTHOR NAME: Arie Molendijk

We can let a div overlay flash objects (without changing wmode to 'transparent' or 'opaque'), select boxes and other windowed elements by giving it certain characteristics of an iframe (without src) having high z-index. The result is an 'iframe-div'. Iframes-divs are iframes injected with HTML. Like real divs, they have no 'source'.

An iframe-div is created by using the iframe's onload handler, like this:
<iframe name="ifr" onload="frames['ifr'].document.body.innerHTML='This is an iframe-div'"></iframe>
Putting an iframe_div of top of a windowed element (like flash objects), then, is a simple matter of giving the iframe-div a position (absolute or relative), a background (non-transparent) and an appropriate z-index:
<iframe name="ifr" style="position:relative;z-index:10;background:white" onload="frames['ifr'].document.body.innerHTML='This is an iframe-div'"></iframe>

I used this (has it been observed yet?) in a script that does not only put an iframe-div on top of anything else, but also styles it in such a way that it looks line a normal div. DEMO and explanations in the URL TO CODE below.