Home /Design Services /Website Design /JavaScript Navigation
More software & web design solutions ▼

JavaScript Navigation
Table of contents and menus on the fly.

Do you need an automatically generated table of contents or menu system for an HTML document collection?

The Old Way

In the old days web authors who wanted a table of contents whose links would "jump" to specific parts of web documents had to manually maintain named anchors in the document set like this:
<a name="linkname">
and then carefully match those name attributes in the table of contents (or menu) links like this:
<a href="path/to/document.html#linkname">
Jump to linkname section</a>
This solution is laborious and error prone. Whenever sections are added or deleted in one of the documents, or if the order of sections change, the table of contents needs to be updated. And the name attribute has been deprecated in XHTML.

A Better Solution

In practice such menu systems often (if not usually) jump to sections that have heading tags (<H1>, etc.) With our JavaScript Navigation solution a linked table of contents is generated on the fly from the heading tags in an HTML document set, without using a single named anchor tag. Instead it uses IDs in the heading tags, but if they are missing it adds them for you too.

This means that when you add, delete or reorder the heading you have nothing to do to update the table of contents or menu because it changes automatically. That's right - automatically!

What Does It Take?

1. An HTML file for the table of contents or menu, which can be loaded in an iframe or a pop-up window (one of the few good uses for a pop-up window). This file contains:
  1. A simple array of URLs and titles for the documents to be included in the table. (If a title is missing, the code gets it from the <title> tag.)
  2. An optional variable to restrict the heading levels to include. (The default is all levels, 1 through 6.)
  3. Optional buttons to navigate forward and backward through the documents.
  4. A single line calling a JavaScript function to generate the table of contents.
2. In each of the HTML files for the document set:
  1. Load our JavaScript file in a <script> tag.
  2. Add a link to launch the table of contents or menu file.
  3. Add an onLoad event handler to the <body> tag which expands it's contents in the table (when loaded from the table).
  4. No named anchors! No manually added IDs!

An Example

Click on this screenshot to launch this example table of contents using our JavaScript Navigation code. (Use the History Back buttons to get back here.)

Browser Support

This JavaScript Navigation tool has been tested with Firefox and MSIE 6.x on Windows XP, as well as Mozilla on Solaris/x86. It should work with any truly W3C DOM compliant browser. It probably won't work on MSIE 5.x or Netscape 4.x. Making advanced web features work on both of these flavors of browser was always a headache because they implemented their DOMs so differently. As of this writing they have so little of the market share that they are simply no longer worth worrying about.

If you need help designing and implementing your JavaScript software applications or web design, call Design MatriX at (310) 455 3107 or

Joint projects with other software and web designers are welcome.

See Also:
Home /Design Services /Website & Intranet Design
Home /Design Services /Website Design /JavaScript Slide Show
Home /Design Services /Website Design /JavaScript Email Database
Home /Design Services /Software Design & Engineering