Scrolling JavaScript Banners: Showing and Hiding Elements - Doc JavaScript

Showing and Hiding Elements

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.0x	Internet Explorer 4.0x	Description
"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.

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

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