lemonmade/bigfoot

A jQuery plugin for creating exceptional footnotes.

bigfoot's Issues

Triangle doesn't render well in Mobile Safari

Screenshot from iOS 8.4 simulator:

If I find a fix I will PR.

useFootnoteOnlyOnce: false changes the button numeric value.

Hello!

This issue is related to this page : https://plancomptablebelge.be

The bigfoot is triggered with these two options:

$.bigfoot({
		actionOriginalFN : 'ignore',
		useFootnoteOnlyOnce: false
	});

The same footnote can be referred to multiple times (hence the handy useFootnoteOnlyOnce: falseoption).

But : This is a "legal" document, so footnotes reference numbers cannot be changed.
The problem is that, with the useFootnoteOnlyOnce option turned off, the button numbers are incremented and do not keep their initial value. I can see that it is set in the CSS as

.bigfoot-footnote__button {

  &:after {
    // CONTENT
    content: attr(data-footnote-number);
...

I figured I could change that but then I'd need an attribute with the original value kept, which I don't.

It would be nice if Bigfoot would add a data-footnote-original-value attribute, that could be used for that.

Thank you!
A.

Anchor Breaks Bigfoot

This is weird. I have two pages to illustrate the issue:

http://spiritofnine.com/broken.html - footnotes don't work
http://spiritofnine.com/test.html - footnotes work (yay!)

A diff on the two files shows:

8c8
< <title>Broken Post &#8211; Spirit of Nine</title>

---
> <title>Test Post &#8211; Spirit of Nine</title>
123c123
< <span class="entry-tags">Tags: <a href="http://spiritofnine.com/tags.html#test" title="Pages tagged test" rel="tag">test</a></span>

---
> <span class="entry-tags">Tags: <a href="http://spiritofnine.com/tags.html" title="Pages tagged test" rel="tag">test</a></span>

The only difference between the tag links is that the broken version has an anchor (#test). With this, when you click on the footnote button, it scrolls to the top of the page rather than displaying the footnote content. When I remove the anchor, it works perfectly.

I have no idea how to fix this or I would. Any thoughts?

Multiple escaped markup tags do not not render correctly

When I put <code> tags containing markup in a footnote, only the first one renders properly. In the tags that follow, < renders as <sym; and > renders as >sym; This happens whether I let my markdown parser (kramdown in Jekyll) interpret code between backticks or whether I write the symbols manually as < and >.

I've also tried leaving out <code> tags entirely and get the same result: only the first pair of brackets renders correctly.

Popover overflowing container

This is more of a support request. Is there a way to tell the popover to stay inside the limits of its container? At the moment, it seems to be overflowing even when it has plenty of space to avoid this. Screenshot attached.
Thanks!

Footnotes are much narrower than they are on bigfoot.js

@lemonmade
My footnotes are very narrow when activated and also clip their content. How can I make them wider, like they are on bigfootjs.com? I have the code below. Thanks in advance.

<section>
    <article>
        <p>
            text text text<sup><a href="#fn:1" rel="footnote"></a></sup> text text text
        </p>
        <div class="footnotes">
            <ol>
                <li class="footnote" id="fn:1">
                    <p>footnote text</p>
                </li>
            </ol>
        </div>
    </article>
</section>

Footnote popovers don’t use subpixel antialiasing on OS X Safari

I’m using Safari 7.0 on OS X 10.9. I’ve noticed that the text in the footnotes is rendered differently from that in the body text: no subpixel antialiasing is used in the former. For example:

The text in the footnote is noticeably more anemic. You can see the HTML for that page at this Gist; there’s nothing complicated going on.

I assume that this issue is specific to OS X (and probably even to OS X Safari). I’ll be doing some poking around later today to see if I can diagnose the problem. (My current guess is that the use of CSS animations prevents the use of subpixel antialiasing.)

same ID on every footnote

My client accidentally used always the same id for the footnotes.
In version 2.0.0 this was no problem for bigfoot.
When now two footnotes with the same id are on the same page it displays the content of both on top of each other. The text isn't readable anymore.

Usage

Can it be applied to links with a particular class without using rel with dynamically sourced content in the tooltip? I am thinking something like clicking a link with a class 'define' which then opens the footnote with dynamically sourced content based on the text found in the define link:

JS:

$('.define').bigfoot({
content: $("h3:contains('"+$(this).text()+"')" ).next('p').text();
});

HTML:

<a href="#" class="define">Information</a>
<h3>Information</h3>
<p>Footnote copy</p>

appendPopoversTo not working

I'm trying to append popovers to a different element in the DOM following the documentation but this property seems to be broken.

Request: Reference markup placeholder for .text()

In my buttonMarkup, I'd like access to the original footnote link's inner text, e.g.:

{{SUP:text()}}

Currently, these placeholders can only be used to access attributes.

Why: I'm redesigning my footnote buttons to include the original footnote numbers generated by Markdown Extra, and there's no data-attribute containing the footnote number. I can't just use {{FOOTNOTENUM}} because it's wrong on multi-post pages (like index/archive pages) — it increments globally throughout the whole page rather than resetting to 1 at the beginning of each new post.

styling problem inside elements with text-indent

When the footnote is inside an element that has e.g: text-indent: -1em; the footnote-container inherits the rule and the dots look broken.

By adding text-indent: 0; to the .footnote-container solves the problem.

How to use numbering style without automatically incrementing the numbers

Hi!

I'm trying to use the above styling with this library, but the number within the button (looks like a grey bubble) is automatically incremented depending on how many times you use the functionality. The strange thing is that the content it's linked to works fine, it's just the number that's wrong.

I've sat up the HTML to include footnotes 6 different places, but I only have 3 footnotes:

Lorem ipsum dolor sit amet(1), consectetur adipiscing elit, sed do eiusmod(2) tempor incididunt ut labore et dolore magna aliqua(3). Ut enim ad minim veniam, quis nostrud exercitation(3) ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis(2) aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident(1), sunt in culpa qui officia deserunt mollit anim id est laborum.

However when I'm viewing the page, the footnotes are displayed:

Lorem ipsum dolor sit amet(1), consectetur adipiscing elit, sed do eiusmod(2) tempor incididunt ut labore et dolore magna aliqua(3). Ut enim ad minim veniam, quis nostrud exercitation(4) ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis(5) aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident(6), sunt in culpa qui officia deserunt mollit anim id est laborum.

Is there any way to get this library to work this way? Or do I have to create a script that will overwrite the nr that's used in "data-footnote-number"? The id of the buttons include the proper nr as far as I can see, and was planning on stripping down the id to only include the nr and use that as the "data-footnote-number" value.

Thank you in advance for any help, tips, support or observations! :)

Trying to use the numbered style, but the button displays `:.` rather than the footnote number.

As a newbie to this, I found that the regular bigfoot-number.scss alone would give the footnote buttons the correct number, but the pop-ups would appear way off in the left sidebar of my theme rather than from the buttons themselves. So I currently have both bigfoot-number.scss and bigfoot-button.scss. This fixes the weird pop-up positioning, but now the footnote buttons display :. instead of the proper footnote numbers.

I've tried tinkering with the scss but I don't know where to include the content: attr(data-footnote-number); bit—or even if the problem is coming from the scss or the footnote markup itself.

Here's an example: http://ryan-p-randall.github.io/2014/bigfoot-spotting/

Any pointers would be appreciated!

Multi-line footnotes displayed in a one-line height popover

I try to implement bigfoo.js into my Octopress blog. I works with footnotes that are not longer than one line. But as soon as two or more lines need to be displayed the output looks weird.

Footnote 1 works as expected, but 2 has this problem.

I also tried different footnote styles, but even the default one looks like the image above.
The behavior is the same in Safari in Mac OS 10.9 and also in Chrome 35/36.

Scrollable footnotes don't scroll in Safari on Yosemite

Longer footnotes don't always scroll in Safari 8.0 on Yosemite. They're fine on Chrome and Firefox.
As soon as I open the Safari Inspector, it scrolls. Refresh the page and the issue is back...

Bigfoot browser compatibility - Internet Explorer

It looks like bigfoot is not working in internet explorer 8.0 in my application . So up to which version of internet explorer would Bigfoot support ?

Unneccessary scrollbars

Hello,

I dont know if it is intentionally or not but it looks weird (at last on Firefox 22)

To prevent showing up scrollbars when not needed you can change overflow: scroll to auto in .footnote-content-wrapper class.

Cheers

is-fully-scrolled is not being triggered

In a scrollable footnote "is-fully-scrolled" is not added as class, causing the fade and arrow to stay visible over the text.

Wrong footnote backreference

Input source:

<div class="inner-wrapper">
  <p>Ancient &amp; Modern was a gallery on Whitecross Street, the site of one of London&#x2019;s oldest street markets &#x2013; close to where the remains of William Blake are buried in Bunhill Fields Cemetery, and the site of William Caslon&#x2019;s type foundry<sup id="fnref:1301"><a href="#fn:1301" rel="footnote">1</a></sup>, which first opened in 1737. The gallery adopted a research-led curatorial approach to its exhibitions, and its directors were keen to closely connect the art they displayed with the local history of the surrounding area.</p>
  <p>In homage to its location, we used Caslon to form the gallery&#x2019;s logotype<sup id="fnref:1302"><a href="#fn:1302" rel="footnote">2</a></sup>, paired with a contemporary monospace typeface to emphasise the interplay of old and new. The invitations we designed for the gallery, over the course of several exhibitions, differ wildly in format and material, often making use of historic imagery relevant to the area, and juxtaposing this with a contemporary approach to type, layout and physicality.</p>
  <div class="footnotes">
    <hr>
    <ol>
      <li id="fn:1302">
        <p>Image of Caslon Type Foundry&#xA0;<a href="#fnref:1302" rev="footnote">&#x21A9;</a></p>
      </li>
      <li id="fn:1302">
        <p>Caslon was also one of the first typefaces used by the Church of England for its publication Hymns Ancient and Modern.&#xA0;<a href="#fnref:1302" rev="footnote">&#x21A9;</a></p>
      </li>
    </ol>
  </div>
</div>

Result:

<div class="inner-wrapper">
  <p>Ancient &amp; Modern was a gallery on Whitecross Street, the site of one of London’s oldest street markets – close to where the remains of William Blake are buried in Bunhill Fields Cemetery, and the site of William Caslon’s type foundry<sup id="fnref:1301" data-footnote-backlink-ref="fnref:1301" data-footnote-ref="#fn:1301"><a href="#fn:1301" rel="footnote">1</a></sup>, which first opened in 1737. The gallery adopted a research-led curatorial approach to its exhibitions, and its directors were keen to closely connect the art they displayed with the local history of the surrounding area.</p>
  <p>In homage to its location, we used Caslon to form the gallery’s logotype<div class="bigfoot-footnote__container"> <button class="bigfoot-footnote__button" id="fnref:1302" data-footnote-number="1" data-footnote-identifier="1" alt="See Footnote 1" rel="footnote" data-bigfoot-footnote="<p>Image of Caslon Type Foundry</p>"> <svg class="bigfoot-footnote__button__circle" viewBox="0 0 6 6" preserveAspectRatio="xMinYMin"><circle r="3" cx="3" cy="3" fill="white"></circle></svg> <svg class="bigfoot-footnote__button__circle" viewBox="0 0 6 6" preserveAspectRatio="xMinYMin"><circle r="3" cx="3" cy="3" fill="white"></circle></svg> <svg class="bigfoot-footnote__button__circle" viewBox="0 0 6 6" preserveAspectRatio="xMinYMin"><circle r="3" cx="3" cy="3" fill="white"></circle></svg> </button></div><sup id="fnref:1302" data-footnote-backlink-ref="fnref:1302" data-footnote-ref="#fn:1302" class="footnote-print-only"><a href="#fn:1302" rel="footnote">2</a></sup>, paired with a contemporary monospace typeface to emphasise the interplay of old and new. The invitations we designed for the gallery, over the course of several exhibitions, differ wildly in format and material, often making use of historic imagery relevant to the area, and juxtaposing this with a contemporary approach to type, layout and physicality.</p>
  <div class="footnotes">
    <hr>
    <ol>
      <li id="fn:1302" class="footnote-processed footnote-print-only">
        <p>Image of Caslon Type Foundry&nbsp;<a href="#fnref:1302" rev="footnote">↩</a></p>
      </li>
      <li id="fn:1302">
        <p>Caslon was also one of the first typefaces used by the Church of England for its publication Hymns Ancient and Modern.&nbsp;<a href="#fnref:1302" rev="footnote">↩</a></p>
      </li>
    </ol>
  </div>
</div>

Fix footnote content when present in a hx or a strong tag

Hi @lemonmade i think it should be useful to add this rules in styles :

.bigfoot-footnote__container { font-size: initial; font-weight: initial; line-height: initial; }

This should avoid to get a blod text when a footnote is in a strong tag, or a h2 like content when the footnote is in a h2 tag.

Any thought about it ?

Doesn't play nicely with Safari Reader

How to use bigfoot with different html markup

Hi,

i find bigfoot.js and i think is very well made!
We are developing a website, a sort of report on line with different chapters. Each chapter have some notes and we'd liket embed the bigfoot number.js into it.

So this chapters are automated and html code is standard so we need to yield the plugin to our markup.

So we have this:

Each footnote have this markup:

<a class="footnote" href="#footnote1">(1)</a>
and not this
<sup id="fnref:1"><a href="#fn:1" rel="footnote">(1)</a></sup>

In the bottom of the page:
<h2>Footnotes</h2>' '<p class="footnoteContent" id="footnote1">(1) - bla bla bla</p>

And not this
<div class="footnotes"> <ol> <li class="footnote" id="fn:1"> <p>Cake topping jelly-o caramels.<a href="#fnref:1" title="return to article"> ↩</a><p> </li>

In the bigfoot.min.js i change this params like this:
footnoteParentClass:"footnoteContent", footnoteTagname:"p" anchorPattern:/footnote[:\-_\d]/gi, anchorParentTagname:""

With firebug i can see the embed note inside the button but:
if click the number i go to thew bottom of the page not popover.
before the word with the footnote number i have 3 huge ovals (creted by the svg values inside the button generation)

Have you some ideas, suggestions?
I can change my markup, so it's not simple.

Thanks
Bye

Unable to see tooltip pointing to the footnote button

When I set up bigfoot.js on my project, the popover shows up correctly (as a rounded rectangle), but I do not see the little "arrow" on the popover.

Is there a setting that controls this?

Broken layout in IE11

In IE11 the popup is not positioned correctly:

I tracked it down to window.scrollX/Y in viewportDetails() - these are null in IE11. That causes roomCalc() to return NaN for all values.

I fixed it by replacing that function in bigfoot.js with this, which uses jQuery to get the values:

      viewportDetails = function() {
        var $window = $(window);

        return {
          width: window.innerWidth,
          height: window.innerHeight,
          scrollX: $window.scrollLeft(),
          scrollY: $window.scrollTop()
        };
      };

Bottom style functionality using 'positionContent' option is unclear in documentation

First, amazing plugin.

When using the Bottom style, it's clear that you need to use the CSS, but unclear that you need to change the 'positionContent' option to 'false' in order for the popup to behave correctly—it took a good bit of trouble shooting and re-reading the docs a few times to realize the two were directly related.

I'd be happy to update the site if you point me to the repo.

Again, great work.

Different opening animation in Firefox and Chrome

I implemented Bigfoot on my personal blog and I struggle with a differently behaving opening animation in different browsers.

In Firefox the animation is as I would like it:

But in Chrome, the popover opens from a different side:

You can try it yourself in this article (there's one foot note near the end of the article).

Demo styles look broken

Looking at http://bigfootjs.com in mobile Safari it looks like the popup styles are broken. On the homepage and on the demo page the popup displays as a slim stroke, cutting off the text inside.

Can't scroll popover until window is resized in Safari on El Capitan

Popovers with overflow content will not scroll until the window is resized in Safari (only on El Capitan – it works fine in Chrome on El Capitan, and in Safari on Yosemite).

It's reproducible on the demo page (use the footnote button under "Usage" for example). Just open the page, then click the footnote to open the popover. 2-finger scrolling the popover should fail. Resize the window with the popover still visible, and 2 finger scrolling the popover should now work.

Note that closing and reopening the popover requires the window again be resized for scrolling to work.

Example movie showing the problem here:
http://cl.ly/dRBS

Footnote extends beyond viewport on mobile

I thought it was similar to another issue, but now I can see it's different. The script seems to calculate the space in viewport wrong, because the expanded footnote extends beyond the screen, causing horizontal scrolling. Can you please advise how best to modify the script?

Double digit numbers not displaying in Safari

Thanks for a great footnote solution!

I'm using the numbering option, and on Safari any numbers above 9 are not displaying correctly. It looks like the width is not adjusting and the two digits are printed on top of each other (see screenshots below).

Firefox:

Safari:

I tried replacing .bigfoot-footnote__button {width: 1.5em} with min-width but that didn't work. Any other suggestions?

Unprefixed CSS transform causing Safari animation problem?

Hi @lemonmade - I've noticed with 2.1.2 the popover animation behaves somewhat jankily in Safari, but not Chrome.

Is this possibly down to the fact that the transforms in the CSS are no longer prefixed? It seems Safari still requires a -webkit prefix: http://caniuse.com/#search=transform

Will not work inside jQuery Ajax Window

I attempted to implement the footnotes on a page that is typically viewed as a popup jQuery ajax window, but it does not work. If I view the actual page, it works fine. Is there any work around to get it to function inside the ajax window?

Requires jQuery :trollface:

I love this plugin and would love to use it on my site, but don't want to pull down the entirety of jQuery just to use it.

I've set out to create smallfoot, a dependancy-free version of bigfoot (with far-fewer features, at least to begin with).

Any words of wisdom or specific pitfalls I should watch out for?

Thanks for the inspiration!

Footnote moves on hover

Hey there, I was checking out your demo page at my google Chrome and I noticed that in all styles apart from hypercritical there is a weird moving on hover effect.

bigfoot-number.css is empty

https://github.com/lemonmade/bigfoot/blob/master/dist/bigfoot-number.css

Noticed this because the download from the demo site was retrieving an empty file.

Dependency on jQuery 1.7+

Suggest adding to the README / bigfootjs.com pages that it won't work on jQuery 1.6.x or lower (due to the use of .on()). This can be worthwhile for people integrating with CMSs which serve older editions by default.

Line-height issue in Safari

I've customised bigfoot-number.scss to my liking, but it appears to not be setting line-height correctly in Safari.

Chrome:

Safari:

website unavailable

the README's project page and demo links redirect to http://www.bigfootjs.com, but that address is currently unavailable

aside: it'd be nice if this repo's header included a link to that site

Fix to avoid error when bigfoot.js is compressed/minified

Hi @lemonmade here is a fix to avoid error when unminified version of the script is minified with an external tool :

https://github.com/lemonmade/bigfoot/blob/master/dist/bigfoot.js#L32

footnoteButtonSearchQuery = settings.scope ? "" + settings.scope + " a[href*=\"#\"]" : "a[href*=\"#\"]";

should be replaced with :

footnoteButtonSearchQuery = settings.scope ? '' + settings.scope + ' a[href*="#"]' : 'a[href*="#"]';

(like it's done in min version of the script)

Incorrect footnote behavior on Jekyll/Octopress index pages

This is something between a bug and a feature request. A common element of many Jekyll/Octopress style blogs is an index page that has excerpts from the last X blog posts. Now if there are any footnotes in within those excerpts that Bigfoot starts to run into trouble (for obvious reasons), because the footnote will both be incorrectly labeled and will be display the incorrect text.

That is, if we have the following excerpt

Lorem ipsum dolor sit amet, in nulla causae aliquam usu, assum augue sit ex. Veritus electram ut vim, nobis oratio inimicus nec an, docendi repudiandae et nec. Ut eos convenire rationibus, eu eam elit commune intellegat. Tritani mediocritatem no eam. Te legere nusquam nam.¹

And then the following:

Sint hinc mel ad, mei et tritani necessitatibus, vel magna dolorum patrioque te. In eos fabulas fuisset suavitate. Dolorem complectitur te eos, mel error possit minimum no. Cu justo saperet mea, vim virtute percipit cu. Nisl enim salutandi ei nam, ne qui facer lobortis scripserit, ius ad erat labitur convenire.¹

The second footnote will be labeled as 2 instead of 1 and will display Vel tale democritum ex instead of Mutat aliquam contentiones mel

I am unaware of the inner workings of Bigfoot.js, but would it be possible to scan until you hit a footnote section instead of scanning through the whole page? Thank you for the wonderful project. My blog and I are very grateful

Footnotes

1. Vel tale democritum ex ↩ ↩²

Breaks for jQuery 3.0.0

Big fan of bigfoot––initially dismayed when I couldn't get it to work on my Jekyll blog.

The problem was that, when the popover box was initially injected, the max-width (set as an element property) was limited to 40.6. I'm not sure where this number was computed, but it made the footnote illegible until I resized the window and the footnote max-width was recalculated.

After much tinkering, I realized that the version of jQuery I was using (the most recent version, 3.0.0) was a different version from 1.8.3 as used in your usage instructions.

I assumed jQuery back-compatibility, apparently incorrectly; when I switched out 3.0.0 for 1.8.3 like suggested, my footnotes worked as they should.

You currently include minimum jQuery requirements in your README, but it'd be great to have a flag that high versions don't work! Alternatively, 3.0.0 compatibility or documentation for a fix for a problem like this one would be much appreciated.

Let me know if you'd like me to recreate the bug!

Thanks

Consider submitting bigfoot to a CDN

For example: https://github.com/jsdelivr/jsdelivr o https://github.com/cdnjs/cdnjs

This is both for convenience and performance sake.

Tnxs for a great lib BTW

Button styles not customisable in Sass

In https://github.com/lemonmade/bigfoot/blob/master/src/scss/foundation/bigfoot-variables.scss all the $popover- variables have !default at the end, but none of the $button- ones do. As far as I can tell, this means it's not possible to customise them - e.g. this doesn't work:

$button-color: #5f604b;

@import '../../../../bower_components/bigfoot/dist/bigfoot-number.scss';

I replaced them with the following (in bigfoot-number.scss) and it works:

// KEY VARIABLES
// =============================================================================

$button-height:                         0.95em !default;                         // The total height of the button
$button-width:                          auto !default;                           // The total button width (applies only if $button-apply-dimensions is true)
$button-inner-circle-size:              0.25em !default;                         // Total height/width of the ellipsis circles
$button-border-radius:                  0.3em !default;                          // Border radius on the button itself
$button-left-margin:                    0.2em !default;                          // Margin between the button and the text to its left
$button-right-margin:                   0.1em !default;                          // Margin between the button and the text to its right
$button-vertical-adjust:                -0.1em !default;                         // Pushes the buttons along the vertical axis to align it with text as desired
$button-inner-circle-left-margin:       1*$button-inner-circle-size !default;    // Space between the ellipsis circles

$button-color:                          rgb(110, 110, 110) !default;             // Background color of the button
$button-hovered-color:                  $button-color !default;                  // Background color of the button when being hovered
$button-activating-color:               $button-color !default;                  // Background color of the button when being clicked
$button-active-color:                   $button-color !default;                  // Background color of the button when active
$button-standard-opacity:               0.2 !default;                            // Opacity for when the button is just sittin' there
$button-hovered-opacity:                0.5 !default;                            // Opacity for when the button is being hovered over
$button-activating-opacity:             $button-hovered-opacity !default;        // Opacity for when the button is being clicked
$button-active-opacity:                 1 !default;                              // Opacity for when the button is active
$button-active-style-delay:             0.1s !default;                           // Delay before applying .active styles; this can be used to match to the popover activation transition

$button-inner-circle-color:             white !default;                          // Background color of the ellipsis circle
$button-inner-circle-border:            none !default;                           // Border of the ellipsis circle


// OTHER VARIABLES
// =============================================================================

$button-total-padding:              $button-height - $button-inner-circle-size !default;
$button-per-side-padding:           0.5*$button-total-padding !default;
$button-transition-properties:      background-color !default;

Thanks!

Add to Bower?

Just wondering if there were plans to make this package available via Bower.

Footnotes at the bottom of a page

Is there a method to have Bigfoot display buttons and the text of footnotes at the same time on a page? I have seen it implemented elsewhere, but when I've tried to do the same, the buttons disappear and all that is left is the text at the bottom.

Do I need to call another method within Bigfoot to do this? #newbie

Example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus hendrerit iaculis suscipit. Ut suscipit nec tellus non interdum. Ut in massa eget nulla egestas volutpat eget finibus purus. Nulla risus nisl, tincidunt non faucibus eget, fringilla vitae sapien. Ut lobortis molestie tortor nec dictum. Pellentesque tincidunt neque eget laoreet gravida.<sup id ="fnref:1"><a href="#fn:1" rel="footnote">1</a></sup>

<div class="footnotes">
<ol>
<li class="footnote" id="fn:1">
<p>Lorem Ipsum</p>
</li>
</ol>
</div>

Nested footnotes don't work

Bigfoot version: 2.1.4

Steps to reproduce

<link rel="stylesheet" href="https://rawgit.com/lemonmade/bigfoot/2.1.4/dist/bigfoot-default.css" type="text/css">
<script src="https://code.jquery.com/jquery-1.12.3.js"></script>
<script type="text/javascript" src="https://rawgit.com/lemonmade/bigfoot/2.1.4/dist/bigfoot.js"></script>
<script type="text/javascript">$.bigfoot();</script>
<p>Link to outer footnote: <sup id="fnref:1"><a href="#fn:1" rel="footnote">1</a></sup></p>
<div class="footnotes"><ol>
    <li class="footnote" id="fn:1"><p>
        This is the outer footnote.
        It contains a link to another footnote: <sup id="fnref:2"><a href="#fn:2" rel="footnote">2</a></sup>
        <a href="#fnref:1" title="return to article"> R</a>
    </p></li>
    <li class="footnote" id="fn:2"><p>
        This is the inner footnote.
        <a href="#fnref:2" title="return to article"> R</a>
    </p></li>
</ol></div>

Expected result

Bigfoot should process both footnotes. The inner footnote should be available as a clickable button in the text of the outer footnote.

Actual result

Bigfoot only seems to process the outer footnote. The inner footnote is left untouched and is not converted to a clickable button with popover text.

I don't think this use case is unreasonable - I use footnotes for tangents and for references, and I sometimes feel the need to include a reference inside a tangent.

Demo is broken

Same as " Demo styles look broken #22 " .. demo is broken for me in FF Dev ed (latest build).
EDIT: iPad mockup demo works fine, my mistake. But the landing page demo is definitely broken.

Popover positioning is broken on Mobile Safari when zoomed-in

Steps to reproduce:

1. Load any bigfoot.js enabled page (marco.org, blog.jaredsinclair.com, etc.) on an iOS device running Mobile Safari. Try an iPad in particular.
2. Pinch open to zoom in to an area of text containing a footnote button.
3. Tap the button.
4. The popover is off by an unpredictable amount of horizontal pixels.

This bug does not occur on desktop Safari.

Can't compile bigfoot-number.scss

CodeKit 2 is returning the following error:

Compass was unable to compile one or more files in the project:

error style.scss (Line 40 of _bigfoot-number.scss: List index is 2 but list is only 1 item long for `nth')