i found a script that creates a table of content for sharepoint sites. It works fine, but at our sharepoint sites the first headline (H1) is the page title. So i have to skip the first Headline (Page title).
Does anybody know which part i have to edit to fit the skript for my needs? =)
<!--
The TOC Container.
The most important thing to note is the ID.
The ID is used by the CSS and the JavaScript code.
-->
<ul id="sp-toc"></ul>
<style type="text/css">
#sp-toc {
padding: 10px;
/* Add a padding between the border and the TOC content */
background-color: #f9f9f9;
/* Add a background color of the TOC */
min-width: 200px;
/* Add only a minimal width like that, the TOC can be extensible */
display: inline-block;
border: 1px solid #aaaaaa;
/* Add a border arround the TOC */
list-style: none;
/* Remove default style list */
}
#sp-toc li {
/* If you need to add custom style on all <li> */
}
#sp-toc li a {
text-decoration: none;
/* Remove default link underline */
}
#sp-toc .class-toc-h1 {
/* currently, the first level supported by the script */
}
#sp-toc .class-toc-h2 {
/* Add a indentation greatter than the previous one */
padding-left: 10px;
}
#sp-toc .class-toc-h3 {
/* Add a indentation greatter than the previous one */
padding-left: 20px;
}
#sp-toc .class-toc-h4 {
/* Add a indentation greatter than the previous one */
padding-left: 30px;
}
#sp-toc .class-toc-h5 {
/* Add a indentation greatter than the previous one */
padding-left: 40px;
}
#sp-toc .class-toc-h6 {
/* Add a indentation greatter than the previous one */
padding-left: 50px;
}
</style>
<script type="text/javascript">
/**
* The main function to build TOC
*/
function buildToc() {
/* Init title level counters */
var countH1 = countH2 = countH3 = countH4 = countH5 = countH6 = 0;
/**
* DOMElement : the TOC container retrieved by ID
*/
var toc = document.getElementById("sp-toc");
/**
* Insert into TOC container the chapters
*/
toc.innerHTML = nodesToc();
/**
* TOC Builder
*/
function nodesToc() {
/* Get all HTML tags from the current page */
var obj = document.getElementsByTagName("*");
var tagList = "H1;H2;H3;H4;H5;H6;";
var str = "";
/* Loop on each HTML tag */
for (var i = 0; i < obj.length; i++) {
/* If tag is a title tag */
if (tagList.indexOf(obj[i].tagName + ";") >= 0) {
/* Get the number of the multilevel list in accordance with the current title */
var lvl = getNumberLevel(obj[i].tagName);
/* HTML template */
str += "<li class='" + getClassLvl(obj[i].tagName) + "'><a href='#title-" + i + "'>" + lvl + " " + obj[i].innerHTML + "</a></li>";
obj[i].id = "title-" + i;
}
}
return str;
}
/**
* Get CSS class in accordance with the title level
*/
function getClassLvl(_tagName) {
return "class-toc-h" + _tagName.replace(/h/ig, '');
}
/**
* Multilevel list generator
*/
function getNumberLevel(_tagName) {
if (_tagName === "H1") {
countH2 = countH3 = countH4 = countH5 = countH6 = 0;
return ++countH1;
} else if (_tagName === "H2") {
countH3 = countH4 = countH5 = countH6 = 0;
return countH1 + "." + ++countH2;
} else if (_tagName === "H3") {
countH4 = countH5 = countH6 = 0; /* Reset next level number */
return countH1 + "." + countH2 + "." + ++countH3;
} else if (_tagName === "H4") {
countH5 = countH6 = 0; /* Reset next level number */
return countH1 + "." + countH2 + "." + countH3 + "." + ++countH4;
} else if (_tagName === "H5") {
countH6 = 0; /* Reset next level number */
return countH1 + "." + countH2 + "." + countH3 + "." + countH4 + "." + ++countH5;
} else if (_tagName === "H6") {
return countH1 + "." + countH2 + "." + countH3 + "." + countH4 + "." + countH5 + "." + ++countH6;
}
}
}
/* Register TOC function after SP page is loaded */
_spBodyOnLoadFunctionNames.push("buildToc");
</script>
in the meantime i got a hint from the code writer and the code below matches exactly my needs.
<!--
The TOC Container.
The most important thing to note is the ID.
The ID is used by the CSS and the JavaScript code.
-->
<ul id="sp-toc"></ul>
<style type="text/css">
#sp-toc {
padding: 10px;
/* Add a padding between the border and the TOC content */
background-color: #f9f9f9;
/* Add a background color of the TOC */
min-width: 200px;
/* Add only a minimal width like that, the TOC can be extensible */
display: inline-block;
border: 1px solid #aaaaaa;
/* Add a border arround the TOC */
list-style: none;
/* Remove default style list */
}
#sp-toc li {
/* If you need to add custom style on all <li> */
}
#sp-toc li a {
text-decoration: none;
/* Remove default link underline */
}
#sp-toc .class-toc-h1 {
/* currently, the first level supported by the script */
}
#sp-toc .class-toc-h2 {
/* Add a indentation greatter than the previous one */
padding-left: 10px;
}
#sp-toc .class-toc-h3 {
/* Add a indentation greatter than the previous one */
padding-left: 20px;
}
#sp-toc .class-toc-h4 {
/* Add a indentation greatter than the previous one */
padding-left: 30px;
}
#sp-toc .class-toc-h5 {
/* Add a indentation greatter than the previous one */
padding-left: 40px;
}
#sp-toc .class-toc-h6 {
/* Add a indentation greatter than the previous one */
padding-left: 50px;
}
</style>
<script type="text/javascript">
/**
* The main function to build TOC
*/
function buildToc() {
/* Init title level counters */
var countH1 = countH2 = countH3 = countH4 = countH5 = countH6 = 0;
/**
* DOMElement : the TOC container retrieved by ID
*/
var toc = document.getElementById("sp-toc");
/**
* Insert into TOC container the chapters
*/
toc.innerHTML = nodesToc();
/**
* TOC Builder
*/
function nodesToc() {
/* Get all HTML tags from the current page */
var obj = document.getElementsByTagName("*");
var tagList = "H1;H2;H3;H4;H5;H6;";
var str = "";
var pageTitle = false;
/* Loop on each HTML tag */
for (var i = 0; i < obj.length; i++) {
/* If tag is a title tag */
if (tagList.indexOf(obj[i].tagName + ";") >= 0) {
if ('H1' == obj[i].tagName && !pageTitle) {
pageTitle = true;
} else {
/* Get the number of the multilevel list in accordance with the current title */
var lvl = getNumberLevel(obj[i].tagName);
/* HTML template */
str += "<li class='" + getClassLvl(obj[i].tagName) + "'><a href='#title-" + i + "'>" + lvl + " " + obj[i].innerHTML + "</a></li>";
obj[i].id = "title-" + i;
}
}
}
return str;
}
/**
* Get CSS class in accordance with the title level
*/
function getClassLvl(_tagName) {
return "class-toc-h" + _tagName.replace(/h/ig, '');
}
/**
* Multilevel list generator
*/
function getNumberLevel(_tagName) {
if (_tagName === "H1") {
countH2 = countH3 = countH4 = countH5 = countH6 = 0;
return ++countH1;
} else if (_tagName === "H2") {
countH3 = countH4 = countH5 = countH6 = 0;
return countH1 + "." + ++countH2;
} else if (_tagName === "H3") {
countH4 = countH5 = countH6 = 0; /* Reset next level number */
return countH1 + "." + countH2 + "." + ++countH3;
} else if (_tagName === "H4") {
countH5 = countH6 = 0; /* Reset next level number */
return countH1 + "." + countH2 + "." + countH3 + "." + ++countH4;
} else if (_tagName === "H5") {
countH6 = 0; /* Reset next level number */
return countH1 + "." + countH2 + "." + countH3 + "." + countH4 + "." + ++countH5;
} else if (_tagName === "H6") {
return countH1 + "." + countH2 + "." + countH3 + "." + countH4 + "." + countH5 + "." + ++countH6;
}
}
}
/* Register TOC function after SP page is loaded */
_spBodyOnLoadFunctionNames.push("buildToc");
</script>
Source: https://gitlab.lsonline.fr/SharePoint/javascript-customactions/-/snippets/83