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')

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.

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.

Footnote content that contained a single quote character was being truncated at the quote. This replaces the single quote with an ' when the double quote and less than/greater than signs are replaced.

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)

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...

With these new settings users will be able to use this great script with other html markup.

The new settings names may not be ideal, feel free to adapt/rename it :)

Any thoughts about this ?

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?

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.[^1]

[^1]: Vel tale democritum ex

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.[^1]

[^1]: Mutat aliquam contentiones mel

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

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

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

Hi, I understand that Bigfoot is not being maintained, but I've been using it on a few Squarespace sites for a number of years now and discovered a frustrating and interesting bug/error.

Someone contacted me to ask how I implemented Bigfoot.js on my site and I decided to write up a walkthrough. I previewed it many times, but once I finally published the post, Bigfoot stopped working. I checked that it was still working fine on other pages and posts and spent some time trying to fix the issue by creating a new post, checking, and again discovering it wasn't working. It turns out that I was adding tags as the final step before making the post public. I narrowed it down to using 'footnote' or 'footnotes' as tags. (It was a post about adding footnotes, after all.) By removing these tags, Bigfoot again worked as expected.

I'm more curious than anything whether this is a known issue (or perhaps a feature?) and/or why it may be happening (I'm still quite new to JavaScript).

Navigating by tab on the demo page, I get directed to:

1. The first "..." (good)
2. download (good)
3. github (good)
4. demo (good)
5. <a href="#project">, an element invisible on the screen (bad)

More info on why this is important:

1. https://accessibility.digital.gov/ux/tab-order/
2. https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html

This, along with #73 , makes it hard to evaluate whether the plugin is accessible.

More info on why this is important:

1. https://a11yproject.com/posts/never-remove-css-outlines/
2. https://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/F78

From a reader on our site:

"When I scroll inside them, I get a few lines after what's initially visible, and then it jumps straight to the bottom, so I'm missing content in the middle. For reference, working on Windows 10 on a PC, with the site open in Chrome. All notes seem to be behaving the same way."

Thanks for this awesome plugin. I just had a question about the documentation for buttonMarkup.

I've been trying to get the numeric style like how it's rendered in the demo, so I was trying to set the buttonMarkup settings, but I can't understand how the value of {{SUP:attr}} is acquired and how I should define this in options.

If this is my footnote: <sup id="fnref:1"><a href="#fn:1" rel="footnote">1</a></sup>

What value should I use for buttonMarkup below?

var bigfoot = $.bigfoot( { deleteOnUnhover: true, preventPageScroll: false, hoverDelay: 250, activateOnHover: true, buttonMarkup: ? } );

Thanks! The PayPal donation link also wasn't working btw. I owe you a coffee. :)