An automated generated TOC on each page#

The following code sniplets adds an automated generated TOC on each page. There are 5 steps to implement it. --Heinz-Josef L├╝cking 24.06.2004--

Works in: I.E 5.5 and 6.0
Does not work in: Netscape 4.75

  • Create a file named toc.js in your default template directory, add the script below and save it.
  • Add CSS (see below) to jspwiki.css
  • In "ViewTemplate.jsp" (in your default template dir) add onload="generate_TOC('toc'); to the <body> section. Within the default JSPWiki template it will then look like:
<BODY BGCOLOR="#FFFFFF" onload="generate_TOC('toc');">
  • Open "PageContent.jsp" and add <div id="toc"></div> before the line that contains <wiki:InsertPage />. You can also add a headline too <div id="toc"> <strong>Content</strong></div>.
  • Open the file "cssinclude.js" (in your default template dir) an add the following line to the end of that file:
<script src="templates/<wiki:TemplateDir? />/toc.js" type="text/javascript"></script>

The script code is from http://www.dynarch.com/mishoo/toc.epl (with a detailed description). the scripts are free to use under the terms of the GNU General Public License, as long as you do not remove or alter the notice described below.

Step 2. Add script to toc.js and save it.

/* Author: Mihai Bazon, September 2002
 * http://students.infoiasi.ro/~mishoo
 *
 * Table Of Content generator
 * Version: 0.4
 *
 * Feel free to use this script under the terms of the GNU General Public
 * License, as long as you do not remove or alter this notice.
 */


function H_getText(el) {
  var text = "";
  for (var i = el.firstChild; i != null; i = i.nextSibling) {
    if (i.nodeType == 3 /* Node.TEXT_NODE, IE doesn't speak constants */)
      text += i.data;
    else if (i.firstChild != null)
      text += H_getText(i);
  }
  return text;
}

function TOC_EL(el, text, level) {
  this.element = el;
  this.text = text;
  this.level = level;
}

function getHeadlines(el) {
  var l = new Array;
  var rx = /[hH]([1-6])/;
  // internal recursive function that scans the DOM tree
  var rec = function (el) {
    for (var i = el.firstChild; i != null; i = i.nextSibling) {
      if (i.nodeType == 1 /* Node.ELEMENT_NODE */) {
        if (rx.exec(i.tagName))
          l[l.length] = new TOC_EL(i, H_getText(i), parseInt(RegExp.$1));
        rec(i);
      }
    }
  }
  rec(el);
  return l;
}

function generate_TOC(parent_id) {
  var parent = document.getElementById(parent_id);
  var hs = getHeadlines(document.getElementsByTagName("body")[0]);

/* Comment
 * the iteration begins with 2 to exlude the JSPWiki link (logo) and the generated headline.
 */

  for (var i = 2; i < hs.length; ++i) {
    var hi = hs[i];
    var d = document.createElement("div");
    if (hi.element.id == "")
    {
      hi.element.id = "gen" + i;
    }
    var a = document.createElement("a");
    a.href = "#" + hi.element.id;
    a.appendChild(document.createTextNode(hi.text));
    d.appendChild(a);
    d.className = "level" + hi.level;
    parent.appendChild(d);
  }
}

Step.3 Add this CSS? to jspwiki.css.


#toc {
  float: none;
  font-size: 80%;
  border: 1px solid;
  margin: 0px 0px 20px auto;
  padding: 5px;
  font-family: Tahoma,Verdana,sans-serif;
}

#toc .level1 { font-weight: bold; }
#toc .level2 { margin-left: 1em; }
#toc .level3 { margin-left: 2em; }
#toc .level4 { margin-left: 3em; }
#toc .level5 { margin-left: 4em; }
#toc .level6 { margin-left: 5em; }

Add new attachment

Only authorized users are allowed to upload new attachments.
« This page (revision-6) was last changed on 24-Sep-2004 05:02 by PaulDownes