flex 3 and javascript layering issue

Question

Hi guys.

I have a flex object embedded in a velocity page. Above the flex object i have my navigation bar which has a number of drop down components built with Javascript.

When i click on the drop down list they appear to be falling behind the Flex object. Its like as if the Flex object is ontop of the layer the Javscript is on.

Has anyone had this issue and found a workaround?

Thanks

Answer 1

Well, flex app is just a SWF, so I would imagine the solution is the same as what you do in that world, which I believe is to publish it as transparent and to set the wmode attribute of the <object> tag to "transparent" as well.

Answer 2

how can i publish as transparent?

Answer 3

You don't have to publish the SWF as transparent (which you'd do, in Flex, by setting the backgroundAlpha CSS property on the Application node to 0) unless there are portions of the SWF through which you'd like to see content of your HTML page. But yes, there are two things you want to make sure of:

1. Make sure the z-index property (as set with CSS positioning) of your SWF is lower than that of the JavaScript/DHTML drop menus, and

2. Add wmode="transparent" attributes to the object and embed tags of your SWF object. (More info from the Flex docs here.)

That ought to do it. Hope it helps!