Grantnotes

Grantnotes is a simple jQuery reliant script for implementing footnotes similar to those used on Grantland.com

How to initialize:

Within a jQuery script, simply call the grantnotes() function. It takes at least 2 parameters: a div or article in which the main text appears, and a div for the floated sidebar in which the notes will appear. Both must be passed as jQuery objects (for now).

Example:
$(document).ready(function(){
grantnotes($('article.main-article'), $('.footnote-bar'));
});
Arguments grantnotes(main_text, footnote_bar, optionalArguments, callback)

Requirements
The article or div containing the main text should have within it one or more sup elements. Under default settings, it should also contain a span with class="footnote-text" for each sup that is found within the main text, as they each contain the text that will be incorporated into the footnote. The class and element for these can be changed in the optArgs aka Optional Arguments. These span elements should be in order somewhere within the main text.
You can include your own numbers or symbols within each sup, but empty elements are ok too; the script will automatically number them for you.

The .footnote-bar division should be floated to either side of the article or div containing the main text.

What will it do?

For each sup that grantnotes finds within the main text, it creates a new div element of class="footnote and places it within the .footnote-bar that you've already provided as a parameter. It then takes the span.footnote-text associated with that reference (if it has been written in order) and puts it within the newly created .footnote division.

Once all of the .footnotes are in place, the script will position each footnote so that it is horizontally aligned with the corresponding sup element within the main text. If two sup elements are close to each other in that main text, the resulting footnotes will be placed one on top of the other, sequentially, instead of being aligned horizontally with their respective note. For a better visual of this, load any of the example files provided in this repository.

All footnotes are given an id of #foot[num] where [num] is the order of the footnote. Again, for a better idea of how this works simply load the source for any of the example pages provided in this repository.

How does it work

Because this sort of footnoting (surprisingly) requires more JavaScript-fu than one would expect, grantnotes relies upon an Footnote object, which contains most of the metrics and fuctions needed to render each footnote at its proper position on the page.

Grantnotes also makes use of a smaller article object, which stores metrics about the size and offset of the main-text article. One of the reasons that these objects are necessary is because the article/main-text division and the footnote-bar division need not start at the same height on the page. In other words, if one wanted to float a block of ads to the right of the main-text, and then the footnote-bar underneath those ads, grantnotes knows to take this into consideration, and will render the first footnotes underneath those ads instead of a position horizontally aligned with the actual first sup. The provided file example2.html provides a straightforward example of this.

Each Footnote is initialized and a fresh .footnote element is created for each and then displayed. Each Footnote is subsequently placed into an array and stored with all of the other Footnote objects. The script then cycles through these, making use of specific measurement methods (which are also jQuery reliant) to ascertain the old and new positions of each element.

Optional Arguments

Optional arguments should be coming in the future