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, and lightly tested with jQuery 2 as well.
Once the module has been included in a page, it can be called as follows:
Pretty straightforward. By default, it will look for
spanelements with the
blockquoteelements with a
within the outer selection (e.g., within any
div elements, in this case). The matches will be extracted and moved to footnotes.
Here is a simple sentence, with a footnote at the end (This is the footnote.).
Here is a simple blockquote, with a title.
Here is a simple sentence, with a footnote at the end
<span class="footnote"> (This is the footnote.)</span>.
<blockquote title="I came from the blockquote.">
<p>Here is a simple blockquote, with a title.</p>
<ol id="autoFootnotes0" class="footnotesList"></ol>
There are a number of options that can be provided by passing the appropriate values to the
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.
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
: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.
footnotes()method is invoked will have its own footnote list. This is the default.
Specifies the ID (without the leading #) where footnotes will be placed.
Allows for the selection of a block within the outer block, to which the ordered list where footnotes will be placed will be appended.
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.)
Function to extract the footnote HTML from the elements that are selected by the footnotes option.
The source code is available on GitHub.
titleattribute to footnote link, so users can hover on the link to read the footnote text. (Thanks to an anonymous commenter for this suggestion.)
idattribute to footnote link, so links back work in Internet Explorer. (Thanks to an anonymous commenter for this suggestion.)
This code is copyrighted 2008–2010 by Brian Holt, and licensed for distribution under version 3.0 of the GNU Lesser General Public License.