spacer

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

home / experts / javascript / column13


Showing and Hiding Elements

Developer News
OpenOffice 3.2 Lands Amid Critical Changes
Red Hat, IBM Firmly in KVM Virtualization Camp
Red Hat Talks Up Open Source Cloud Plans

Remember that the banner displays one message when it is paused, and two when it is moving. When it is moving, it displays a fraction of each message, gradually increasing the visible portion of the next element and the hidden portion of the previous message. In any event, both moving messages must be visible. The clip property is responsible for clipping the messages, but they must be visible for that to happen.

Rather than dealing with the z coordinate of the elements, we chose to hide inactive elements while only the two moving ones are visible (along with the main, parent element). The showMessage() function in banner.js is in charge of showing and hiding elements. Its general syntax is as follows:

showMessage(n, show);

The function's first argument, n, specifies the index of the desired element. For example, 0 refers to the first child element. The second argument, show, determines if the element should be visible (show is true) or hidden (show is false). This is obviously a Boolean value, because it can have one of two values. Now take a look at the the actual body of showMessage():

function showMessage(n, show) {
  var whichEl = (NS4) ? eval("message" + n) :
                        eval("message" + n + ".style");
  whichEl.visibility = (show) ? ((NS4) ? "show" : "visible") :
                                ((NS4) ? "hide" : "hidden");
}

The visibility property determines whether or not an element is visible. The following table lists its possible values in Navigator 4.0x and Internet Explorer 4.0x:

Navigator 4.0xInternet Explorer 4.0xDescription
"show""visible"Shows the element.
"hide""hidden"Hides the element.
"inherit""inherit"Inherit the visibility of the parent element.

The showMessage() function first assigns the parent object of the visibility property to the local variable whichEl. In Navigator 4.0x visibility belongs to the element, while Internet Explorer 4.0x features it as a property of the element's style property. Thus, whichEl.visibility reflects the element's visibility property in both browsers.

The function then checks if show (the parameter) is true. If so, it assigns "show" or "visible" to whichEl.visibility, depending on the browser type. Otherwise it assigns "hide" or "hidden" to hide the specified element.

http://www.internet.com


The Network for Technology Professionals

Search:

About Internet.com

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers

webref The latest from WebReference.com Browse >
Search Engine Optimization: Selecting and Embedding Keywords · Are Google's Language Translation Web Services Ready for Prime Time? · Installing and Using Meeplace, the Business Review CMS
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
IBM DB2 10 for z/OS: Justifying the Upgrade · Living La Vida Colo: Choosing the Right Colocation Facility · FTC Concerns over Social Media Privacy Linger


Created: February 10, 1998
Revised: February 10, 1998

URL: http://www.webreference.com/js/column13/visibility.html