View Attach Info

Deleteme

An automated generated TOC on each page#

The following code sniplets adds an automated generated TOC on each page. There are three steps to implement it.

  1. Create a file named toc.js and put it into your default template directory
  2. Add script (see below) to toc.js and save it.
  3. Add CSS (see below) to jspwiki.css
  4. 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');">
  5. 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 line <script src="templates/<wiki:TemplateDir? />/toc.js" type="text/javascript"></script> to the end of that file.

The script code is from http://dynarch.com:1979/mishoo/toc.epl (with a detailed description). Comments from there: 

/* 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.
 */

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]);
  if (hs.length > 2)
  {
  }
  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

In order to upload a new attachment to this page, please use the following box to find the file, then click on “Upload”.
« This page (revision-5) was last changed on 17-Jul-2006 22:11 by Janne Jalkanen