How to prevent Javascript Menu from getting hidden under Flash Video (SWFObject )

Question

How to prevent Javascript Menu from getting hidden under Flash Video (SWFObject ).

I am using Open Flash Chart and the chart is displaying fine in my php shoppping cart, but my javascript menu is getting hidden behind the Flash Chart.

How to correct this problem?

Here is my script code:

<script type="text/javascript">

swfobject.embedSWF(
  "open-flash-chart.swf", "Dashboard_Chart",
  "800", "400", "9.0.0", "expressInstall.swf",
  {"data-file":"ofc-chart.php"} );

</script>

UPDATE (Solved):

I found the solution.

Here is my new code which works and the menu shows up fine.

<script type="text/javascript">
    var flashvars = {};
    var params = {};
    params.wmode = "opaque";
    var attributes = {};
    swfobject.embedSWF("../swf/open-flash-chart.swf", "Dashboard_Chart", "760", "300", "9.0.0", "expressInstall.swf", {"data-file":"ofc-chart.php"}, flashvars, params, attributes );

</script>

I'd recommend you to add your solution as an answer and mark is as teh correct answer, as per SO understanding. — Paulo Santos, Jul 04 '09 at 09:44
@Ibn Saeed sorry for raking up the past. But I have this problem in Chrome at this moment and this solution did not work. Do you have the problem now? check http://jttech.com.hk/design.php thanks for your attention. — Jake, Jun 15 '11 at 04:22
@Jake, i have not worked on this for more than 1 year. I do not have the code for it anymore. Sorry for not being of any help — Ibn Saeed, Jun 15 '11 at 10:31
@Ibn Saeed appreciate your response very much =) I was just trying my luck in case you are still working with creating websites. Thanks! — Jake, Jun 15 '11 at 11:55
@Jake, you should Ask a new Question for your issue, someone will help out. — Ibn Saeed, Jun 15 '11 at 18:32
@Jake, try entrying adding " swfobject.switchOffAutoHideShow(); " — Ibn Saeed, Jun 15 '11 at 18:35
@Ibn Saeed, thanks for your help. I managed to solve the problem by comparing my code with an existing website which has very similar situation as mine. — Jake, Jun 16 '11 at 03:01
@Jake, excellent. You may add your solution for Chrome as an answer. — Ibn Saeed, Jun 16 '11 at 03:15

score 3 · Accepted Answer · answered Jul 04 '09 at 09:42

3

Try setting the wmode parameter to transparent

swfobject.embedSWF("open-flash-chart.swf", "Dashboard_Chart","800", "400", "9.0.0",
   "expressInstall.swf",
   {"data-file":"ofc-chart.php"},
   {"wmode":"transparent"}
);

answered Jul 04 '09 at 09:42

Rafael

18,349
5
58
67

Thanks, your solution also worked. And it was less verbose :) – Ibn Saeed Jul 04 '09 at 09:43

score 1 · Answer 2 · answered Jul 04 '09 at 09:43

You need to set the wmode to opaque (or transparent). This delegates rendering to the browser and allows z-index elements to sit above the Flash content. Example:

<script type="text/javascript">
var flashvars = {};
var params = {};
params.wmode = "transparent"; 
//params.wmode = "opaque"; 
var attributes = {};
swfobject.embedSWF("myContent.swf", "myContent", "300", "120",
    "9.0.0","expressInstall.swf", flashvars, params, attributes);
</script>

Comes with a number of disadvantages, such as broken internationalisation and slower rendering speed, but it will get the Flash under your menu.

I used opaque and i did not notice any delay with the flash. The adobe help shows: #Opaque: makes the application hide everything behind it on the page. ----- #Transparent: makes the background of the HTML page show through all the transparent portions of the application and can slow animation performance. — Ibn Saeed, Jul 04 '09 at 10:16

How to prevent Javascript Menu from getting hidden under Flash Video (SWFObject )

2 Answers2

Linked