Jquery script appearing under Flash

Question

I have a jquery script box that opens up and it appears behind my flash.

The javascrip that runs the flash is

      // JAVASCRIPT VARS
      // cache buster
      var cacheBuster = "?t=" + Date.parse(new Date());       

      // stage dimensions
      // if you define '100%' then the swf will have the browser dimensions
      var stageW = "330";//"100%";
      var stageH = "435";//"100%";


      // ATTRIBUTES
      var attributes = {};
      attributes.id = 'GalleryRight';
      attributes.name = attributes.id;

      // PARAMS
      var params = {};
      params.bgcolor = "#ffffff";


      /* FLASH VARS */
      var flashvars = {};             

      /// if commented / delete these lines, the component will take the stage dimensions defined 
      /// above in "JAVASCRIPT SECTIONS" section or those defined in the settings xml         
      flashvars.componentWidth = stageW;
      flashvars.componentHeight = stageH;

      /// path to the content folder(where the xml files, images or video are nested)
      /// if you want to use absolute paths(like "http://domain.com/images/....") then leave it empty("")

      flashvars.pathToFiles = "fadeinout/";
      flashvars.xmlPath = "xml/fadeinout-right.xml";                      

      /** EMBED THE SWF**/
      swfobject.embedSWF("preview.swf"+cacheBuster, attributes.id, stageW, stageH, "9.0.124", >"js/expressInstall.swf", flashvars, params);
      if(swfmacmousewheel) swfmacmousewheel.registerObject(attributes.id);


  </script>

I heard i needed to put

param name="wmode" value="transparent"

or

so.addParam("wmode", "opaque");

something like this to make it under my jquery.

How do i edit that so i can have the jquery script hover over the flash.

The thing that ties to the flash in my html is

<table width="330px" height="435px" cellpadding="0" cellspacing="0">
        <td align="center">

            <div id="GalleryRight">
                <p>In order to view this object you need Flash Player 9+ support!</p>
                <a href="http://www.adobe.com/go/getflashplayer">
                    <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"/>
                </a>
            </div>
        </td>
    </table>

So how can i get it so the JQUERY script box to open over this flash?

Thanks!!! Greatly Appreciated!

Have you tried setting z-indexes for both the JavaScript box & the flash element? — Hanna
@Johannes z-index doesn't work with Flash if it is set to "Transparent" mode. So he probably needs to do both as explained in my answer. — Shiv Kumar

Shiv Kumar Shiv Kumar · Accepted Answer · 2011-02-06T05:47:24

The way to add "params" is as shown below. I've simply extended what you already had (added a new line)

// PARAMS
var params = {};
params.bgcolor = "#ffffff";
params.wmode = "opaque"

If making the flash player opaque is the answer than it should work. If that doesn't work then you could try (in addition to opaque) to set the z-index of your player to a lower number of increase the z-index of you jQuery script box (not sure what that is).

So in your html modify your "GalleryRight" div tag to the following:

<div id="GalleryRight" style="z-index: 1;">

you may have to set the z-index of your script box in a similar fashion to a higher. The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. However, note that z-index only works on positioned elements. It looks like your script box is positioned. But your Flash player is not. So you may need to position it. In your case relative position may work.

Do the z-index thing only if you really have to.

Jquery script appearing under Flash

1 Answers