Search code examples
javascripthtmlcssbootstrap-4tableofcontents

How to properly set TOCBOT with Bootrap-4

I am trying to use the good add-on called TOCBot. I have the following two questions that I would hope some one could help me with.

Issue #1: In there you can see that a white vertical bar that significantly extends beyond the list items. I think the bar should be as long as the vertical content only. Is there any way I could customize the width or the length of this bar?

JSFiddle. Note reference to the tool not shown here.

HTML Code:

<body data-spy="scroll" data-target=".js-toc">
    <div class="container-fluid">
    <div class="row">
       <div class="col bg-dark">
          <nav class="js-toc sticky-top py-5"></nav>
       </div>
       <div class="col js-toc-content">
          some text1
          <h1 id="h1root">Root </h1>
          <h2 id="2">Subheading, h2</h2>
          Some text 2
          <h3 id="2">Third level heading</h3>
          Some text 3
          <h3 id="3">Another level 3 heading</h3>
          Some text 4
          <h2 id="4">A second subheading</h2>
          Some text 4   
       </div>
    </div>
</body>

Initialization

 tocbot.init({
        tocSelector    : '.js-toc',
        contentSelector: '.js-toc-content',
        headingSelector: 'h1, h2, h3, h4',
        collapseDepth  :  6,
        headingsOffset :  1,
        orderedList    :  true
    });

Issue #2: I want to be able to make the last clicked (current) link stand out either by color, background color or margin settings. How can this be accomplished?

Solution

  • Try this.

    1) Let's setup the CSS more explicitly to override tocs CSS without the use of !important

    body a.toc-link{
    color: wheat; 
}

    2) The white line is created using the a.toc-link::before pseudo selector. Since it is using height:inherit, the height could potentially change depending on what device/screen size you're on so lets use jQuery to grab the height of the anchor tag and set that to the height of the white line

    var tocHeight = $('a.toc-link').height(); //18

    3) We can't directly style ::before with JS so we have to dynamically insert it into the page as a <style> tag. Note the back ticks and the use of ${} - this is known as JS template literals

    //Create the html
// remember, tocHeight = 18 so we add the 'px' here
var html = `<style>a.toc-link::before {
  height: ${tocHeight}px; 
}</style>`;

//Insert it above the closing `</body>` tag
$('body').append(html);

    4) Set up an on click event listener for the anchor tags and add a class to alter the color to red.

    $('a.toc-link').on('click', function(){

  //Remove any previously added classes of 'clicked' to all toc-link elements
  $('a.toc-link').removeClass('clicked');

  //Add the class to the currently clicked anchor tag
  $(this).addClass('clicked');
});

    5) create the .clicked class in CSS

    body a.toc-link.clicked {
  color:red;
}

    demo: https://jsfiddle.net/b0n4xk1c/

    Note: Whilst the white line is the same size as the anchor tags, there are gaps due to margin/spacing between the links (see the demo). If you want the line to fully connect then just add a few extra pixels to the value after grabbing it instead.

    var tocHeight = $('a.toc-link').height() + 6;