/ JTricks.com
/ Navigation
/ Smart Table of Contents
Last updated: 02 Feb 2006
Smart Table of Contents
Content navigation existed long before computers were invented. Table of contents was one of the methods
and served well for centuries. The concept still survives and has found its place among the WWW pages
navigation methods. Many sites (especially with long textual content) employ it.
The static nature of the book meant the table of contents and the content itself had to be in different places. But it doesn't need to be the same for the web pages.
The javascript snippet offered here will allow placing the content inside the table of contents and navigate it as a single element.
Both sequential and table of contents navigation is provided. The user can read the contents clicking Previous/Next links or access parts directly. The DHTML script can also be used to create site dynamic menus.
Script demonstration
|
Part 1
Prologue
Part 2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam quis justo sit amet risus
sollicitudin adipiscing. Aliquam tristique tristique erat. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Aliquam volutpat. Suspendisse potenti.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras convallis tristique nibh. Nullam.
Chapter 1Chapter 2 |
Script source code
To use the script perform the following steps:- Put the following script source before page contents (or put in separate file and reference it):
<script type="text/javascript"><!--
/* Script by: www.jtricks.com
* Version: 20060105
* Latest version:
* www.jtricks.com/javascript/navigation/toc.html
*/
function toc_toggle(obname)
{
ob = document.getElementById(obname);
if (ob.style.display == '')
ob.style.display='none';
else
ob.style.display='';
}
function toc_parent(obsearch, ob)
{
var obp = obsearch;
while (obp != null && obp != ob)
{
obp = obp.parentNode;
}
return obp == ob;
}
function toc_switch(obnameto, obnamefrom)
{
var obto = document.getElementById(obnameto);
var obfrom = document.getElementById(obnamefrom);
var obtry = obfrom;
// Find commn parent
while (!toc_parent(obto, obtry))
{
obtry = obtry.parentNode;
}
var obcommon = obtry;
// Show the DIV/SPAN we switch to
// (up to the common parent)
obtry = obto;
while (obtry != obcommon)
{
if (obtry.nodeName == 'DIV' ||
obtry.nodeName == 'SPAN')
{
obtry.style.display = '';
}
obtry = obtry.parentNode;
}
// Hide the DIV/SPAN we switch from
// (up to the common parent)
obtry = obfrom;
while (obtry != obcommon)
{
if (obtry.nodeName == 'DIV' ||
obtry.nodeName == 'SPAN')
{
obtry.style.display = 'none';
}
obtry = obtry.parentNode;
}
}
//--></script>
- Establish table of conents structure by using the A and DIV tags. For example:
<a href="javascript:toc_toggle('d_dp1')">Part 1</a><br>
<div id="d_dp1">
<a name="a_dpr"
href="javascript:toc_toggle('d_dpr')">Prologue</a>
<br>
<div id="d_dpr">
----------------------------
First text chapter goes here
----------------------------
<a href="#a_dc1"
onclick="toc_switch('d_dc1', 'd_dpr')">Next</a>
</div>
<a name="a_dc1"
href="javascript:toc_toggle('d_dc1')">Chapter 1</a>
<br>
<div id="d_dc1">
-----------------------------
Second text chapter goes here
-----------------------------
<a href="#a_dpr"
onclick="toc_switch('d_dpr', 'd_dc1')">Previous</a>
</div>
</div>
The A tags, which open/close the
DIV tags just after them, using the toc_toggle() javascript function call, are
placed first. These constructs can be nested. To provide the sequential
navigation method, DIVs can also contain hyperlinks to the beginning of the
next or previous text portion with changing parts visibility through onclick
event.
- Add style information to hyperlinks and DIVs - margins (margin-left:20px) and default content display mode (display:none for DIVs to be initially hidden) as neccessary.
Browser compatibility
The javascript snippet above was tested on the following user agents:| Modern | Firefox 1.0.x | Ok. |
| Opera 8.01 | Ok. | |
| Steam age | Internet Explorer 6.0 | Ok. |
| Ancient stuff | Netscape Navigator 4.79 | Initially hidden chapters remain hidden. Links downgrade gracefully - they still scroll to apropriate document parts. |
| Internet Explorer 5.5 | Ok. | |
| No Javascript or Javascript turned off |
Any | Initially hidden chapters remain hidden. Links downgrade gracefully - they still scroll to apropriate document parts. |
The compatibility problems can be solved by adding a separate style sheet to hide the needed parts, which will be added to the document via javascript. This will make all the chapters initally visible for incompatible browsers and when javascript is turned off.
Donations and Script Rating
| If you like our script, please |