fixed-footnotes

fixed-footnotes

A lightweight javascript library that will show the footnotes of a document at the bottom of the screen when the user scrolls to their in-text references.

Check out the demo here.

Install

With npm: npm install fixed-footnotes --save. You can then use a build tool (like webpack or browserify) to export the javascript into a browser. CSS will be found in node_modules/fixed-footnotes/build.

Without npm, add the javascript and css located in the build directory to your webpage.

Usage

fixedFootnotes();

This will start displaying the footnotes with the default options.

The library will look for in-text references that have the class reference (this can be customized) and follow their hash link to the footnote itself.

HTML Example:

<!-- Document -->
<p>Some text<a class="reference" href="#n1">[1]</a></p>
<!-- Footnotes -->
<ul>
  <li id="n1">Note one</li>
</ul>

The dynamic footnote won't be displayed if the static one is already on screen.

Options

Here are the options you can pass and their default values:

// CSS selector used to identify the references in text.
referencesSelector: ".reference",

// CSS selector to the node that will host the fixed container.
fixedContainerLocation: "body",

// Id to set to the fixed container.
fixedContainerId: "",

// Class to set to the fixed container.
fixedContainerClass: "fixed-footnotes-container",

// Class to add to the footnotes in the container.
footnoteClass: "fixed-footnotes-note",

// Override this if you want to modify your note before displaying it in the fixed container
transformNote: function(elem) { return elem; }

API

The fixedFootnotes function returns a FixedFootnotes object that exposes some functions:

refresh()

The view is already refreshed when the user scrolls or resizes his window, but you can call this function to refresh at any other time.

stop()

Don't display the footnotes anymore, don't listen to the scroll and resize events anymore.

addRefreshListener(listener)

The function passed will be called each time the view is refreshed.

removeRefreshListener(listener)

The function passed won't be called anymore when the view is refreshed.

Example

var ffn = fixedFootnotes({
  referencesSelector: ".ref",
  footnoteClass: "fixed-footnotes-note someOtherClass",
});
document.addEventListerer("customEvent", ffn.refresh);

Appearance

You can customize the appearance of the footnotes by adding some CSS. Copy the library's CSS and edit it to your liking.