Iframe HTML to overlay Flash object .. [Archive]

dragonfly

09-02-2006, 09:51 PM

Any tips for getting an iframe to overlay Flash content (swf embedded in a div container)?

Here is an example of overlay iframe script ..

<iframe id="myIframe" name="myIframe" height="200" width="200" border="0" scrolling="no" marginwidth="0" marginheight="0" frameborder="1" vspace="0" hspace="0" style="position: absolute; left: 50px; top: 100px; display: ; z-index: 99; " >
</iframe>

HTML content is written dynamically into this iframe and HTML content can be seen working in both IE and Firefox browsers when the iframe is positioned outside the Flash content area.

But when the iframe is positioned to overlay the Flash content ..

(a) in IE browser, the iframe correctly overlays the Flash content

(b) in Firefox 1.5 the iframe is hidden behind the Flash content. Changing z-index does not seem to help.

...

The main problem to solve is getting consistency of "iframe above Flash" across browsers.

There is another problem .. in IE the iframe goes out of focus and is hidden when the Flash content is clicked; but I guess that can be solved with some extra javascript to bring iframe back into focus.

dragonfly

09-05-2006, 12:24 PM

Resolved after trial and error ..

(a) place Flash embed script in <div> container (I use SWFObject.js)

(b) add wmode=transparent to Flash embed script

(c) set <div id="flashcontent"> container with z-index:-1;

(d) set <body> tag with style .. position:relative;left:0px;top:0px;z-index:0;
(otherwise Firefox does not accept negative z-index)

(e) set floating iframe in container with z-index: 99;

(f) use CSS to position flashcontent and htmlcontent containers.

...

Now the iframe htmlcontent should be positioned above Flash.

pixelmonkey

02-22-2007, 11:51 PM

can anyone add to this... i'm at the same point as his first post.

maybe details and an example site that's using the swfobjects.js ?

thanks!
chris<pixelmonkey>:D

_Aerospace_Eng_

02-23-2007, 08:40 AM

http://blog.deconcept.com/swfobject/

felgall

02-23-2007, 09:10 AM

Note that iframes ALWAYS appear in front in Opera 8.5 and earlier so that with those browsers you don't get a choice to put anything in front of an iframe (fortunately you want the iframe in front anyway).

pixelmonkey

02-26-2007, 12:16 AM

i have everything working, but still cant get the iframe to stay in focus. the frame will remain in focus when clicking on the main html pages content, but if a user clicks on the flash object that is supposed to remain in the background, it causes the iframe to go to blur.

i've tried the below script which gives the above effect...
<script>
document.getElementById('myIframe').focus();
document.getElementById('flashcontent').blur();
</script>

anyone have a snipplet that will make an iframe remain in focus at all times?

chris<pixelmonkey>:D

_Aerospace_Eng_

02-26-2007, 01:11 AM

Did you use wmode on the flash?

pixelmonkey

02-26-2007, 03:41 PM

Did you use wmode on the flash?

so with wmode added to the object before altering the code for the SWFObject.js , it will look like the below...

<object width="550" height="400">
<param name="wmode" value="transparent">
<param name="movie" value="somefilename.swf">
<embed src="somefilename.swf" width="550" height="400" wmode="transparent">
</embed>
</object>
how would the wmode and the param name of wmode and value of transparent be plugged into the code below?

<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("somefilename.swf", "sotester", "900", "520", "8", "Black");
so.addVariable("flashVarText", "this is passed in via FlashVars for example only"); // this line is optional, but this example uses the variable and displays this text inside the flash movie
so.write("flashcontent");
// ]]>
</script>

the snipplet above is used to work with SWFObject.js

thoughts?
chris<pixelmonkey>:D

webbo

01-24-2008, 04:25 PM

Resolved after trial and error ..

(a) place Flash embed script in <div> container (I use SWFObject.js)

(b) add wmode=transparent to Flash embed script

(c) set <div id="flashcontent"> container with z-index:-1;

(d) set <body> tag with style .. position:relative;left:0px;top:0px;z-index:0;
(otherwise Firefox does not accept negative z-index)

(e) set floating iframe in container with z-index: 99;

(f) use CSS to position flashcontent and htmlcontent containers.

...

Now the iframe htmlcontent should be positioned above Flash.

Saved my life :thumbsup:

Argneka

05-18-2008, 09:51 PM

Hi,

I went through and the examples and I am able to display the iframe and swf file, but I am unable to overlay the swf over iframe. Here is a sample of my HTML.

Thanks,

Alan

<body>
<form id="form1" runat="server">
<script type="text/javascript" src="swfobject.js"></script>

<div id="flashcontent" >

</div>

<script type="text/javascript">
var so = new SWFObject("movie.swf", "mymovie", "400", "200", "8", "#336699");
so.write("flashcontent");
so.addParam("wmode", "transparent");

</script>

<iframe id="frame1" name="frame1" runat="server" border="0" scrolling="no"
marginwidth="0" marginheight="0" frameborder="1" vspace="0" hspace="0"
style="position: absolute; left: 9px; top: 100px; z-index: 99; width: 554px; height: 475px;" >
</iframe>

</form>
</body>