View RSS Feed

molendijk

A better Iframe Shim

Rating: 5 votes, 2.80 average.
The 'iframe shim technique' lets us overlay a div over windowed elements such as flash objects, select boxes and applets. The trick is to have the div accompanied by an iframe that must have exactly the same size and position as the div, whose z-index must be higher than the iframe's z-index. The windowed element itself must have a lower z-index and the iframe should have a background-color. Here's an example of how to have a div overlay a flash object:

<iframe style="position: absolute; left: 40px; top:50px; width:100px; height:40px;z-index:2; background: white"></iframe>
<div style="position: absolute; left: 40px; top:50px; width:100px; height:40px;color:red;z-index:3;">iframe shim</div>
<object style="position: absolute; left: 10px; top:40px; width: 400px; height: 400px; z-index:1" type="application/x-shockwave-flash" data="http://www.youtube.com/v/jUvcyyU7UB4?version=3"><param name="movie" value="http://www.youtube.com/v/jUvcyyU7UB4?version=3"><param name="allowFullScreen" value="true"><param name="wmode" value="window"><param name="flashvars" value="autoplay=1"><param name="allowNetworking" value="internal"></object>


This is fairly common knowledge (except for the iframe's background-color, so it seems). What many people don't realize is that the trick doesn't work anymore in IE after we click on the flash object playing a video (and it may fail in other cases too). After the click, the div is gone. Try for yourself (in IE).

There's an easy way to solve the problem. We put the following dummy div in the body:
<div id="dummy" style="position:absolute; " onblur="if (/*@cc_on!@*/false){this.style.top='-1px'};" onfocus="if (/*@cc_on!@*/false){this.style.top='-2px'};"></div>

and the body tag should look like this:
<body onmousemove="if(/*@cc_on!@*/false){document.getElementById('dummy').focus()}" onload="if (/*@cc_on!@*/false){document.getElementById('dummy').focus()}">

Try it in any browser you want: it seems to work everywhere.
===
Arie Molendijk.

Submit "A better Iframe Shim" to del.icio.us Submit "A better Iframe Shim" to StumbleUpon Submit "A better Iframe Shim" to Google Submit "A better Iframe Shim" to Digg

Updated 10-03-2011 at 10:57 AM by molendijk (Correction in text)

Tags: None Add / Edit Tags
Categories
JavaScript & Ajax

Comments