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:
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.)
An optional variable to restrict the heading levels to include.
(The default is all levels, 1 through 6.)
Optional buttons to navigate forward and backward through the
documents.
A single line calling a JavaScript function to generate the
table of contents.
2. In each of the HTML files for the document set:
Load our JavaScript file in a <script> tag.
Add a link to launch the table of contents or menu file.
Add an onLoad event handler to the
<body> tag which expands it's contents in the
table (when loaded from the table).
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.
Interactive Image Editing
