Web Designing Tutorials

How to Create Table of Contents Using JavaScript

Google+ Pinterest LinkedIn Tumblr

#TOC {border:solid black 1px; margin:10px; padding:10px;}
.TOCEntry{font-family:sans-serief;}
.TOCEntry a{text-decoration:none;}
.TOCLevel1{font-size:17pt; font-weight:bold;}
.TOCLevel2{font-size:16pt; font-weight:bold;}
.TOCLevel3{font-size:15pt; font-weight:bold;}
.TOCLevel4{font-size:14pt; margin-left:.25in;}
.TOCSectNum{display:none;}

window.onload=function(){

function getSelectedText(){
if (window.getSelection)
return window.getSelection().toString()+”
“+document.URL;
else if (document.selection)
return document.selection.createRange().text+”
“+document.URL;
}

var toc=document.getElementById(“TOC”);
if(!toc) {
toc=document.createElement(“div”);
toc.id=”TOC”;
document.body.insertBefore(toc, document.body.firstChild);
}
var headings;
if (document.querySelectorAll)
headings=document.querySelectorAll(“#tp h1, #tp h2, #tp h3, #tp h4, #tp h5, #tp h6″);
else
headings=findHeadings(document.body, []);

function findHeadings(root, sects){
for(var c=root.firstChild; c!=null; c=c.nextSibling){
if (c.nodeType!==1) continue;
if (c.tagName.length==2 && c.tagName.charAt(0)==”H”)
sects.push(c);
else
findHeadings(c, sects);
}
return sects;
}

var sectionNumbers=[0,0,0,0,0,0];

for(var h=0; h

Shuseel Baral is a web programmer and the founder of InfoTechSite has over 5 years of experience in software development, internet, SEO, blogging and marketing digital products and services is passionate about exceeding your expectations.

Write A Comment