CODEWITHSUNDEEP
javascriptjqueryiframe
Marquinio
Marquinio

Reputation: 4831

Iframe transparency issue

I have iframes to represent the pull-down menu. Problem is that when the iframe is displayed, I can see the content from the parent page.

Is there a way not to make an iframe transparent? 

jQuery('<iframe id="accountframe" style="position: absolute; width: 290px; height:     140px;  margin-top: 0px;  margin-left: 0px; top:0px; left:0px; text-align:left overflow:hidden; allowTransparency:false"  src="test.jsp" ></iframe>').appendTo('#account');

I'm using jQuery to dynamically add/remove the iframe. I already tried allowTransparency:false as a style sheet and also allowTransparency="false" as an attribute, but both ways is not working.

Thanks.

Upvotes: 0

Views: 718

Answers (2)

Ishan Jain
Ishan Jain

Reputation: 8171

There is some mistake in your code: allowTransparency is not a CSS property. The allowtransparency is a attribute on the iframe element. And you write allowTransparency as a CSS property.

Try with this code - 

jQuery('<iframe id="accountframe" style="position: absolute; width: 290px; height:140px; margin-top: 0px; margin-left: 0px; top:0px; left:0px; text-align:left overflow:hidden;" allowTransparency="false" src="test.jsp" ></iframe>').appendTo('#account');

There is article for this

As you mention you also try allowTransparency="false" as an attribute, but if you want to make your IFrame transparent. You need to set allowTransparency="true" on Iframe.

Be sure both the IFRAME and its source BODY element have a background:transparent style rule applied:

<iframe frameborder="0" allowTransparency="true" style="background:transparent" ... ></iframe>

and in the source:

<body style="background:transparent">

PS: CSS styles above are inline just for example.

Try This:

jQuery('<iframe id="accountframe" style="position: absolute; width: 290px; height:140px; margin-top: 0px; margin-left: 0px; top:0px; left:0px; text-align:left overflow:hidden;" allowTransparency="true" src="test.jsp" ></iframe>').appendTo('#account');

Upvotes: 0

Timothy Groote
Timothy Groote

Reputation: 8652

how about allowTransparency="true" ? Since you do want it to be transparent?

It would also help to set background-color:transparent on the iframe, and to make sure that the page you load into the iframe does not define a background color in its body.

Upvotes: 2

Related Questions