I found a bevy of links explaining why you had to set an embedded SWF’s wmode property to either “opaque” or “transparent” to get a div placed on top of it to show properly, but yesterday at work I was experiencing another strange error. First, the setup: on one of our pages, we’ve got a pretty prominent SWF taking up the majority of the page (embedded in a div via SWFobject). Below the SWF is some text and a few places for user-entered data. Rather than linking away from the SWF page, my goal yesterday was to AJAXify everything and keep it all one one page. Since we were already using the YUI Rich Text Editor elsewhere, I decided to give their dialog code a shot. It worked just as expected, with one…major…snag. Every time you close a dialog (either through a submit, cancel, or clicking on the little “x” that it sticks on them), the dialog would disappear. And it would take the swf with it. Okay, really, it would take the SWF’s container div with it. I’m pretty sure this is some kind of weird z-order thing (though the SWF was set to z-order of zero and the YUI dialog had a z-order of 1) orchestrated by the YUI code on top of the in-place markup, but it was kind of a pain. I knew the content was still there, though, because if I scrolled the page juuuuust so, the swf would appear for a moment.

Another oddity: one of the “popup” dialogs displayed a history of changes. Because this was the piece of data I’ve been using to test for the last few weeks, there was a LOOOT of history (scroll-bars, coming soon to a page near you). When the dialogs opened for the first time, the page would grow to accommodate the new dialog. When the dialogs closed, though, the page would remain “stretched out.” Which means that somewhere in the YUI code, they’re not actually removing the content when you close the dialog–they’re merely obfuscating the contents somehow. Rather than read through several hundred lines of YUI javascript, I did a test.

The YUI dialogs make use of a div with an id of “hd” for the header and “bd” for they body. The header is only a line, so it wasn’t worth fussing with. Using the YUI custom event model, I added some code to listen for the cancel/submit/hide calls and take the extra step of setting the “bd” div’s CSS style to “display:none”. Blammo. Everything works fine. The page shrinks back down to its proper proportion and–wonder of wonders–the SWF div stays visible and on top.