I have a flex app that I want to hide in a div until the user clicks a link or element of some type. I've noticed that embedding the swf in a div with style display:none does not actually hide the swf, so how would I go about acplishing this?

The goal is to have the flex app loading in the background while the user does other things. Thanks.

I have a flex app that I want to hide in a div until the user clicks a link or element of some type. I've noticed that embedding the swf in a div with style display:none does not actually hide the swf, so how would I go about acplishing this?

The goal is to have the flex app loading in the background while the user does other things. Thanks.

• javascript
• html
• apache-flex
• flash

Share Improve this question Follow asked Jul 22, 2009 at 21:01 Stefan KendallStefan Kendall 67.9k6969 gold badges258258 silver badges409409 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Try setting the following wmode to your flash object, and use visibility: hidden; as well.

<param name="wmode" value="opaque" />
<embed ... wmode="opaque" ... />

By default, flash basically overlays a window over your content, which is:

1. Has a greater z-index than anything on your page
2. Doesn't inherit display from its parent (setting display: none; visibility: hidden; to the <object> tag will work).

By setting wmode to opaque, it basically tells flash to treat your <object> as a normal DOM tag, which responds to normal inheritance and z-index rules. It has a very small performance cost.

Also, note that some browsers will not load the object until it is displayed.

I usually just force the height/width of the container to 1 by 1 px...

<div style="height:1px; width:1px;" >... flash goes here ...<div>

Then, when I need the flash, I will re-set the height/width as appropriate. Note, you may want to put this into a parent container if you want to just reset the hw to "100%" which will bind to a parent div, with a "position:relative; height:?px; width:?px" setting.