Web Help

Single-Page Site

The single-page site contains all the topics for the entire help in a single page, and uses JavaScript to show and hide the individual topics.

Click here to open the demo in a new window:

Single-Page Site Demo

Pros

• Fast navigation.
• Suitable for off-line browsing.

Cons

• Needs JavaScript.
• Initial load slow with a large help system.

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'>
  <div id="p01">
    ... topic 1 content ...
  </div>
  <div id="p02" style="display: none;">
    ... topic 2 content ...
  </div>
  <div id="p03" style="display: none;">
    ... topic 3 content ...
  </div>
</div>

Initially all but the first div is hidden, with style="display: none;".

Contents and contents highlighting

The contents links call the JavaScript routine ShowPage() to hide the previously selected topic and show the current topic:

<a id="m02" href="#" onClick="ShowPage('02');">Adding sites</a>

Here's the definition of ShowPage():

function ShowPage(id) {
  Swap('p' + selected,'p' + id);
  Hilight('m' + selected,'m' + id);
  selected = id; 
  document.getElementById('content').scrollTop = 0;
  HideAnchor();
}

This performs the following functions:

• Calls Swap to hide the previously displayed topic and display the selected one.
• Calls Highlight to highlight the appropriate link in the table of contents.
• Saved the current topic in the global variable selected.
• Resets the scroll position of the topic, in case it was scrolled.
• Calls HideAnchor() to hide any anchor highlight on the topic.

Here are the definitions of Highlight() and Swap():

function Hilight(hide,show) {
  document.getElementById(hide).className = '';
  document.getElementById(show).className = 'on';
}

function Swap(hide,show) {
  document.getElementById(hide).style.display = 'none';
  document.getElementById(show).style.display = 'block';
}

Index and index highlighting

Index entries call the ShowAnchor() JavaScript routine:

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

Here's the definition of ShowAnchor():

var anchor = '';

function ShowAnchor(id) {
  var page = id.substr(1,2);
  Swap('p' + selected,'p' + page);
  Hilight('m' + selected,'m' + page);
  selected = page; 
  document.getElementById('content').scrollTop =
    document.getElementById(id).offsetTop;
  HideAnchor();
  document.getElementById(id).className = 'hi';
  anchor = id;
}

Like ShowPage() if first shows the topic containing the anchor. It then scrolls the topic to the anchor, It removes the highlight from any previous anchor, and then highlights the current anchor, using the global variable anchor to store the id of the current anchor.

It uses HideAnchor() to hide any existing anchor:

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

Cross references

Cross references should call ShowPage() or ShowAnchor(), as appropriate; for example:

<a href="#" onClick="ShowPage('03');">Associates tab</a>

---

blog comments powered by Disqus