Introducing DOCJSLIB Version 2.0: Visibility Handling - Doc JavaScript | WebReference

Introducing DOCJSLIB Version 2.0: Visibility Handling - Doc JavaScript


Visibility Handling

Visibility is a cornerstone concept of DHTML. What can be more powerful than hiding and showing elements at will? Conceptually, both browsers use the same semantics for visibility manipulations. It's the difference in syntax that drive us programmers crazy. There are three different set of visibility values: one for Internet Explorer, one for Netscape Navigator, and one for the HTML <STYLE> tag. DOCJSLIB 2.0 adds another set: true for visible elements and false for hidden elements. The following table summarizes the different values:

Used InElement is visible
when visibility
is equal to:
Element is hidden
when visibility
is equal to:
DOCJSLIB 2.0truefalse
Netscape Navigator"show""hide"
Internet Explorer"visible""hidden"
<STYLE> tag"visible""hidden"

We chose the true and false pair because they are more in line with common programming practices to assign a true value to a condition that is satisfied, and false otherwise (boolean). Our conceptual condition is if (visible). If the answer is positive, the true value is passed or returned. If the answer is negative, the false value is passed. To summarize, in your application, you only have to deal with the true and false values.

DOCJSLIB 2.0 provides two visibility-related functions: getVisibility() and setVisibility(). The getVisibility() function accepts the element ID and returns a boolean value:

function getVisibility(id) {
  if (NS4) {
    if (eval("document." + id).visibility == "show") return true
    else return false;
  }
  else {
   if (eval("document.all." + id).style.visibility == "visible") return true
    else return false;
  }
}

Notice the differences between Internet Explorer and Netscape Navigator. Besides the different syntax of the visibility values, the visibility property, as many other DHTML properties, is referenced differently. We have discussed these differences in depth in Column 27, Introducing DOCJSLIB 1.0. In brief, Netscape Navigator references the visibility property of an element that has an ID equal to "kuku", for example, as follows:

document.kuku.visibility

Internet Explorer, on the other hand, references the same property as follows:

document.all.style.visibility

The getVisibility() function should be clear now. For each browser, we check if the element is visible and return true if it is. We return false otherwise.

The setVisibility() function is very similar, except that it accepts a second boolean parameter that specify if the caller wants to make the element visible (true) or hidden (false):

function setVisibility(id, flag) {
  if (NS4) {
    var str = (flag) ? 'show' : 'hide';
    eval("document." + id).visibility = str;
  }
  else {
    var str = (flag) ? 'visible' : 'hidden';
    eval("document.all." + id).style.visibility = str;
  }
}

Notice that we first build the visibility value in the variable str, according the table above, and then assign this variable to the visibility property.

http://www.internet.com


Created: October 26, 1998
Revised: October 26, 1998

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