How to Create Table of Contents Using JavaScript
468x60
You can create dynamic table of contents for any HTML document using JavaScript which can show the list of headings from h1 to h6 with links to the headings and make easier to navigate through the document.
In this post I am going to describe about the steps to Create Table of Contents Using JavaScript and about the JavaScript codes required to create dynamic table of contents.
To create this set of JavaScript codes for creating table of contents, at first you have to know the different JavaScript concepts like selecting elements, document traversal, setting element attributes, setting innerHTML property, creating nodes and inserting then into the document.
At first create window.onload function that runs automatically when the document finishes loading as given below.
When the above function runs, it first looks for a document element with an id of "TOC". If there is no such element it creates on at the start of the document.
Add the following codes to the function to find all <h1> through <h6> tags and sets them as headings.
Then recursively traverse the document body looking for headings using function: findHeadings(root, sects){ }
Initialize an array: var sectionNumber=[0,0,0,0,0,0]; that keeps track of section numbers and add section numbers to each section numbers to each section heading and wrap the headings in named anchors so that the TOC can link to them.
Write CSS code to style created table of contents. Where all entries have a class "TOCEntry" and the section headings from <h1> to <h6> have class name "TOCLevel1" to "TOCLevel6" and the section number inserted into headings have class "TOCSectNum".
Here is a full CSS code within <style> </style> tag to style table of contents.
Here is a full JavaScript Code To Create Table of Contents within <script> </script> tag.
You can see the preview of Table of contents generated by JavaScript code above. If you have any problem or difficulties while implementing the above JavaScript code, you are welcomed to mention on the comment session at the bottom this post.
In this post I am going to describe about the steps to Create Table of Contents Using JavaScript and about the JavaScript codes required to create dynamic table of contents.
To create this set of JavaScript codes for creating table of contents, at first you have to know the different JavaScript concepts like selecting elements, document traversal, setting element attributes, setting innerHTML property, creating nodes and inserting then into the document.
Steps to Create Table of Contents Using JavaScript
At first create window.onload function that runs automatically when the document finishes loading as given below.
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);
}
When the above function runs, it first looks for a document element with an id of "TOC". If there is no such element it creates on at the start of the document.
Add the following codes to the function to find all <h1> through <h6> tags and sets them as headings.
var headings;
if (document.querySelectorAll)
headings=document.querySelectorAll("h1, h2, h3, h4, h5, h6");
else
headings=findHeadings(document.body, []);
Then recursively traverse the document body looking for headings using function: findHeadings(root, sects){ }
Initialize an array: var sectionNumber=[0,0,0,0,0,0]; that keeps track of section numbers and add section numbers to each section numbers to each section heading and wrap the headings in named anchors so that the TOC can link to them.
Write CSS code to style created table of contents. Where all entries have a class "TOCEntry" and the section headings from <h1> to <h6> have class name "TOCLevel1" to "TOCLevel6" and the section number inserted into headings have class "TOCSectNum".
Full CSS Code To Style Table of Contents
Here is a full CSS code within <style> </style> tag to style table of contents.
<style>
#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;}
</style>
Full JavaScript Code To Create Table of Contents
Here is a full JavaScript Code To Create Table of Contents within <script> </script> tag.
<script>
window.onload=function(){
function getSelectedText(){
if (window.getSelection)
return window.getSelection().toString()+"<br/>"+document.URL;
else if (document.selection)
return document.selection.createRange().text+"<br/>"+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("h1, h2, h3, h4, h5, 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<headings.length; h++) {
var heading=headings[h];
if(heading.parentNode==toc) continue;
var level=parseInt(heading.tagName.charAt(1));
if (isNaN(level)||level<1||level>6) continue;
sectionNumbers[level-1]++;
for(var i=level; i<6; i++) sectionNumbers[i]=0;
var sectionNumber=sectionNumbers.slice(0, level).join(".");
var span=document.createElement("span");
span.className="TOCSectNum";
span.innerHTML=sectionNumber;
heading.insertBefore(span, heading.firstChild);
heading.id="TOC"+sectionNumber;
var anchor=document.createElement("a");
heading.parentNode.insertBefore(anchor, heading);
anchor.appendChild(heading);
var link=document.createElement("a");
link.href="#TOC"+sectionNumber;
link.innerHTML=heading.innerHTML;
var entry=document.createElement("div");
entry.className="TOCEntry TOCLevel" + level;
entry.appendChild(link);
toc.appendChild(entry);
}
};
</script>
You can see the preview of Table of contents generated by JavaScript code above. If you have any problem or difficulties while implementing the above JavaScript code, you are welcomed to mention on the comment session at the bottom this post.
Related Search Terms
Related Posts:
How to Show Pop Up Window Using JavaScript
How to go Back Browsing History Using JavaScript
How to Click Button Using JavaScript?
How to Write JavaScript Function as URL in Hyperlink?
How to use Round, Random, Min and Max in JavaScript
How to Concatenate, Join and Sort Array in JavaScript?
How to Loop Through JavaScript Array?
How to Loop using JavaScript?
How to Show Pop Up Boxes Using JavaScript?
How to Write Conditional Statements in JavaScript?
How to Write JavaScript With HTML?
How to create Changeable Date and Time Using JavaScript?
How to Validate a HTML Form Using JavaScript?
How to create a simple form using HTML?
How to Create JavaScript Image Sideshow with Links
How to Display Date Format in JavaScript?
How to Validate a HTML Form Using JavaScript?
What are the Different Ways to Redirect Page in JavaScript?
How to create Timer Using JavaScript?
How to make rounded corners border using CSS
How to Create Custom CSS Template for Printing
How to create a simple form using HTML?
468x60
250x300
التالي
« التدوينة السابقة
« التدوينة السابقة
السابق
التدوينة التالية »
التدوينة التالية »