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>

---

Flagitious

I'd recommend you to add your solution as an answer and mark is as teh correct answer, as per SO understanding. – Input

hmm, I already marked an answer below. – Flagitious

@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 jttech.com.hk/design.php thanks for your attention. – Madancy

@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 – Flagitious

@Ibn Saeed appreciate your response very much =) I was just trying my luck in case you are still working with creating websites. Thanks! – Madancy

@Jake, you should Ask a new Question for your issue, someone will help out. – Flagitious

@Jake, try entrying adding " swfobject.switchOffAutoHideShow(); " – Flagitious

@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. – Madancy

@Jake, excellent. You may add your solution for Chrome as an answer. – Flagitious

Answer 1

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"}
);

Kessel

Thanks, your solution also worked. And it was less verbose :) – Flagitious

Answer 2

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.

Randolph

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. – Flagitious