Full version: jsB@nk » Link » Build TOC
URL: https://www.javascriptbank.com/build-toc.html
This 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
<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--><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--><!-- 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-->