Generated IFrame Transparency

[phb5000]

Hi,

I'm having an issue regarding transparency (in IE) with generated IFrames. By generated I mean that I've dynamically created the iframes using javascript:

function addTest()
{
	var m = document.getElementById('objMain');
  	var wnd = document.createElement('iframe');
	wnd.setAttribute('allowtransparency', 'true');
	wnd.setAttribute('src', "test.htm");
	m.appendChild(wnd);
}

However, when I use my script in IE the page does NOT become transparent even though I'm using the "allowtransparency=true" attribute and "test.htm" has a "background-color" set to "transparent". However, it all works in firefox.

When I added the same iframe that is generated by the script manually (hard coded onto the main html page) everything works fine in both IE and firefox.

Any suggestions?

[pcbrainbuster]

Well I don't have much experince at iframes seeing sa how I never need them but I can help you -

First of all make sure you use browser detection, once you got that set up for IE you can use filters and make your iframe transparent (use the alpha filter)...

[mburt]

wnd.setAttribute('allowtransparency', 'true');

allowtransparency is not a valid function. Look at a png or gif image mask, it's probably the most cross-browser way of doing things.

[phb5000]

allowtransparency is a valid attribute

And the issue is not getting transparency to work.
The issue is:
- Transparency work when I hard-code the iframe
- Transparency doesn't work (in ie) when I generate the iframe

If I add an iframe with a source page with a transparent background image the transparency does not work in IE unless I set "allowtransparency" to "true".

[mburt]

Transparency doesn't work (in ie) when I generate the iframe

Okay, more to the point, it's not standard.

On the page you include the iframe, you can you a floating div:

<style type="text/css">
.transparent {
position:absolute;
left:25px;
top:25px;
z-index:100;
width:100px;
height:100px;
filter:alpha(Opacity=50);
opacity:0.5;
-moz-opacity:0.5;
-khtml-opacity:0.5;
}
</style>
...
<div class="transparent"></div>

[phb5000]

From what I understand and see (when I test this solution) all that happens is that it makes the content of the content of the iframe transparent or everything in the iframe transparent (depending on where you place your overlay div).

I wish to make the IFrame itself transparent: a transparent background of the iframe, not its content. (maybe i wasn't clear enough earlier).

Every single google result that I find regarding "iframe transparency" says to include the allowtransparency attribute and a background style set to transparency. Which works except when generate my iframe

(IFRAME documentation: )

[phb5000]

Ok, nevermind, I finally managed to solve the problem. The reason why transparency didnt work in IE was because I was generating the IFRAME in the wrong way for IE (in my javascript).

I solved it by using this method instead:

function addTest()
{
	var m = document.getElementById('objMain');
  	
	if (document.all)
	{
		m.insertAdjacentHTML("beforeEnd",
			"<IFRAME SRC='lols.htm'
                             ALLOWTRANSPARENCY='true'></IFRAME>");
	}
	else
	{
		var wnd = document.createElement('iframe');
		wnd.setAttribute('src', "lols.htm");
		m.appendChild(wnd);
	}  	
}

m.insertAdjacentHTML for IE
m.appendChild for firefox

Thanks for the help anyways!

[mburt]

Use .innerHTML instead for IE (I don't like either, you should use appendChild, but in this case innerHTML is better). I believe insertAdjacentHTML doesn't even work in lower versions of IE.