Tuesday, August 14th, 2007
Brandon Aaron has developed a general work around for the common, nagging problem with IE6 and heavyweight components such as a select drop down ignoring z-index.
Brandon created the background iframe (bgiframe) jQuery plugin which “provides a very small, quick and easy way to fix that problem so you donâ€™t have to worry about it. No matter the size, borders or position the bgiframe plugin can fix it.”
In the simple case, you can grab a collection and call bgiframe on it:
$('.fix-z-index').bgiframe();. You can also pass in data to mess with the top, left, width, height, opacity, and src parameters.
How does it work?
The bgiframe plugin works by prepending an iframe to the element. The iframe is given a class of bgiframe and positioned below all the other children of the element. In the default configuration it automatically adjusts to the width and height of the element (including the borders) and the opacity is set to 0. The element needs to have position (relative or absolute) and should have a background (color or image).
Check out the test page to see the plugin in action.
Posted by Dion Almaer at 8:18 am