Web Help - Scrolling Site

Scrolling Site

In this version of the help all the topics are in a single, scrollable area^[1].

JavaScript routines are used to highlight the current entry in the table of contents, and the index entry in the target page.

Click here to open the demo in a new window:

Scrolling Site demo

Pros

Easy for users to navigate through the help.
Especially iPad friendly.
Suitable for off-line browsing.

Cons

Not suitable for large help sites.

Structure

This version of the help comprises the following files:

Filenames	Description
index.html	The main page, containing all the content for the topics.
basic.css	CSS definitions.

As in the Dynamically-Loaded Site the design uses three div blocks, one fixed one for the heading, and two scrolling blocks for the contents/index, and topics:

The content area is divided into a series of divs, identified by their ids:

<div id='content' onScroll="HilightContents()">
  <div id="p01">
    ... topic 1 content ...
  </div>
  <div id="p02">
    ... topic 2 content ...
  </div>
  <div id="p03">
    ... topic 3 content ...
  </div>
</div>

Since all the content is on a single page, the contents links simply have to link to the id of the appropriate div; for example:

<a id="m02" href="#p02">Adding sites</a>

Contents highlighting

The onScroll event in the content div is used to run a JavaScript routine that automatically highlights the correct entry in the table of contents:

var pages = 6;

function HilightContents() {
  var scroll = document.getElementById('content').scrollTop + 16, todo = true;
  for (var i = pages; i >= 1; i--) {
    id = 'p0' + i;
    document.getElementById('m0' + i).className = 'off';
    if (scroll >= document.getElementById(id).offsetTop & todo) {
      document.getElementById('m0' + i).className = 'on';
      todo = false;
    }
  }
}

This checks the offset of each div, selected by its ID, and finds the first one that is currently scrolled into view. Then it uses this to add the 'on' class to the appropriate link in the contents, identified by its id.

Index

Index entries are simply links to the "a name=" anchors:

<a href="#a06-5">Statistics, spot</a>

Index highlighting

We can add an onClick event to call the JavaScript routine ShowAnchor() to highlight the index entry in the target page:

<p><a href="#a06-5" onClick="ShowAnchor(this);">Statistics, spot</a></p>

Here's the definition of ShowAnchor():

var anchor = '';

function ShowAnchor(link) {
  var id = link.hash.substr(1);
  HideAnchor();
  document.getElementById(id).className = 'hi';
  anchor = id;
}

function HideAnchor() {
  if (anchor != '') { 
    document.getElementById(anchor).className = 'off';
    anchor = '';
  }
}

It removes the highlight from the previous anchor, then highlights the current anchor, using the global variable anchor to store the id of the current anchor.

Cross references

Cross references are simply links to the appropriate anchor; for example:

<a href="#a03-1">Associates tab</a>

^ This was inspired by an early version of JavaScript Garden, which now takes the technique to another level