PlanetHolt.com

jFootnotes is a jQuery plugin that creates and formats footnotes based on inline content. I have used it fairly extensively on this site, and thought I’d share it with the world. It has been tested with jQuery 1.2.6, but I have no reason to believe it won’t work with 1.3.x as well.

Once the module has been included in a page, it can be called as follows:

$("div").footnotes();

Pretty straightforward. By default, it will look for

• any span elements with the footnotes class, and
• any blockquote elements with a title attribute

within the outer selection (e.g., within any div elements, in this case). The matches will be extracted and moved to footnotes.

Examples

Here is a simple sentence, with a footnote at the end (This is the footnote.).

Here is a simple blockquote, with a title.

Source

<div class="example"> <p> Here is a simple sentence, with a footnote at the end <span class="footnote"> (This is the footnote.)</span>. </p> <blockquote title="I came from the blockquote."> <p>Here is a simple blockquote, with a title.</p> </blockquote> <ol id="autoFootnotes0" class="footnotesList"></ol> </div> <script type="text/javascript"> <!-- $(document).ready(function() { $(".example").footnotes(); }); // --> </script>

Options

There are a number of options that can be provided by passing the appropriate values to the footnotes() method.

footnotes

Overriding the footnotes option allows users to select which entities get turned into footnotes. Note that the fnExtractFootnote option should be probably be overridden as well.

prependTags

By default, the link to the footnote will be appended to the end of an element selected by the footnotes selector. If some elements should have their footnote links prepended, appropriate selectors should be added here. Note that elements selected here are a subset of those selected by footnotes.

For example, if automatic quotation marks are added to p elements within blockquotes, one might use the :last-child pseudo-selector to trigger the addition of close quotes to the last paragraph. However, if a sup tag is appended to the blockquote, :last-child will no longer match the last p, and the quotes will not be added. Adding blockquote here will cause the sup tag to be prepended, avoiding this issue.

By default, the value of this option is FALSE.

singleFootnoteDestination

• When TRUE, all footnotes will be put into a single ordered list.
• When FALSE, each element on which the footnotes() method is invoked will have its own footnote list. This is the default.

destination

Specifies the ID (without the leading #) where footnotes will be placed.

• If singleFootnoteDestination is TRUE, the ID is used with no suffix.
• If singleFootnoteDestination is FALSE, an index suffix is appended to the ID.

contentBlock

Allows for the selection of a block within the outer block, to which the ordered list where footnotes will be placed will be appended.

autoFootnoteClass

CSS class name to be added to each of the elements matching the footnotes selector option. This allows us to ensure that the footnotes are added to the list in the correct order. (Set this to something that won't be used otherwise, because it is what will eventually be used to select all the elements to be turned into footnotes.)

fnExtractFootnote

Function to extract the footnote HTML from the elements that are selected by the footnotes option.

orderedList

• When TRUE, footnotes will be added to an ordered list. This is the default.
• When FALSE, footnotes will be added to an unordered list.

debugMode

• When TRUE, we will attempt to output console log messages.
• When FALSE, console log messages will be suppressed. This is the default.

Downloads

The plugin can be downloaded in an archive containing both the full and minified versions of the plugin. This distribution is in the form of a Drupal module, allowing one to easily integrate it into that content management system, but it should be fairly straightforward to use just the JavaScript portions.

Updates

Version 1.0

Initial release.

Version 1.1

Internal version containing some assorted bug fixes.

Version 1.2—2009-04-05

• Contains fixes explicitly marking the footnote links as being left-to-right content. This allows footnotes to be placed after content in a right-to-left language (e.g., Arabic) without display errors. See this blog post for an example where this is used.
• Tweaks the default CSS formatting.
• Tweaks the regular expression to extract the text of inline footnotes to work when the opening whitespace contains non-breaking spaces.
• Fixes an issue in IE where the footnote text was not appearing, and the numbering was wrong. Footnote numbering will not appear in IE in this version.  (This is a CSS issue, so others using different styling to the default I’ve included may not have the problem.)

Version 1.2.2—2010-01-18

• Fixed bug that caused footnote links to have the wrong numbers when multiple identical footnotes are used on a page. (Thanks to Sergey Kovalev for reporting this bug.)
• Added title attribute to footnote link, so users can hover on the link to read the footnote text. (Thanks to an anonymous commenter for this suggestion.)
• Added id attribute to footnote link, so links back work in Internet Explorer. (Thanks to an anonymous commenter for this suggestion.)

Licensing

This code is copyrighted 2008–2010 by Brian Holt, and licensed for distribution under version 3.0 of the GNU Lesser General Public License.

Thanks to CSSNewbie.com for the idea, which I have extended and turned into an actual plugin.