Iframe HTML to overlay Flash object ..

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 ..

Code:

<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>

_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>

_Aerospace_Eng_ · 02-26-2007, 01:11 AM

Did you use wmode on the flash?

pixelmonkey · 02-26-2007, 03:41 PM

Quote:

Originally Posted by _Aerospace_Eng_

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...

Code:

            <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?

Code:

            <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>

webbo · 01-24-2008, 04:25 PM

Quote:

Originally Posted by dragonfly

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

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>

09-02-2006, 09:51 PM	PM User \| #1
dragonfly New to the CF scene Join Date: Sep 2006 Posts: 4 Thanks: 0 Thanked 0 Times in 0 Posts	Iframe HTML to overlay Flash object .. Any tips for getting an iframe to overlay Flash content (swf embedded in a div container)? Here is an example of overlay iframe script .. Code: <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.

09-05-2006, 12:24 PM	PM User \| #2
dragonfly New to the CF scene Join Date: Sep 2006 Posts: 4 Thanks: 0 Thanked 0 Times in 0 Posts	Resolved .. 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.

02-23-2007, 08:40 AM	PM User \| #4
_Aerospace_Eng_ Supreme Master coder! Join Date: Dec 2004 Location: In a place far, far away... Posts: 17,190 Thanks: 2 Thanked 732 Times in 713 Posts	http://blog.deconcept.com/swfobject/ __________________ \|\|\|\|If you are getting paid to do a job, don't ask for help on it!\|\|\|\| Get FIREFOX.::.Why Tables for Layout is Stupid?.::.PR Designz.::.OpenDNS

02-23-2007, 09:10 AM	PM User \| #5
felgall Senior Coder Join Date: Sep 2005 Location: Sydney, Australia Posts: 2,276 Thanks: 0 Thanked 23 Times in 22 Posts	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). __________________ Stephen Helping others to solve their computer problem at http://www.felgall.com/ Web related ebooks and software - http://members.felgall.com/ Focus on Javascript - http://javascript.about.com/

02-26-2007, 12:16 AM	PM User \| #6
pixelmonkey New to the CF scene Join Date: Feb 2007 Posts: 5 Thanks: 1 Thanked 0 Times in 0 Posts	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> Last edited by pixelmonkey; 02-26-2007 at 12:33 AM..

02-22-2007, 11:51 PM	PM User \| #3
pixelmonkey New to the CF scene Join Date: Feb 2007 Posts: 5 Thanks: 1 Thanked 0 Times in 0 Posts	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>

02-26-2007, 01:11 AM	PM User \| #7
_Aerospace_Eng_ Supreme Master coder! Join Date: Dec 2004 Location: In a place far, far away... Posts: 17,190 Thanks: 2 Thanked 732 Times in 713 Posts	Did you use wmode on the flash? __________________ \|\|\|\|If you are getting paid to do a job, don't ask for help on it!\|\|\|\| Get FIREFOX.::.Why Tables for Layout is Stupid?.::.PR Designz.::.OpenDNS

05-18-2008, 09:51 PM	PM User \| #10
Argneka New to the CF scene Join Date: May 2008 Posts: 1 Thanks: 0 Thanked 0 Times in 0 Posts	Still does not work 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>

Thread Tools
Show Printable Version Email this Page
Rate This Thread
Rate This Thread: