Wimpy on top of menu / Z-index

If Wimpy appears on top of other elements, such as a menu or other <DIV>, in your page. Adjust the z-index and remove the reference to "wmode" for the HTML code that display's Wimpy.

The first thing to try is adding the "wmode" attribute and set it's value to "opaque" as:

<!-- START WIMPY CODE -->
<object  ...
<param ...
<param name="wmode" value="opaque" />
...
<embed ... wmode="opaque" ...
<!-- END WIMPY CODE -->

IMPORTANT: Be sure to add the wmode to both the <param> and <embed> tags.

 

 

You may also want to wrap Wimpy in a <DIV> tag and then set the <DIV> tag to a specified level.

Create a new CSS style as follows:

.wimpy_z_leveler {
   z-index:-1;
}

Where the z-index of the DIV is set to a lower level than the DIV that Wimpy is above.

NOTE: In this example, the z-index was set to -1 (minus one), which seems to work well with putting the player behind everything.

Then add the class to the div that contains wimpy. NOTE: You may have to wrap the HTML code used to display Wimpy in a <DIV> tag first:

<div class="wimpy_z_leveler">

<!-- START WIMPY CODE -->
<object  ...
<param ...
<!-- END WIMPY CODE -->

</div>

NOTE: If you're using Wasp, you can output the HTML code used to render the player in standard HTML or Javascript. In the "Publish" tab, there is a check box for "Render with Javascript" -- when this box is check, the output will be Javascript Code. When unchecked, the output will be standard HTML.

If you must use Javascript to render the player, and want to adjust the "wmode" to "opaque", you'll have to edit the wasp.js file and add the following line to the "writeWasp" function:

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

The "writeWasp" function is located on approximately line 328. The new line would appear in-context as:

function writeWasp(configsIN){
var theConfigObject = configsIN || "";

for(var prop in defaultWimpyConfigs){
   theConfigObject[prop] = theConfigObject[prop] || defaultWimpyConfigs[prop];
}

if(theConfigObject.pageColor.substring(0,1) != "#"){
   theConfigObject.pageColor = "#" + theConfigObject.pageColor;
}

var uniqueID = theConfigObject.instanceID || instanceIDdefault;

// <![CDATA[
var so = new SWFObject(theConfigObject.waspSwf, "wasp" + uniqueID, theConfigObject.pw, theConfigObject.ph, flashversion, theConfigObject.pageColor);
theConfigObject["instanceID"] = "";
theConfigObject["wimpyHTMLpageTitle"] = "";
theConfigObject["waspJS"] = "";
theConfigObject["waspSwf"] = "";
theConfigObject["pw"] = "";
theConfigObject["ph"] = "";
theConfigObject["pageColor"] = "";

for(var prop in theConfigObject){
   var val = encodeURI(theConfigObject[prop]);
   if(val != ""){
     so.addVariable(prop, val);
   }
}
so.addParam("wmode", "opaque");
so.addParam("scale", "noscale");
so.addParam("salign", "lt");
so.addParam("allowScriptAccess", "always");
so.addParam("allowFullScreen", "true");
so.addParam("menu", "false");
so.write("waspTarget" + uniqueID);
// ]]>
}

NOTE: As of Wasp Publisher version 1.0.116b, the wmode parameter was added to the wasp.js file.