Miss any of our Open RFC calls?Watch the recordings here! »

active-toc

0.4.11 • Public • Published

Table of Contents

ActiveToc

ActiveToc

Make your table of contents active.

Please visit ulf.codes/tools/active-toc/ or download the repo and open the file index.html to see the usage.

Install ActiveToc in your Node project with

npm i active-toc

and use it inside your code via

const ActiveToc = require('active-toc');

or, alternatively

import ActiveToc from 'active-toc';

You can also use it without node, by embedding the script active-toc.min.js in your web page.

<script src="active-toc.min.js"></script>

ActiveToc is using the IntersectionObserver API.

init

Without defining the tocContainer a call like ActiveToc.init() will search for a container with id="header" or a tag header and will make that container the active toc. That container has to contain a set of links to headings inside of the document. Each heading needs to be identified with the id attribute. When scrolling contents or resizing the window, the links in the tocContainer will be assigned the CSS class named is-visible if the associated heading of the link is visible. The link will be assigned the CSS class name is-active if the heading is not visible, but still can be considered active. The link will be assigned the CSS class name is-highlight as the single one that´s suggested to be highlighted (to avoid highlighting multiple entries).

Parameters

  • settings any?
    • settings.tocContainer String? Specify the id of the container that contains links to the headings inside of your document. Default is 'header'. If not specified will search for the html header tag.

destroy

Revert all changes that have been made by ActiveToc

unobserve

Do no longer observe the headings of the document

Keywords

none

Install

npm i active-toc

DownloadsWeekly Downloads

17

Version

0.4.11

License

MIT

Unpacked Size

284 kB

Total Files

6

Last publish

Collaborators

  • avatar