DHTML Lab: Dynamic Page Segments; Defining the Page Elements
Dynamic Page Segments
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:
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 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:
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">
<DIV ID="segCol" CLASS="segment">
<DIV ID="segNew" CLASS="segment">
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:
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">
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>
These are the only interventions into our regular HTML. If you use this technique on already existing pages, remember:
Now, let's move on to discuss the positioning of the page segments.
Produced by Peter Belesis andAll Rights Reserved. Legal Notices.
Created: Mar. 11, 1998
Revised: Mar. 12, 1998