spacer

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

home / experts / dhtml / column42
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, VI:
Version 4 - The Page-Specific Parameters (cont'd)



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

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:
JS expression: "showSelect(false)"

JS expression: "document.bgColor='green'"

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:

  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

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:

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


Next, HM_PG_UponHide.


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: December 12, 2000
Revised: May 1, 2003

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