Hiermenus Go Forth, II - DHTML Lab

Hiermenus Go Forth, II:
Version 4 - The External Arrays - New Menu Tree Parameters

Element 15 - evaluate_upon_tree_show

[Editor's note: this page was updated on May 1, 2003 to add support for later browsers.]

Description

Executes a JavaScript statement when the menu tree is made visible

The menu above has a SELECT form element immediately below it. When the child 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.

Value

string JS expression to be evaluated

Example Values

JS expression (function call): "showSelect(false)"

A custom function that you have created is called. Unlike function calls used to determine other parameter values, here we expect no return value. We simply execute the function statements when the menu tree first appears. See the second example below. JS expression (complete statement): "someImage.src = 'imageon.gif'"

src

Default

none.
If omitted, no special action is taken upon menu tree display.

Differences from Version 3 equivalent

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

Comments

This parameter should be used in conjunction with evaluate_upon_tree_hide, 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

Examples:

Many readers have posed this question:
Move your rollover code to the evaluate_upon_tree_show and evaluate_upon_tree_hide parameters:

evaluate_upon_tree_show: "theImageName.src = 'onimage.src'"
evaluate_upon_tree_hide: "theImageName.src = 'offimage.src'"

Now, the appearance of the menu tree controls the image src, which is what you want. When you mouse over the image and the menu tree appears, the image displays in its "on" state. When you have finished navigating the menus and the menu tree is hidden, the image goes back to its "off" state.

Another common question:

"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 evaluate_upon_tree_show and evaluate_upon_tree_hide parameters:

evaluate_upon_tree_show: "showSelect(false,'dv')"
evaluate_upon_tree_hide: "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.

Finally, the complementary parameter, evaluate_upon_tree_hide.