Make an Iframe and all it's content transparent

davideo7
davideo7 used Ask the Experts™
on
I have a chat box which I made and when a user submits a message, message gets submitted to an iframe.  Now the iframe is transparent but when you submit a message or receive a message, it blinks white which means, for a brief second it's not transparent but instead has a white background, this is not a problem in Internet Explorer, just Firefox.  How can I fix this?

If you want to test out what I mean, go here and send a few messages
http://www.vizzed.com/vizzedboard/retro/playtest.php?id=8874
But you'll need to register first here
http://www.vizzed.com/vizzedboard/index.php
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
why don't you try to reduce the opacity of the iframe or the div (having the content) inside?
document.getElementById("elementId").style.opacity = "0.2";

Altin BardhiSoftware Engineer
Commented:
You can try to use the following CSS code on the body of the iframe page:

body{ -khtml-opacity:.01; -moz-opacity:.01; -ms-filter:”alpha(opacity=01)”; filter:alpha(opacity=01); opacity:.01; }

Author

Commented:
albacom: When I apply that css to the iframe, it gets rid of the white stuff but it also gets rid of the content within the iframe.  How can I make the layer of the iframe's content get dynamically placed on to the parent iframe so that it's not being affected by the alpha of it's own frame?
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Altin BardhiSoftware Engineer
Commented:
Ok you can do so by setting the opacity to the main wrapper div and position the contents absolutely on the top of it:

<body>
<div id = "main_wrapper" style="margin:0px; padding:0px; width:100%; height:100px;">
//nothing goes here as it will be transparent along this div


//here is the contents div separated from opacity efect
<div id="content" style="width:100%; height:400px; position:absolute; left:0px; top:0px;" >

<p>Here is some content</p>

</div>

</body>

I have not tested this but if it doesen't work then set the opacity back to the body tag and place the contents out of it.

Author

Commented:
Still doesn't help.
Altin BardhiSoftware Engineer

Commented:
Try  allowtransparency="true" on the iframe like in the example below.

Just to make sure: Is your problem in IE or Firefox?
Main page with an Iframe as msg box

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Transparent iframe</title>
<style type="text/css">
#main_wrapper{
margin:0 auto;
width:80%;
height:800px;
background:#6600CC;
position:relative;

}
#chatbox{
margin:0px;
padding:0px;
width:260px;
height:380px;
border:#666666 7px solid;

position:absolute;
left:100px;
top:100px;
overflow-x:hidden;
overflow-y:scroll;
}
</style>
</head>

<body>

<div id="main_wrapper">
	<iframe id="chatbox" src="chatboxText.html" allowtransparency="true">
	<p>Your browser does not support iframes.</p>
	</iframe>
</div>

</body>
</html>


//Iframe content page  ... chatboxText.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body style="width:80%; /*Remove horizontal scrollbar on IE6*/">
<p id="text">This is a message from: .... </p>
<p id="text">This is a message from: .... </p>
<p id="text">This is a message from: .... </p>
<p id="text">This is a message from: .... </p>
<p id="text">This is a message from: .... </p>
<p id="text">This is a message from: .... </p>
<p id="text">This is a message from: .... </p>
<p id="text">This is a message from: .... </p>
<p id="text">This is a message from: .... </p>
<p id="text">This is a message from: .... </p>
<p id="text">This is a message from: .... </p>
<p id="text">This is a message from: .... </p>
<p id="text">This is a message from: .... </p>
<p id="text">This is a message from: .... </p>
<p id="text">This is a message from: .... </p>
<p id="text">This is a message from: .... </p>
<p id="text">This is a message from: .... </p>
<p id="text">This is a message from: .... </p>
</body>
</html>

Open in new window

Author

Commented:
The problem is in Firefox.  That doesn't help.
Altin BardhiSoftware Engineer
Commented:
Ok, when you're clicking on submit message button, you are submitting to: http://www.vizzed.com/vizzedboard/chat/chathandler.php and targeting the "chat" Ifame. The white background appears in this case.

Now this means that we need to not set backgrounds on the "chathandler.php" page and any of its child elements.

I have no access to this page or "chatdata.php". We need to make sure this pages and Iframes are transparent. You can check these files to see for any errors. Maybe make them transparent or use innerHTML when you submit the data.

Do some testing on these pages and see how it goes. If not then you can send the code of this pages.

Good luck

Author

Commented:
This didn't fix the problem but it certainly helped.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial