Puzzle: different domain iframe needs to dynamically “overlap” parent content

Question

This should be a fun puzzle for you Stack Overflow geniuses:

I'm building a browser plugin that will inject a div , script , and iframe into the markup of whatever page the client is viewing. The purpose is to anchor a toolbar onto the bottom of every page ( StumbleUpon does this for Chrome). Here's the code that is placed before </body> :

<div id="someID1" style="position: fixed; bottom: 0px; left: 0px; width: 100%; height: 100%; background-color: transparent;">
    <iframe id="someID2" src="http://www.example.com/iframeContent.html" frameBorder="0" scrolling="no" style="background-color: transparent; margin: 0px; height: 100%; width: 100%; padding: 0px;"/>
</div>

This toolbar ( iframe ) will be hosted on our server and has pop-out panels. When a user clicks to open a menu, the menu vertically extends the toolbar (eg, toolbar height is 35px; with panel is 100px).

I can accomplish this in Safari, Firefox, and Chrome by having my toolbar sit on top of everything on a transparent background (ie, height: 100% and background-color: transparent for both the div and iframe ). But this doesn't work for IE7, IE8, IE9.

I've tried (1) doing background: blank.gif instead of background-color: transparent, and (2) injecting a script into the parent with a resizing function that I could call on with parent.resizeFunction(height) ("resource denied")

Any ideas on how to solve this?? Thanks so much!

Answer 1

I have to run so I can't test it, but IE seems to listen to the non-standard ALLOWTRANSPARENCY property.

When the property is set to false, the backgroundColor property of the object can only be that of the window. When the property is set to true, the backgroundColor property of the object can be set to any value, including the default value of transparent.