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:

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

document.all.style.visibility

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;
  }
}