Make my submenus appear above Form/Flash Objects

Top Previous Next

! IMPORTANT NOTE !

This page and all information on this page is OUTDATED!

Please visit our related KNOWLEDGE BASE TOPIC instead!

! IMPORTANT NOTE !

My submenus appear behind form elements and/or Flash objects.
Is there something I can do about that? (versions 3.0.488 and above only)

Unfortunately this is a problem due to the way that some browsers display the combo boxes and form objects as windows on top of the page. However, with version 3.0.488 you can cover for this by using the awmhidediv() and awmshowdiv() commands on the <Javascript Command on Appear> and <Javascript Command on Disappear> properties of the appropriate submenus. You need to make some additions inside your HTML for this solution to work.

To see how this works in action, you can view an on-line example at http://www.likno.com/examples/ShowHideExample/hide_form_elements.html

The solution has the following steps:

Step 1 - Editing the HTML page:
Open your web page in an html editor.
Depending on the browser you want to support, you can do the following:

1. IE browsers: only combo boxes appear above submenus:

Wrap your combo box object with the following DIV tags:

<div id="awmobject1">any object you want to hide here</div>

Example:

<option>Support</option>

<option>Sales</option>

</select>

</div>

If you have more than one combo boxes to hide, then you should use the following strict order for their DIV IDs:

id="awmobject1"

id="awmobject2"

id="awmobject3"

...etc., always starting from "1" and in ascending order, without any gaps.

2. NS6.x, 7.x: no problems here. Submenus always appear above form elements.

3. NS4.x: all form elements appear above submenus:

This is the most difficult case, as all form elements appear above submenus. You need to have a FORM tag for the form objects (if not already there) and wrap the FORM with the following DIVs:

<div id="awmform1" style="position:relative;">the form that you want to hide here</div>

Example:

<form>

<option>option1</option>

<option>option2</option>

<option>option3</option>

<option>option4</option>

<option>option5</option>

</select>

</form>

</div>

If you have more than one forms to hide, then you should use the following strict order for their DIV IDs:

id="awmform1"

id="awmform2"

id="awmform3"

...etc., always starting from "1", in ascending order and without any gaps.

4. Opera: most form elements appear above submenus:

Here you have more flexibility.

You can either use the IE method (by hiding specific objects using the "awmobject1" DIV ID)

or the NS4.x method (by hiding forms using the "awmform1" DIV ID).

Step 2 - Editing the .awm file:
- Open your .awm menu in AllWebMenus

- Select the submenus that get covered by form objects. Only 1st level submenus need to be selected (submenus of Main Menu items)

- Enter the following value in their <Javascript Command on Appear> property:

awmhidediv();

- Enter the following value in its <Javascript Command on Disappear> property:

awmshowdiv();

To see how this works in action, you can view an on-line example at http://www.likno.com/examples/ShowHideExample/hide_form_elements.html

This solution makes the form objects disappear when the submenu appears, and vice versa, so that the correct element is always on top. It is obvious that you first need to identify which submenu or submenus conflict with the form objects, so that you can use the proper values in the respective Javascript Commands. Apparently, the solution works best when the menu is static, i.e. the <Menu Drifts on Scroll> property is set to "No".

How about Flash Objects?

Flash objects are like form objects since they appear as windows on the top of the browser. For Internet Explorer browsers the solution is easy since all you need to do is specify a transparency for the Flash objects. This means adding in the following code in the object tag:

<param name="WMode" value="Transparent">

However, this solution will not work for non-IE browsers, so a similar technique to the one used in form objects should also be used here.

Step 1 - Editing the HTML page:

- Open your web page in an html editor.

- Wrap your Flash embed element with <div> tags:

...flash code comes here...

</div>

If you have more than one flash to hide, then you should use the following strict order for their DIV IDs:

id="awmflash1"

id="awmflash2"

id="awmflash3"

...etc., always starting from "1", in ascending order and without any gaps.

- Assign the same name for the id of the embed element as for the <div> element. Your html should eventually look like the following:

codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0"

width="115" height="30">

<param name="WMode" value="Transparent">

<div id="awmflash1" style="position:relative">

width="115" height="30"

type="application/x-shockwave-flash"

pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">

</embed>

</div>

</object>

Step 2 - Editing the .awm file:
- Open your .awm menu in AllWebMenus

- Select the submenus that get covered by Flash. Only 1st level submenus need to be selected (submenus of Main Menu items)

- Enter the following value in their <Javascript Command on Appear> property:

awmhidediv();

- Enter the following value in its <Javascript Command on Disappear> property:

awmshowdiv();

To see how this works in action, you can view an on-line example at http://www.likno.com/examples/ShowHideExample/hide_form_elements.html

Frame Show is the ideal software for desktop enhancement, desktop wallpaper and digital photo frame solutions.

Frame Show: Frame images, pictures, photos with the most innovative framing software!

! IMPORTANT NOTE !

This page and all information on this page is OUTDATED!

Please visit our related KNOWLEDGE BASE TOPIC instead!

! IMPORTANT NOTE !