DHTML Lab: Dynamic Page Segments; Defining the Page Elements

Dynamic Page Segments
introduction and page segment definition

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.

Navigating the Long Page

We have all faced the problem of the long page. For one reason or another, the information presented cannot be broken up into many pages. We usually opt for one of two solutions:

• The # HREF Solution
  You know the routine. We scatter <A NAME="anchorName"></A> tags throughout the page. At the top of the page, and perhaps the bottom as well, we place links that will take us to the page position of these named anchors, e.g. <A HREF="#anchorName">linkText</A>. The major problem is that once we navigate to a page segment, we have to scroll back up or down to find the links to continue to another part of the page. Many times we add GO TO TOP links to take us back to the navigation links. This may sound silly, but most of us have done this at some point. Those of us who haven't, have visited such pages.

• The Frames Solution
  Here we create two more pages just to navigate one page! That is, the frameset and the page with the navigation links, which is usually placed in a frame on the left. This solves only the second problem above: losing the navigation links.

The DHTML Solution

With DHTML, we can keep the same long page, but display only the segment associated with our link. Our navigation links remain the same. For non-DHTML browsers, the # HREF is followed, as before, making this a completely backward-compatible technique.

All our page segments are defined as positioned elements, and styled as such. They are placed on top of each other with only the top one visible. The navigation links hide the visible segment and make visible the linked segment. If we have a footer that must always be visible, as on the previous page, then the footer is repositioned below the visible segment.

That's all there is to it.

To best illustrate the technique, we'll use the example of this column's front page. The page can be said to have six parts:

1. the header, logo, title, standard overhead
2. the navigation links
3. the first segment (Introduction)
4. the second segment (In This Column...)
5. the third segment (For the First Time...)
6. the footer

We do not need to position the first two. We'll begin our element creation and positioning with the first segment. The footer must also be a positioned element since it will always be re-positioned below the visible segment.

Defining the Page Segments

The three segments have been enclosed in these three DIVs:

<DIV ID="segIntro" CLASS="segment">
  <A NAME="Intro"></A>
  HTML Content
</DIV>

<DIV ID="segCol" CLASS="segment">
  <A NAME="Col"></A>
  HTML Content
</DIV>

<DIV ID="segNew" CLASS="segment">
  <A NAME="New"></A>
  HTML Content
</DIV>

For your own pages, use as many DIVs as you have page segments. The script will find them on its own later. Make sure to:

• include a named anchor tag for backward compatibility
• give all DIVs an ID that has a prefix of your own choosing (e.g. seg) and the NAME of the anchor
• give all DIVs a CLASS value of segment

The footer is enclosed in its own DIV with no anchor tag, has an ID of end and a CLASS of last:

<DIV ID="end" CLASS="last">
  HTML Content
</DIV>

Since this final element will always be unique, a class declaration for it is not really necessary. It has been given a CLASS attribute, however, to allow you to give the final element any ID you wish, without having to change the scripted STYLE. This is a better way to make a technique configurable to personal preference by any user.

Defining the Links

The links that will make the segments appear have both a backward-compatible HREF and an onClick event handler:

<A HREF="#Intro"
   onClick="showSegment('Intro');return false">
   Introduction</A>
<A HREF="#Col"
   onClick="showSegment('Col');return false">
   In This Column...</A>
<A HREF="#New"
   onClick="showSegment('New');return false">
   For the First Time...</A>

A non-JavaScript browser will not see the onClick handler and simply execute the HREF. A JavaScript browser will execute the showSegment() function and return false, canceling the default HREF execution. We pass one argument to showSegment(): the NAME of anchor, which if added the prefix seg gives us the ID of our positioned element.

These are the only interventions into our regular HTML. If you use this technique on already existing pages, remember:

1. enclose your anchored page segments in positioned elements (DIVs)
2. assign your DIVs an ID which conforms to the anchor NAME and has a distinct prefix (e.g. seg)
3. assign your DIVs a CLASS value of segment
4. add onClick event handlers to your links, calling showSegment() with the NAME of the anchor and returning false

Now, let's move on to discuss the positioning of the page segments.