Javascript Tricks, Code Samples and Snippets
/ JTricks.com Home / 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
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 1
Chapter 2
Part 2
Script source code
To use the script perform the following steps:

<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
or at least rate it @ hotscripts.com!
 
© JTricks.com 2005-2009. All rights reserved.