[JS]: Table of Contents

09/25/2019

Below post shows how to create table of contents by using vanilla javascript

Page anchors allow the href links to scroll through page more conviniently. For example, creating an anchor like this

HTML

<a id="section2"> section title </a>

allows href to auto-scroll to where above tag is placed

HTML

Click <a href="#section2">here </a> to read sesction 4

For long posts, I wanted to create table of contents links to scroll through easily

HTML

<section class="page__content">
  <div style="line-height: 60%">
    <h3>Contents:</h3>
    <ol>
      <li><a class="smallLink" href="#concat">CONCAT</a></li>
      <br />
      <li><a class="smallLink" href="#concat_ws">CONCAT_WS</a></li>
      <br />
      <li><a class="smallLink" href="#substring">SUBSTRING</a></li>
      <br />
      <li><a class="smallLink" href="#replace">REPLACE</a></li>
      <br />
      <li><a class="smallLink" href="#reverse">REVERSE</a></li>
      <br />
    </ol>
  </div>
</section>

However, it can be hassel to create these links for each post. To avoid this, use of javascript can help with creating table of contents automatically by reading certain tags in post.

Code Reference

HTML

<!-- Static pieces of code -->
<div style="line-height: 60%">
  <h3>Contents:</h3>
  <ol>
    <!-- Dynamic piece of code -->
    <li><a href="${" link }> ${ title } </a></li>
    <br />
    ...
  </ol>
</div>

1. Create string that are static

Build the string with js variable

// Create a string of HTML
var ToC = "<div style='line-height: 60%'>" + "<h3>Contents:</h3>" + "<ol>"

Next following elements are dynamic, so we need to iterate them

2. Loop through tags with jQuery

// Scan all <h2> tags in <sesion>
$("section h2").each(function() {})

3. Declare variables

var title, link, elmt

$("section h2").each(function() {
  elmt = $(this)
  title = elmt.text()
  link = "#" + elmt.attr("id")
})

elmt is h2 tag itself. Used to extract title and link below

HTML

<li><a href="${" link }> ${ title } </a></li>

4. Create and append dynamic string

var newLine, title, link, elmt

$("section h2").each(function() {
  elmt = $(this)
  title = elmt.text()
  link = "#" + elmt.attr("id")

  newLine =
    "<li>" +
    "<a class='smallLink' href='" +
    link +
    "'>" +
    title +
    "</a><br/>" +
    "</li>"

  // Append
  ToC += newLine
})

smallLink class is to modify fonts later(css attributes)

5. Close off remaining string

ToC += "</ol>" + "</div>"

6. Inject HTML

We want create HTML piece of code to be inserted within section tag with calss name="page__content". Add the following code

$(".page__content").prepend(ToC)

7. Include tableOfContents.js to desire post (HTML)

HTML

<script src="/js/tableOfContents.js"></script>

Modifying CSS components in JS

For smallLink class attribute, you can add CSS code snippets in JS with the following

var editCSS = document.createElement("style")
editCSS.innerHTML = "a.smallLink {font-size: 90%; margin-top: 50%;}"
document.body.appendChild(editCSS)

tableOfContents.js

window.onload = function() {
  // Create a string of HTML
  var ToC = "<div style='line-height: 60%'>" + "<h3>Contents:</h3>" + "<ol>"
  // Create vars to store title, href attributes.
  var title, link, curElmt, newLine //curElmt used to extract text and ID

  // Loop through the headers <h2> using jQuery
  $("section h2").each(function() {
    curElmt = $(this)
    title = curElmt.text() // title for <h2>
    link = "#" + curElmt.attr("id") // link for <h2>
    newLine =
      "<li>" +
      "<a class='smallLink' href='" +
      link +
      "'>" +
      title +
      "</a><br/>" +
      "</li>"
    ToC += newLine
  })

  // Close off the remaining string
  ToC += "</ol>" + "</div>"

  // Prepend
  $(".page__content").prepend(ToC)
}

// Adding style elements with js
var editCSS = document.createElement("style")
editCSS.innerHTML = "a.smallLink {font-size: 90%; margin-top: 50%;}"
document.body.appendChild(editCSS)

WRITTEN BY

Ellis Min

Keeping a record

GitHub