ansaurus

Question

Is there a JavaScript solution to generating a "table of contents" for a page?

Answer 1

A:

after page load, cycle through the DOM and look for the elements that interest you. build a nice list of anchors and add it to the document at the place of your desire.

Amir Arad 2008-10-09 14:57:58

Answer 2

+1 A:

Are you looking for a prepackaged solution or are you asking how this can be implemented?

For the latter, you could use ~~getElementsByTagName() recursively on <h1> through <h6>~~ XPath to iterate through all <h*> elements and construct the corresponding nested <ul> or <ol> lists. You'd also have to add the <a> tags to the headers.

Ates Goral 2008-10-09 14:59:27

Using Xpath assumes the document will be well-form XHTML.

Diodeus 2008-10-09 15:13:10

Yeah, and it also assumes that the browser supports XPath. Not the most universal solution I guess...

Ates Goral 2008-10-09 15:21:19

Answer 3

+3 A:

JQuery comes to mind as a fast and easy solution. A quick google search for jquery table of contents yields two promising results:

Francis Beaudet 2008-10-09 15:01:56

So, these "solutions" do not do re-create the structure recursively (with all h1..h6), right? -

Sergey Ilinsky 2008-10-09 15:29:15

Answer 4

A:

I wrote something a while ago which does this... It will need some adjusting though: http://enhance.qd-creative.co.uk/2008/05/27/navigable-content/

J-P 2008-10-09 15:03:01

Answer 5

A:

You can, but it depends on your layout if it would be a good solution, because if you employ floats and absolute positioned elements, DOM might not have elements as your visual representation present them ...

roenving 2008-10-09 15:04:39

Answer 6

A:

Check out the component you are looking for on this page: Re-inventing XMLHttpRequest: Cross-browser implementation with sniffing capabilities

It walks over entire document and creates a TOC with all h1-h6 elements reflected in an openable (upon hover) structure. The component is standalone and it doesn't use any library.

Sergey Ilinsky 2008-10-09 15:07:05

Answer 7

+3 A:

I couldn't resist putting together a quick implementation.

Add the following script anywhere on your page:

window.onload = function () {
    var toc = "";
    var level = 0;

    document.getElementById("contents").innerHTML =
     document.getElementById("contents").innerHTML.replace(
      /<h([\d])>([^<]+)<\/h([\d])>/gi,
      function (str, openLevel, titleText, closeLevel) {
       if (openLevel != closeLevel) {
        return str;
       }

       if (openLevel > level) {
        toc += (new Array(openLevel - level + 1)).join("<ul>");
       } else if (openLevel < level) {
        toc += (new Array(level - openLevel + 1)).join("</ul>");
       }

       level = parseInt(openLevel);

       var anchor = titleText.replace(/ /g, "_");
       toc += "<li><a href=\"#" + anchor + "\">" + titleText
        + "</a></li>";

       return "<h" + openLevel + "><a name=\"" + anchor + "\">"
        + titleText + "</a></h" + closeLevel + ">";
      }
     );

    if (level) {
     toc += (new Array(level + 1)).join("</ul>");
    }

    document.getElementById("toc").innerHTML += toc;
};

Your page should be structured something like this:

<body>
    <div id="toc">
     <h3>Table of Contents</h3>
    </div>
    <hr/>
    <div id="contents">
     <h1>Fruits</h1>
     <h2>Red Fruits</h2>
     <h3>Apple</h3>
     <h3>Raspberry</h3>
     <h2>Orange Fruits</h2>
     <h3>Orange</h3>
     <h3>Tangerine</h3>
     <h1>Vegetables</h1>
     <h2>Vegetables Which Are Actually Fruits</h2>
     <h3>Tomato</h3>
     <h3>Eggplant</h3>
    </div>
</body>

You can see it in action at http://magnetiq.com/exports/toc.htm (Works in IE, FF, Safari, Opera)

Ates Goral 2008-10-09 15:59:43

Not tested, but it looks somewhat solid.

Thomas Owens 2009-01-05 13:06:33

ansaurus

tags:

views:

answers:

Is there a JavaScript solution to generating a "table of contents" for a page?

related questions