Question

I have a swf that requires flash 9, and I’m trying to show content over it. To facilitate this, I’ve set wmode to transparent. The problem is, this ONLY works when the user has flash 10 installed, and I really don’t want to require flash 10 to view the content on the site I’m working on. When I pull up a div over the flash content with flash 9, the swf bleeds into or completely overwrites the div.

How can I prevent this without making flash 10 a user requirement?

I’m using swfobject to embed the swf and jquery-ui to display divs over the flash content.

EDIT:

This failure behavior is only noted in Safari.

Answer 1

I’m not sure if this will help you per se. But I’ve used following method to show content over flash.

I had faced this problem some time ago. I was to show user a popup for Terms and Conditions for registration on a site. Popup was coming okay, but There was a flash movie at top of the page which was hidding upper portion of the dialog. The tested and widely used method is to put an Iframe at place where you want to show your content and absolute position your content and IFrame. For example, if you want to show a div above a flash movie, then place a IFrame like follows:

    <iframe style="position:absolute;top:250;left:150;"></iframe>

Then position the div exactly above this iframe like:

    <div style="position:absolute;top:250;left:150;"></div>

I was using jquery on the page to show dialog using ui.dialog plugin.
After fooling around sometime I devised following simple solution.

1) put id attribute on movie element to uniquely identify the movie object. Like,

<object id="movie1"></object>

2) before showing the dialog (or other content for that matter) call a javascript function to hide the movie. Like,

$("#movie1").css("display","none");

3) now show dialog. Like,

$("#dialog").dialog("open");

4) after closing the dialog, show the movie again. Like,

  $("#dialog").dialog("close");
  $("#movie1").css("display","inline");