Footnotes are all the rage

Whether the author wants to include an afterthought, additional observations, commentary, etc. everyone publishing on the web seem to be adding these footnotes. Some examples are: the article you are reading 1,  Dr. Drang, and Marco Arment.

I don’t really need to go into great detail of the old way footnotes worked, but suffice it to say they had some issues. The primary issue was due to the way anchor tags worked – moving from the article to the bottom of page and back again.2 See an example of this issue on Casey Liss’s blog.
To solve this problem, footnotes that kept you in place but popped up the text of the footnote were born. This kept you in the spot and didn’t have the side effects. Nice. With some Javascript fu you could be the footnote hero to those reading your site. Of course an easy way of doing this was not too far off with the defacto standard from Chris Suave with his Bigfootjs project. This little project made it tremendously easy to add nice graphical popup style footnotes. Double nice.

WordPress and Footnotes

Bringing these footnotes to the sites using WordPress were hacked into WordPress but several weeks ago WP-Bigfoot plugin was released. Finally, Bigfootjs-style footnotes for WordPress users. A simple “footnote” shortcode was all that was needed to get these in your blog.

Numbers

I hacked up some changes to the WP-Bigfoot plugin so I could get the numeric example that Chris Suave demonstrated. The changes came down to the markup on the page in the original Bigfootjs uses  “data-footnote-number” instead of the “data-footnote-identifier” coded in the WP-bigfoot plugin.

WP-Bigfoot Original bigfoot.js in the Settings section.

contentMarkup : "<aside class=\"footnote-content bottom\"" +
 "data-footnote-identifier=\"{{FOOTNOTENUM}}\" " +
 "alt=\"Footnote {{FOOTNOTENUM}}\">" +
 "<div class=\"footnote-main-wrapper\">" +
 "<div class=\"footnote-content-wrapper\">" +
 "{{FOOTNOTECONTENT}}" +
 "</div></div>" +
 "<div class=\"tooltip\"></div>" +
 "</aside>",

buttonMarkup : "<a href=\"#\" class=\"footnote-button\" " +
 "data-footnote-identifier=\"{{FOOTNOTENUM}}\" " +
 "alt=\"See Footnote {{FOOTNOTENUM}}\" " +
 "rel=\"footnote\"" +
 "data-footnote-content=\"{{FOOTNOTECONTENT}}\">" +
 "<span class=\"footnote-circle\" data-footnote-identifier=\"{{FOOTNOTENUM}}\"></span>" +
 "<span class=\"footnote-circle\"></span>" +
 "<span class=\"footnote-circle\"></span>" +
 "</a>"
 }, options);
....
then around line 514
....
   // Gets the easy replacements out of the way (try is there to ignore the "replacing undefined" error if it's activated too freuqnetly)
     var content = settings.contentMarkup
          .replace(/\{\{FOOTNOTENUM\}\}/g, $this.attr("data-footnote-identifier"))
          .replace(/\{\{FOOTNOTECONTENT\}\}/g, $this.attr("data-footnote-content").replace(/&gtsym;/, "&gt;").replace(/&ltsym;/, "&lt;"));

    // Handles replacements of BUTTON attribute requests

My Version

contentMarkup : "<aside class=\"footnote-content bottom\"" +
 "data-footnote-identifier=\"{{FOOTNOTEID}}\" " +
 "alt=\"Footnote {{FOOTNOTENUM}}\">" +
 "<div class=\"footnote-main-wrapper\">" +
 "<div class=\"footnote-content-wrapper\">" +
 "{{FOOTNOTECONTENT}}" +
 "</div></div>" +
 "<div class=\"tooltip\"></div>" +
 "</aside>",

buttonMarkup : "<a href=\"#\" class=\"footnote-button\" " +
 "data-footnote-number=\"{{FOOTNOTENUM}}\" " +
 "data-footnote-identifier=\"{{FOOTNOTENUM}}\" " +
 "alt=\"See Footnote {{FOOTNOTENUM}}\" " +
 "rel=\"footnote\"" +
 "data-footnote-content=\"{{FOOTNOTECONTENT}}\">" +
 "<span class=\"footnote-circle\" data-footnote-number=\"{{FOOTNOTENUM}}\"></span>" +
 "<span class=\"footnote-circle\"></span>" +
 "<span class=\"footnote-circle\"></span>" +
 "</a>"
 }, options);

....
then around line 514
....
    // Gets the easy replacements out of the way (try is there to ignore the "replacing undefined" error if it's activated too freuqnetly)
        var content = settings.contentMarkup
          .replace(/\{\{FOOTNOTENUM\}\}/g, $this.attr("data-footnote-number"))
          .replace(/\{\{FOOTNOTEID\}\}/g, $this.attr("data-footnote-identifier"))
          .replace(/\{\{FOOTNOTECONTENT\}\}/g, $this.attr("data-footnote-content").replace(/&gtsym;/, "&gt;").replace(/&ltsym;/, "&lt;"));

    // Handles replacements of BUTTON attribute requests

and I added the number style sheet available from the Bigfootjs.com site. Finally, I made some further edits to the sizes used in the button’s, but those are just stylistic. Here’s gist the wp-bigfoot.css file with my changes.

Update: 2014-02-13 – I added a line that was also changed in the bigfoot.js and forgot to show. Additionally, I posted a gist to the css file that I changed.