A class for obscuring select lists and flash objects in IE.

• Online Tutorial/Demo

There are two types of elements that (sometimes) prohibit you from positioning a DOM element over them (mostly in Internet Explorer): some form elements and some flash elements. The two options you have are:

• to hide these elements when your DOM is going to be over them; this works if you know your DOM element is going to completely obscure that element
• an iframe shim - where you put an iframe below your element but ABOVE the form/flash element. More details here: http://www.macridesweb.com/oltest/IframeShim.html

• Options, Events, Class.Occlude

new IframeShim(element[, options]);

1. element - (mixed, required) A string of the id for an Element or an Element reference that should be shimmed
2. options - (object, optional) key/value set of options

• display - (boolean) display the shim on instantiation; defaults to false
• zIndex - (integer) the z-index of the shim; optional, default is 1 less than the element
• margin - (integer) make the iframe smaller than the element to give a buffer (for things like shadows)
• offset - (object: {x:#, y:#}) move the iframe up/down, left/right relative to the element
• className - (string) className for the shim; defaults to "iframeShim"
• browsers - (boolean) allows you to specify the browsers that the iframe should show up for; defaults to ie6 or gecko on a mac (Browser.Engine.trident4 || (Browser.Engine.gecko && Browser.Platform.mac)). Example usage: browsers: Browser.Engine.trident4 || Browser.Engine.presto will show for opera and ie6
• src - (string) this is the source of the Iframe. For the most part, you shouldn't mess with this option. We've tested it across numerous environments (particularly https environments), but if you need to, for some reason, alter it, we've exposed it as an option, as your environment may require you try an alternate string. The default is 'javascript:false;document.write("");'.

• onInject - (function) callback executed when the iframe is added to the DOM (which waits until window.onload)

<div id="myFloatingDiv">stuff</div>

var myFloatingDivShim = new IframeShim('myFloatingDiv', {
    display: false,
    className: 'myFloatingDivShimClass'
});

This will reposition the iframe element. Call this when you move or resize the iframe element.

myShim.position();

• (object) This instance of IframeShim

This will hide the iframe shim element. If you don't call this when you hide the element that's over the flash or select list, then that thing will still be obscured.

myShim.hide();

• (object) This instance of IframeShim

This will obscure any form elements or flash elements below the iframe shim element. Call this when you show your floating element.

myShim.show();

• (object) This instance of IframeShim

This will remove the iframe from the DOM.

myShim.dispose();

• (object) This instance of IframeShim

This will remove the iframe from memory.

myShim.destroy();

• (object) This instance of IframeShim

Extends the native Element object with a reference to its IframeShim instance.

myElement.retrieve('IframeShim'); //the instance of IframeShim for the element