»
EnglishFrenchVietnamese

Print - Build TOC - JavaScriptBank.com

Full version: jsB@nk » Link » Build TOC
URL: https://www.javascriptbank.com/build-toc.html

Build TOC © JavaScriptBank.comThis JavaScript will automatically build a table of contents based on the header tags found on the Web page. Includes an optional access key [Alt-t] to return to the ToC. Supports DOM standard and works on non-IE browsers

Full version: jsB@nk » Link » Build TOC
URL: https://www.javascriptbank.com/build-toc.html



CSS
<style type="text/css"><!--#TOC {  margin: 0px;  display: inline;  border-style: none;}#TOC a.:link {  color:blue;text-decoration:none}#TOC a:visited {  color:orange;text-decoration:none}#TOC a:hover {  color:red;text-decoration:underline}#TOC a:active {  color:green;text-decoration:underline}#TOC li.H1 {  font: normal normal normal 14pt Comic Sans MS,verdana,georgia,arial;  list-style-type: none;  margin-left: 0px;}#TOC li.H2 {  font: normal normal normal 12pt Comic Sans MS,verdana,georgia,arial;  list-style-type: none;  line-height:16px;  margin-left: 10px;}#TOC li.H3 {  font: normal normal normal 10pt verdana,Comic Sans MS,georgia,arial;  list-style-type: none;  line-height:16px;  margin-left: 20px;}#TOC li.H4 {  font: italic normal normal 10pt verdana,Comic Sans MS,georgia,arial;  list-style-type: none;  line-height:16px;  margin-left: 30px;}#TOC li.H5 {  font: italic normal normal 10pt verdana,Comic Sans MS,georgia,arial;  list-style-type: none;  line-height:16px;  margin-left: 40px;}#TOC li.H6 {  font: italic normal normal 10pt verdana,Comic Sans MS,georgia,arial;  list-style-type: none;  line-height:16px;  margin-left: 50px;}--></style><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


JavaScript
<script type="text/javascript"><!-- Begin// Created by: Stephen Morley :: http://sbm.customer.netspace.net.auvar stateTOC = 'ON';function toggleTOC() {  if (stateTOC == 'ON') {    stateTOC = 'OFF'    document.getElementById('TOC').style.display = "none";  }  else {    stateTOC = 'ON'    document.getElementById('TOC').style.display = "inline";  }}function buildTOC() {  /***************************************/  /* Get desired tags and store in array */  /***************************************/  /* Define list of tags to include in toc  Each valid tag must be bounded by spaces to satisfy the test below.  The beginning & end '.'s merely stop leading &  trailing whitespaces being removed.*/  validTagList = '. H1 H2 H3 H4 H5 H6 .';  // Get list of all tags & store in array.  // DOM Level 1 Standard */  if (document.body.childNodes) {    // alert('DOM Standard');    allTags = getObjects();  }  // Microsoft proprietry intermediate DOM  else if (document.all) {    // alert('document.all');    allTags = document.all;  }  // Netscape proprietry intermediate DOM  else if (document.layers) {    // alert('document.layers');    alert('Netscape layers? What to do, what to do ....');  }  var tagDetail = new Array(1);  j = 0;  aNum = 0;  for(i = 0; i < allTags.length; i++) {    if (validTagList.indexOf(' '+allTags[i].tagName+' ') > 0) {      // Add an anchor as a child to the tag so that toc link to it      aNum = aNum + 1;      var aNode = document.createElement("A");      aNode.id = 'Z'+aNum;      allTags[i].appendChild(aNode);      // Keep relevant data fron the tag to use in toc separated by "|".      // ....the name of the tag (eg. H3)      tagDetail[j] = allTags[i].tagName + "|";      // ....the anchor number we have assigned      tagDetail[j] = tagDetail[j]+aNum + "|";      // ....the text of the tag        if (allTags[i].childNodes.length > 0) {          tagDetail[j] = tagDetail[j]+allTags[i].childNodes[0].nodeValue      }      ;      j = j + 1;    }  }  /***************************************/  /*Build toc                            */  /***************************************/  var ulNode = document.createElement("UL");  tocId = document.getElementById('TOC');  tocId.appendChild(ulNode);  for(i = 0; i < tagDetail.length; i++) {    thisDetail = tagDetail[i].split("|");    var liNode = document.createElement("LI");    liNode.className = thisDetail[0];    ulNode.appendChild(liNode);    var aNode = document.createElement("A");    aNode.className = thisDetail[0];    aNode.href = '#Z'+thisDetail[1];    liNode.appendChild(aNode);    aNode.innerHTML = thisDetail[2];    // alert('i='+i + ' tagName='+aNode.tagName + ' href='+aNode.href + ' className='+aNode.className + ' text='+aNode.innerText);  }}function getObjects() {  var obj = new Array(1);  j = 0;  obj[j] = document.documentElement;  traverse( document.documentElement );  function traverse(node) {    obj[j] = node;    j = j + 1;    if (node.childNodes != null) {      for (var i=0; i < node.childNodes.length; i++) {        traverse(node.childNodes.item(i));      }    }  }  return obj;}//--></script><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<!-- Optional anchor for return to TOC --><a id=tocPos></a><!-- Optional access key (ALT-t) to return to TOC --><a href="#tocPos" title="AccessKey: t" accesskey="t"></a><!-- Optional button to toggle TOC on/off --><input   type = "button"   value = "Table of Contents"   onclick = "toggleTOC()"><!-- Required div to position TOC --><div id=TOC></div><h1>header 1</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore</p><h2>header 1.1</h2><h3>header 1.1.1</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore</p><h1>header 2</h1><h2>header 2.1</h2><h3>header 2.1.1</h3><h4>header 2.1.1.1</h4><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore</p><h4>header 2.1.1.2</h4><p>paragraph 4</p><h3>header 2.1.2</h3><h4>header 2.1.2.1</h4><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore</p><h1>header 3</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore</p><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->