Sunday, August 31, 2008

Overlay DHTML popup on top of a Flash movie

Just solved a tricky overlay problem, at least a pretty tricky problem for someone like me who do not work with Flash a lot, and thought to jog down some notes here in my day log.

I ran into a overlay problem today when using RichFaces Calendar component with Open Flash Chart, for some reason the pop-up date picker overlay generated by the Calendar component kept staying behind the Flash movie used by Open Flash Chart. Firstly I tried playing with z-index with both of the calendar and flash div had no luck. After some research found out that apparent this is caused by how browser treats Window and Windowless flash differently. By default flash has its window mode set to "window", and as result the browser will always render it on top level in its own window, therefore no matter how you set the z-index the overlay will not be able to go over on top of the flash movie. To fix this issue you need to change the flash wmode parameter to either "opaque" or "transparent" by adding a new parameter in the object tag:

<param name="wmode" value="transparent"></param>

or wmode attribute to the embed tag:

<embed src="..." wmode="transparent"></embed>

To have the Flash rendered in the Windowless mode, which will allow the browser to render Flash as a regular internal layer hence can be covered by a DHTML overlay.

Note: Adding wmode only to the object tag will work for IE but not Firefox.

No comments: