Hiermenus Go Forth, VI - DHTML Lab

HM_PG_UponDisplay

Description

Specifies a JavaScript statement to be evaluated when a menu tree is made visible. All menu trees in the page are affected.

The menu below has a SELECT form element immediately below it. When the menu appears, the form element is hidden. Otherwise, the element could show through the menu. See DHTML Diner for a discussion on form element persistence.

Show the menu and hide the SELECT element

HM_PG_UponDisplay overrides site-wide global settings declared in the external script.

HM_PG_UponDisplay can be overruled on a per-tree basis by the evaluate_upon_tree_show parameter element in top-level menu arrays.

Value

JS statement.
May be specified as:

string JS expression to be evaluated

JS expression: "showSelect(false)"

A custom function that you have created will be called. Unlike function calls used to determine other parameter values, here we expect no return value. We simply execute the function statements when a menu appears.
JS expression: "document.bgColor='green'"

The background color of the page is changed to "green" when a menu is visible.

Default

If this parameter is omitted, the relevant Global Parameter value set in the external script is used.

Differences from Version 3 equivalent

There is no Version 3 equivalent. Authors were expected to insert their own code if they needed additional statements executed upon menu display.

Comments

This parameter should be used in conjunction with HM_PG_UponHide, discussed on the next page. As a team, they can be used to:

add additional functionality to the menu rollovers
avoid common display problems, like the SELECT example above.
much more, depending on the needs of your page

Example:

A popular HM query: "Form elements, Java applets, plug-ins, and other elements burn a hole in the menus. I want to hide these elements like Microsoft did on their home page when their menus appeared."

We have demonstrated this with the SELECT example, above.
How you code it is up to you, but here is one way of doing it:

Enclose your element(s), in this case a SELECT element, in a positioned element:

<STYLE>
<!--
#mySelect {position:absolute;left:100;top:300}
-->
</STYLE>

<DIV ID="mySelect">
   <FORM>
      <SELECT>
         <OPTION>some option</OPTION>
      </SELECT>
   </FORM>
</DIV>

Create a function, receiving two arguments, that toggles the visibility of a positioned element:

function showSelect(isOn,divName) {
   var theSelect = null;
   if(document.getElementById) {
      theSelect=document.getElementById(divName);
      if(theSelect) theSelect.style.visibility = isOn ? "visible" : "hidden";
   } else if (document.all) {
      theSelect=document.all(divName);
      if(theSelect) theSelect.style.visibility = isOn ? "visible" : "hidden";
   } else if (document.layers) {
      theSelect=document[divName];
      if(theSelect) theSelect.visibility = isOn ? "show" : "hide";
   }
}

Place function calls as the HM_PG_UponDisplay and HM_PG_UponHide parameters:

HM_PG_UponDisplay =  "showSelect(false,'dv')"
HM_PG_UponHide =  "showSelect(true,'dv')"

The above example is for a cross-browser environment. In IE or DOM-only code, the SELECT element need not be enclosed in a positioned element. Its visibility can be toggled directly.