DHTML Lab: Dynamic Page Segments; Wrap-up

Dynamic Page Segments
wrap-up

Linking to Segments
Compatibility
Technique Uses
Next Column

Click the above links to navigate this page.

Linking to Page Segments

We can link directly to a page segment and have it displayed on page load, in exactly the same way that we link to a named anchor in a page.

If we are using Dynamic Page Segments in an already-existing page, we must foresee that we, or an external site, may have links to already-existing named anchors in our page, which are now part of positioned elements.

Recall that our initIt() function ends by arranging for the display of firstSeg, which stores the segment we have specified as being the first, or default, segment to be displayed upon page load. The full function can be reviewed in our initialization discussion. As a refresher, we reproduce initIt() here, with the browser-specific code omitted:

function initIt(){
  if (NS4) {
    
    Navigator initialization
	
  }
  else {
  
    Explorer Initialization
  }
  
  if (hasFooter) footerEl = eval(footerEl);
// The next two lines identify the first segment
// to be displayed and arrange for its display:
  currentSeg = eval(prefix + firstSeg)
  showSegment(firstSeg);
}

JavaScript 1.0, in Navigator 2, introduced the hash property of the location object. hash is a string containing the hash part of an URL. This string includes the hash mark itself. For example: if the URL (location) of a page is: https://www.someName.com/segFinal.html#Hidden,

location is https://www.someName.com/segFinal.html#Hidden,
location.hash is #Hidden, and
location.hash.length is 7

Since hash is a string, it has a length property. If an URL has no hash specified, the hash property returns an empty string, with a length of 0. We can therefore easily check the URL of our page as it loads and identify if a hash exists and what its value is:

  fullHash = location.hash;
  if (fullHash.length > 0 )
    firstSeg = fullHash.substr(1)

We assign the hash string to the variable, fullHash. If fullHash has a length greater than 0, a hash exists, so we must extract the hash string without the hash mark. The hash mark is always the first character, at position 0, of the hash string. Using the JavaScript 1.2 substr() method, we can extract a substring of a string object, using the following syntax:

stringReference.substr(startIndex,[length])

The length parameter of subStr() is an integer specifying the number of characters to extract. If it is omitted, all the characters from the startIndex to the end of the string are extracted. Therefore, if fullHash is #Hidden, fullHash.substr(1) returns Hidden.

Thus, we can determine if our page should substitute a different segment as the first-displyed segment, and change the value of firstSeg, accordingly. We modify initIt() to read:

function initIt(){
  if (NS4) {
    
    Navigator initialization
	
  }
  else {
  
    Explorer Initialization
  }
  
  if (hasFooter) footerEl = eval(footerEl);
// Check for the hash property of this page
// if it exists, modify firstSeg:
  fullHash = location.hash;
  if (fullHash.length > 0)
    firstSeg = fullHash.substr(1)
  currentSeg = eval(prefix + firstSeg)
  showSegment(firstSeg);
}

With the above two-statement insertion, we assure that any outside links to named anchors in our page will still function, and we can link directly to page segments, ourselves.

Backward Compatibility

In order to ensure complete compatibility, we have one more task. We must include this function in our in-page LANGUAGE="JavaScript" script, accessible to all JavaScript-enabled browsers:

function showSegment(where){
    location.href = "#" + where;
}

A non-DHTML JavaScript browser that recognizes the onClick event handler in our page will execute this version of showSegment(). As we know, showSegment() is redefined in our external script, accessible only to DHTML browsers, overwriting this earlier incarnation.

Here, showSegment() simply adds a hash mark (#) to the argument, creating an HREF pointing to a named anchor. The page then scrolls to the specified named anchor.

Different Strokes

A non-JavaScript browser will not recognize the onClick in your link and simply execute the HREF, moving the page focus to the named anchor.

A non-DHTML JavaScript browser will execute the onClick and call the above version of showSegment(), which will again move the focus to the anchor.

A DHTML browser will call the JavaScript 1.2 version of showSegment() in the external file, through the onClick handler, making visible the required page segment.

Uses for Dynamic Page Segments

Where to Start?

Any long page, with continuity divisions, is definitely a candidate.

Listings, such as:

catalogs
address books
FAQs
Quizzes

...are naturals.

Let's not forget on-line resumes.

In fact, this technique was created after a visit to my friend Pipis' home page, where he had developed a similar backward-compatible script, but complained about the footer-positioning problem. Hopefully, this column has provided some solutions.

And finally, if it helps the web rid itself of some redundant framesets, the technique will have served a purpose.

Next Time on Dynamic HTML Lab:

...we'll think of something

For now, we've repeated the code developed in this column on our usual code pages.

Look at your browser's location or address toolbar above. The URL you have navigated to includes a hash mark (#), meaning that this page, when loaded, should scroll to the named anchor specified. If Dynamic Page Segments is to be truly backward-compatible and applicable to already-existing pages, we must foresee that a hash may be specified in a link to your page.

The segment you are reading is named segHidden, and was reached by loading the URL: https://www.webreference.com/dhtml/column16/segFinal.html#Hidden. It is not the firstSeg defined in our parameters. The following link will load this page with no hash, and you may read the final part of this tutorial: https://www.webreference.com/dhtml/column16/segFinal.html

Produced by Peter Belesis and

URL: https://www.webreference.com/dhtml/column16/segFinal.html