spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / experts / dhtml / column36
Developer News
News Flash: Adobe Has iPhone Workaround
Adobe's Flash 10.1 Goes Mobile (Minus iPhone)
A Salute to Visionary CEOs

Logo

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)"
JS expression (complete statement): "someImage.src = 'imageon.gif'"

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:

  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

Examples:

  1. Many readers have posed this question:

      "I have the menus popping up off an image link. The image link is itself a rollover. It rolls over fine but when I move the mouse over the associated menus, mousing off the image, the image reverts to its "off" state. I would like to keep it "on" while I am navigating the menu tree, even though my mouse is not over the image."

    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.

  2. 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:

    1. 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>
    2. 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";
         }
      }
    3. 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.


Produced by Peter Belesis and

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
Building a Banking Application Home Page with OOP · Mixing Scripting Languages · Review: phpFox, a Social Networking CMS with all the Bells and Whistles
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Enterprise 2.0: Social Networking in the Cloud · BroadSoft Marketplace Hastens Pace of Telephony Innovation · Review: HTC Hero for Sprint

All Rights Reserved. Legal Notices.
Created: Sept 05, 2000
Revised: May 1, 2003

URL: http://www.webreference.com/dhtml/column36/8.html