DHTML Lab: Dynamic Page Segments; Explorer Initialization

Dynamic Page Segments
Explorer 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.

Explorer Initialization

Filling the arSegments Array
In Explorer, we can isolate parts of the global all collection and create new collections containing elements with a common tag, using the tags() method. See our original discussion of tags() for details. All the DIVs in our document become elements of the allDIVs collection, with this statement:

    allDIVs = document.all.tags("DIV");

Using our trusty for loop, we go through all the elements in allDIVs. First we assign the showIt() method to them. Then we check their style class. If the className property is "segment", then the element is appended to the arSegments array:

    for (i=0; i<allDIVs.length; i++) {
      allDIVs(i).showIt = showIt;	
      if (allDIVs(i).className=="segment")
        arSegments[arSegments.length] = allDIVs[i];
    }

Looping Through the arSegments Array
The first statements in the for loop that moves us through arSegments are similar to the Navigator version. Each element is assigned to tempSeg for referencing, then it is positioned if positioning is warranted. Next, arrangeIt() method is assigned.

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

Finally, now that Explorer has determined how wide the body of the document is, since it has parsed the BODY tag, we can dynamically set the width of segment elements with the document.body.clientWidth property.

Final Cross-Browser Initialization

  if (hasFooter) footerEl = eval(footerEl);
  currentSeg = eval(prefix + firstSeg)
  showSegment(firstSeg);

If we have a footer, than we evaluate the string stored in footerEl, and assign it right back to footerEl, allowing for easier referencing. For example, if footerEl initially stored "end", as a string, then after the eval() it would store end, as a variable, which would correspond to the one-word cross-browser variable reference we established in the initialization earlier.

Next, we create a new variable, currentSeg, that will always store the segment being currently displayed. Since we are starting with the first segment, we concatenate the two string variables, prefix and firstSeg, (in our example page, "seg" and "Intro", respectively), evaluate them and store the resulting element reference in currentSeg.

Finally, we call showSegment(), passing the firstSeg string as its sole argument.

Our initialization complete, control is thus passed to showSegment(), which will display the first page segment.