Hiermenus Go Forth, VI - DHTML Lab | 13 | WebReference

Hiermenus Go Forth, VI - DHTML Lab | 13


Hiermenus Go Forth, VI:
Version 4 - The Page-Specific Parameters (cont'd)


Specifies a JavaScript statement to be evaluated when a menu tree is made visible. All menus 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 would 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.

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.

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.

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

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


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:

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

    #mySelect {position:absolute;left:100;top:300}
    <DIV ID="mySelect">
             <OPTION>some option</OPTION>
  2. Create a function, receiving one argument, that toggles the visibility of the positioned element:

    function showSelect(isOn) {
       if(IE4) {
          document.all("mySelect").style.visibility = isOn ? "visible" : "hidden";
       else {
         document.mySelect.visibility = isOn ? "show" : "hide";
  3. Place function calls as the HM_PG_UponDisplay and HM_PG_UponHide parameters:

    HM_PG_UponDisplay =  "showSelect(false)"
    HM_PG_UponHide =  "showSelect(true)"

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

Next, HM_PG_UponHide.

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Dec 12, 2000
Revised: Dec 12, 2000

URL: http://www.webreference.com/dhtml/column42/11.html