DHTML Lab: Dynamic Page Segments; Segment Display

Dynamic Page Segments
segment and footer display

Our technique uses this column's front page as a live example. If you wish to follow the tutorial with the front page visible for reference, you may view it:

in a new window (all)

in-page as an IFRAME
to be inserted at
page top or
page bottom (IE4 only)

When you are done, you may:
close the window or
remove the IFRAME.

In longer script listings, cross-browser code is blue, Navigator-specific code is red, and Explorer code is green.

Displaying the Page Segment

Recall that showSegment() is called not only by initIt() upon page load, but also by the onClick handlers in the document itself. For example:

<A HREF="#Intro"
   onClick="showSegment('Intro');return false">
   Introduction</A>

It is therefore written to account for an already visible page segment. The first time it is called, by initIt(), there is no visible segment. The second and third statements of the function are redundant this once, but apply if showSegment() is called from the in-page links later:

function showSegment(el){
  whichSeg = eval(prefix+el);
  currentSeg.showIt(false);
  if (hasFooter) footerEl.showIt(false);
  whichSeg.showIt(true);
  currentSeg = whichSeg;
  if (hasFooter) setTimeout("whichSeg.arrangeIt();",50)
}

The statements are straight-forward:

1. The string argument passed to showSegment() is evaluated along with prefix and assigned to whichSeg, which is the segment-to-be-shown.
2. The segment element currently visible, currentSeg, is hidden by calling its showIt() method.
3. If we have a footer, the footer is hidden as well.
4. Our new segment, whichEl, is made visible.
5. This new visible segment is assigned to currentSeg.
6. If we have a footer, the segment's arrangeIt() method is called, to place the footer.

Why are we calling arrangeIt() with a setTimeout()? The Explorer 4 Note, below, after arrangeIt() is discussed, explains.

Displaying the Footer

function arrangeIt() {
  if (NS4) {
    footerEl.top = // keep with next line
      this.pageY + this.document.height + footerElSpace;
  }
  else {
    footerEl.style.pixelTop = // keep with next line
this.style.pixelTop + this.offsetHeight + footerElSpace;
  }
  footerEl.showIt(true);
}

The arrangeIt() method of all segment elements, simply positions the footer element below the segment, using the usual browser-specific properties and adding the vertical space we assigned to footerElSpace.

Once the footer is positioned, it is made visible.

The user can now navigate the page segments by clicking the links defined in your page. The visibility-swapping and positioning routines are simply repeated for every segment called for by the user.

Explorer 4 Note:
As mentioned previously in these columns, Explorer 4 does not update its element property values as quickly as Navigator does. Granted, it has a lot more values to update! Perhaps Explorer 4 is just so fast in its script execution, that the value updating can't catch up.

Whichever way you look at it, a problem is a problem. We need to place the footer element below the currently visible segment element. We must know where the latter is positioned and what its height is. Even though the segment element is positioned and visible, Explorer returns incorrect values for offsetHeight, scrollHeight and clientHeight, properties that relate to the element's screen presence, if we retrieve them immediately. If we wait, the values are correct.

Therefore, we wait by calling arrangeIt(), which needs the offsetHeight property, with the setTimeout() method. Originally, we had set the millisecond value of setTimeout() to 1, and on most attempts, this was enough. A value of 50, however, seemed the safest. This is not a large interval (1/20th of a second), and almost indiscernible, so we did not apply a conditional for Explorer use. It does not adversely affect Navigator in any way.

showIt()

We mustn't forget our standard element showIt() method, which toggles an element's visibility:

function showIt(on) {
  if (NS4) {
    this.visibility = (on) ? "show" : "hide"
  }
  else {
    this.style.visibility = (on) ? "visible" : "hidden"
  }
}

That's it. Simple enough, and hopefully useful. The next page is another live example of this technique.