Menu
I’m developing a Flash pop-up tool (a user info tool for a training website – not for advertising). I’ve created the swf as a windowless, transparent file. I then embedded it within dual div tags. The first div has a relative position, the second has an absolute position.
I do this so I can change the position of the flash file, so that when the user clicks on the button, the rest of the movie plays out on top (becaue I changed the z-index to 1) of the content above it – giving it a sort of “pop-up” feature.
Here’s the code:
[code=html]<div id= “Layer1″ style=”position:relative; left:0px; top:-355px; width:475px; height:35px; z-index:1″ > <div style=”position:absolute; left:0px; top:0px; width:475px; height:35px”> <object classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ codebase=”http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0″ width=”475″ height=”400″ id=”TrainersTidbit” align=”middle”> <param name=”allowScriptAccess” value=”sameDomain” /> <param name=”movie” value=”TrainersTidbit.swf” /> <param name=”quality” value=”best” /> <param name=”wmode” value=”transparent” /> <param name=”bgcolor” value=”#000000″ /> <embed src=”TrainersTidbit.swf” quality=”best” wmode=”transparent” bgcolor=”#000000″ width=”475″ height=”400″ name=”TrainersTidbit” align=”middle” allowScriptAccess=”sameDomain” type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/getflashplayer” /> </object> </div> </div>
The prototype worked seamlessly in IE and Firefox. But for some reason, my final doesn’t work in Firefox unless I add a blank div (also with a z-index of 1) as a workaround (it was a complete accident that I even tried this). Once I insert that blank div, everything works fine.
Still, I’m posting this for posterity. I want to know if there’s a more correcter ? way to make it work?
I’ve attached the .swf and two .html files so you can see them. The file titled “TrainersTidbit-example.html” doesn’t employ the extra div, and doesn’t work in Fifefox (unless you resize the browser window … weird). However, the file “TrainersTidbit-example-workaround.html” does employ the extra div (see code below), and works.
[code=html]<div id=”Layer1″ style=”position:relative; left:0px; top:0px; width:0px; height:0px; z-index:1″></div>
I’ve also attached the .fla file (MX) in case anyone has any recommendations there as well. I’m still new at Flash, and I’m sure I have a lot to learn.
Any advice would be greatly appreciated. Thanks!
Mason
[upl-file uuid=7defe2c4-78e3-41d7-a99a-6bf796c93ec3 size=98kB]Flash pop-up.zip