Topic: IFrame allowTransparency Pages that link to <a href="https://ozoneasylum.com/backlink?for=26334" title="Pages that link to Topic: IFrame allowTransparency" rel="nofollow" >Topic: IFrame allowTransparency\
 
Author Thread
WarMage
Maniac (V) Mad Scientist

From: Rochester, New York, USA
Insane since: May 2000

 IP logged posted posted 07-27-2005 19:44 Edit Quote

I have an IFrame that has content in it. This content will expand and contract in size.

The WD has set this page up so that it loads 500px high, and then sets allowTransparency="true". What this does is causes the content to show up, and the rest of the frame to be transparent, so when you change the size of the content it appears to adjust on the fly.

The problem is that if you set allowTransparency select objects that are under the iframe will now show through the content.

Is there a way to set this up so that either the iframe will resize with the iframe's content? Or is there a way via CSS to only allow a certain portion of the iframe to be opaque?

The application needs to run in IE6 and that is where the problems are cropping up.

Any ideas would be appreciated.

Thanks,

Dan @ Code Town
reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

 IP logged posted posted 07-27-2005 20:10 Edit Quote

link or source code, please
WarMage
Maniac (V) Mad Scientist

From: Rochester, New York, USA
Insane since: May 2000

 IP logged posted posted 07-27-2005 20:33 Edit Quote

Kind of hard to do, this is all running through abouth 12 different pipelines. I think I can provide a testcase.

I am thinking dynamically resizing the iframe based on the height of the scr content. Should be a fun little hack.

code:
<html>
	<head>
		<title>Test</title>
		<script type="text/javascript" src="WCH.js"></script>
		<script type="text/javascript" src="slider.js"></script>
		<style type="text/css">
    	
			#testDiv {
       	position: absolute;
				top: 0;
				left: 0;
				background: black;
				width: 200px;
				height: 200px;
				z-index: 2;
			}

			#testFrame {
       	position: absolute;
				top: 0;
				left: 0;
				width: 200px;
				height: 200px;
				z-index: 1;
				background: transparent;
				border: none;
			}
			
		</style>
	</head>
	<body>
		<p>
   	<select>
			<option>Option 1</option>
		</select>
		</p>

		<div id="testDiv">
    	<p>Some data</p>
		</div>

		<iframe allowTransparency="true" id="testFrame"></iframe>

	</body>
</html>



See how the select shows through. If you remove the allowTransparency it doesn't show through anymore. (IE only).

Now, in the real example there would be only a small subsection of the ifram with content to be displayed, the rest would be transparent.

I am thinking that a dynamic resize might be the best option here.

Dan @ Code Town
reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

 IP logged posted posted 07-27-2005 20:49 Edit Quote

Sorry I guess I should've explained why I wanted the source - I don't understand why you need an iframe at all, ...or an iframe positioned over a select box.
WarMage
Maniac (V) Mad Scientist

From: Rochester, New York, USA
Insane since: May 2000

 IP logged posted posted 07-27-2005 20:57 Edit Quote

I also had lots of questions like that, but it all boils down to thats just the way it is.

The web developer is developing using iframes. There are select boxes behind the iframe.

My position affords me the honor of coming in and fixing things once they get really mucked up.

Dan @ Code Town
reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

 IP logged posted posted 07-27-2005 21:55 Edit Quote

So the problem is just that you don't want to see a selectbox in IE?
WarMage
Maniac (V) Mad Scientist

From: Rochester, New York, USA
Insane since: May 2000

 IP logged posted posted 07-27-2005 22:22 Edit Quote

The problem is that I do not want the selection box to show threw the iframe's opaque content when alltransparency="true".

This is a know issue with IE. There is a hacky work around and that involves placing an iframe 1 z-index below the element you are displaying above the selection box. The problem now is, I have an iframe above the selection box, but it must be set to allowtransparency, which cancels out the nifty effect of covering the select.

It is just a fun little problem that I have yet to figure out the proper work around for.

Dan @ Code Town
WarMage
Maniac (V) Mad Scientist

From: Rochester, New York, USA
Insane since: May 2000

 IP logged posted posted 07-27-2005 22:46 Edit Quote

I got a solution from the Joe King's Blog. If you look under the section on "What about transparency?" there is a solution. I now have a second iframe following the first iframe with the filter applied.

Glad that one is resolved.

Dan @ Code Town
TwoD
Bipolar (III) Inmate

From: Sweden
Insane since: Aug 2004

 IP logged posted posted 08-09-2005 18:49 Edit Quote

I've tried to use that kind of solution to cover a live video-feed (as described in a thread in the DHTML/JS section) to catch the onmousedown event over the <object> tag holding the feed. (It's set up for two-way communication between you and a miniature tank). However that seems futile since the background of the page is shown instead of the video wherever I position the iframe. I've even tried to contact Joe King about this problem but he's not replied...

/TwoD
H][RO
Bipolar (III) Inmate

From: Australia
Insane since: Oct 2002

 IP logged posted posted 08-13-2005 01:50 Edit Quote

How do you access the select item if there is a layer above it? doesnt this stop that.

In that case im assuming you are using javascript to remove the iframes at some point in time, so you could have also done the opposite and removed he select box with javascript.

I notice this is actually what the commonwealth bank does with their pulldown menu's which go over a select box, they hide some elements which would normally be a problem. Either way is a little hack i guess but its the nature of the elements =/ (or just IE?)

I'm doing a new project which will have tonnes of iFrames so that I can make it more user friendly, its only for backend management so I don't have to worry about search engines or the page working on many browsers - otherwise i wouldnt be touching them.
TwoD
Bipolar (III) Inmate

From: Sweden
Insane since: Aug 2004

 IP logged posted posted 08-16-2005 00:00 Edit Quote

H][RO: Yes, the layers and iframes are only there when they need to, at other times you have free access to the selectbox.
Joe King mentiones why people don't want to temporarily hide the selectboxes, visitors actually think it's a bug!
In some cases it might not be favourable to hide all the windowed objects, as in my case with the video stream and onmousedown events...

/TwoD
BillyRayPreachersSon
Bipolar (III) Inmate

From: London
Insane since: Jul 2004

 IP logged posted posted 03-23-2009 18:23 Edit Quote
quote:

WarMage said:

I got a solution from the Joe King's Blog. If you look under the section on "What about transparency?" there is a solution. I now have a second iframe following the first iframe with the filter applied.

Glad that one is resolved.



Thanks for that idea, Dan... I had just such a problem yesterday. Having 2 iframes sorted it quite nicely.

The only issue I see now in IE6 (when over select elements) and IE7/8 (when over ActiveX, e.g. Flash) is that my iframe which has rounded corners shows a solid background for the part of the corner that is transparent - but I think there's no getting around that one, so I'll live with it!

Dan

(Edited by BillyRayPreachersSon on 03-23-2009 18:24)
sandyvicky
Obsessive-Compulsive (I) Inmate

From:
Insane since: Oct 2009

 IP logged posted posted 10-29-2009 17:53 Edit Quote

Edit TP: Aggressive anti spam stance applied.

(Edited by Tyberius Prime on 10-29-2009 18:20)


Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« Backwards — Onwards »

Show Forum Drop Down Menu