Tuesday, February 10, 2009

Extremely Old IE6 IFrame Hack Alternative

I never saw anybody else do the ie6 iframe hack this way (using insertAdjacentHTML) and it always seemed simpler to me because you can skip the positioning step if you're not doing overly crazy CSS.  I found my extremely old menu code today and still feel like it's worth sharing.
Here, show_obj is your DOM element that you want to show above select dropdowns. 

frameid=show_obj.id+"_shim";
show_obj.insertAdjacentHTML("afterBegin","<iframe scrolling=no id='"+frameid+"' style='position:absolute; top:0; left:0; display:hidden;' src='javascript:document.write(&nbsp);'>&nbsp;</iframe>");
wobj = document.getElementById(frameid).style;
wobj.zIndex = -1;
wobj.width = show_obj.offsetWidth;
wobj.height = show_obj.offsetHeight;
wobj.display = 'block';

Then when you hide your element you can just delete the frame ( document.getElementById(frameid).removeNode(true); ).  Sure it's javascript that only works in IE, but it's fixing an IE bug, so no big deal.

Or just using the jQuery bgiframe plugin.

No comments: