Scott Barrett

The DOM is like an Ogre — it has layers… lots and lots of layers…

This way of thinking was key to the solution I found to a very interesting problem a friend of mine presented.

Problem: Integrating a Flash game that uses the up and down arrows into a new site with drop down menus. The menus need to sit on top of the flash game, so wmode=transparent must be used. As we know, Z-index does not work when a flash piece is running in the default “window” mode. Because the page is longer than the viewable area, it needed to scroll and in IE7, when hitting the up and down arrows in the game, the whole page would scroll. Essentially when the flash piece runs in wmode=transparent|opaque, IE7 captures the keystrokes along with the flash piece.

What do we want: We want the user to be able to use the up and down arrows without the page scrolling and the key presses registering in the game like it does in all other browsers.

Solution: overflow:auto

I wrapped the flash content div in a wrapper div the exact height of the flash movie and set its overflow property to auto. What this does is put the scrolling/key capturing focus on that div instead of the document when you click on the flash piece and play the game. Because the wrapper div is the exact height, there is nothing to scroll and all works well, flash registers the key presses and the screen does not move.

Sample:

<div id="gameWrapper" style="height:400px; overflow:auto">
<div id="flashContent">Flash will load here via SWFObject call. The flash movie is 400px in height and has the param.wmode set to "transparent|opaque"</div>
<div>

I was shocked I could not find this solution as easily online as I’d hoped. I did find a few examples of this after I figured it out, but the posts were very difficult to read made a simple solution look terribly difficult.