DHTML Lab: Dynamic Page Segments; Navigator Initialization

Dynamic Page Segments
Navigator 4 initialization

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.

The Global Variables

We need only two global variables:

• maxHeight, which will store the vertical pixel dimension of the highest element, for Navigator screen sizing purposes, and
• hasFooter, a Boolean assigned false, if footerEl is null, and true, if footerEl has any other value, denoting the existence of a final footer element.

maxHeight = 0;
hasFooter = (footerEl != null);
arSegments = new Array();

We also declare an array, arSegments, to hold all the segment elements in our page.

Initialization

The initIt() function is half our script. It is reproduced here in its entirety, and discussed below, in detail:

function initIt(){
  if (NS4) {
    
    for (i=0; i<document.layers.length; i++) {
      tempEl = document.layers[i];
	  
      eval(tempEl.id + "= tempEl");
      tempEl.showIt = showIt;
	      
      if (tempEl.id.indexOf(prefix)!=-1)
        arSegments[arSegments.length] = tempEl;
    }
  
    for (i=0; i<arSegments.length; i++) {
      tempSeg = arSegments[i];
      
      if (topPos != null) tempSeg.top = topPos;  
      if (leftPos != null) tempSeg.left = leftPos;  
  
      tempSeg.arrangeIt = arrangeIt;
	  
      if (maxHeight < tempSeg.document.height) {
        maxHeight = tempSeg.document.height;
        longest = tempSeg;
      }
    }  
  
    if (hasFooter)
      eval(footerEl +  // keep with next line
       ".pageY = topPos + maxHeight + footerElSpace");
    
  }
  else {
  
    allDIVs = document.all.tags("DIV");
	
    for (i=0; i<allDIVs.length; i++) {
      if (allDIVs(i).className=="segment")
        arSegments[arSegments.length] = allDIVs[i];
      allDIVs(i).showIt = showIt;
    }
	
    for (i=0; i<arSegments.length; i++) {
      tempSeg = arSegments[i];
	  
      if (leftPos!=null)
        tempSeg.style.pixelLeft = leftPos;
      if (topPos!=null)
        tempSeg.style.pixelTop = topPos;
      tempSeg.arrangeIt = arrangeIt;
      tempSeg.style.width =  // keep with next line
       document.body.clientWidth - leftPos - margRight;
    }
  }
  
  if (hasFooter) footerEl = eval(footerEl);
  currentSeg = eval(prefix + firstSeg)
  showSegment(firstSeg);
}

Navigator Initialization

The first thing we must do is assign all our top-level positioned elements (segments and footer) a cross-browser variable reference. Then we must extract the segment elements and place them in the arSegment array.

Cross-Browser Reference
1. We move through all our top-level positioned elements, using a for loop and the document.layers array:

for (i=0; i<document.layers.length; i++) {  }

      tempEl = document.layers[i];

      eval(tempEl.id + "= tempEl");

segIntro = document.layers[segIntroIndex]; or
segIntro = document.layers["segIntro"]; or
segIntro = document.segIntro;

4. Finally, we assign all elements a showIt() method to control their visibility.

Segment Elements
We identify all elements that are page segments by searching their ID for the prefix defined in-page (e.g. "seg"). If found, then the element is a segment, so it is placed in the arSegment array:

      if (tempEl.id.indexOf(prefix) != -1)
        arSegments[arSegments.length] = tempEl;

Notice the efficient way of appending elements to an array. Since the length of an array is always one integer larger than the last element in an array, arrayName[arrayName.length] always points to the next-array-element-to-be-defined. For example, if we have an array called arEditors that has two elements, "Andy" and "Bob", then:

arEditors[0] is "Andy"
arEditors[1] is "Bob"
arEditors.length is 2
arEditors[arEditors.length] is the same as arEditors[2]

Initializing the Segments
Using another for loop, we move through all the elements in the arSegment array, assigning them to tempSeg, for easy referencing, and positioning them if leftPos and/or topPos are not null.

    for (i=0; i<arSegments.length; i++) {
      tempSeg = arSegments[i];
      
      if (topPos != null) tempSeg.top = topPos;  
      if (leftPos != null) tempSeg.left = leftPos;  
  
      tempSeg.arrangeIt = arrangeIt;
	  
      if (maxHeight < tempSeg.document.height) {
        maxHeight = tempSeg.document.height;
        longest = tempSeg;
      }
    }

Next, we assign the segment an arrangeIt() method, used for positioning the footer below it, when it is made visible.

Finally, we compare the height of the segment to maxHeight. If the If the segment's height is larger it becomes the new maxHeight and the segment itself is assigned to longest. In this way, we track which segment is the largest vertically, and what its height is.

Initializing the Footer
The final Navigator initialization statement is executed only if a footer exists. Since footerEl stores the ID of the footer element as a string, we use eval() to position the footer at the bottom of the highest element plus any value that footerElSpace has:

    if (hasFooter)
      eval(footerEl +  // keep with next line
       ".pageY = topPos + maxHeight + footerElSpace");

Remember, this initialization is happening while the page is loading. This final statement, positioning the footer, forces Navigator to size the window/scrollbars to include it. Since it is positioned below the highest element, it is in the lowest possible position. Therefore, Navigator will be able to show all elements in their entirety. More discussion on this technique can be found in the Navigator section of Expandable/Collapsible Outlines.

Now, let's see how Explorer initializes this technique.