Bigfoot.js
bigfoot is a jQuery plugin for empowering footnotes.
By using extended Markdown syntax for footnotes, it creates clickable buttons or numbers1 to view the footnotes in a pop-up, instead of having to scroll all the way down to the bottom of the page… like an animal.
To accomplish this, the content must be written in Markdown–whether in an app like iA Writer, Ulysses, or just in a plain text document–and follow the proper syntax for a footnote, i.e. open-bracket + carrot + text + close-bracket: [^this is the footnote text].
FYI: Using these footnotes is not essential and takes a little more work. It might also cause problems in the future if we need to export the WSC blog to another platform. But it is aesthetic A.F., so I think it’s worth it… for now.
Note: Squarespace does not support extended Markdown syntax. To achieve the pop-up footnotes, the Markdown must be copied as HTML and then pasted into a Code block.
Because I have enabled the footnote list at the bottom of the page, I add everything from <div class="footnotes"> onward into a separate Code block at the bottom of the page.
To enable Bigfoot.js on this SquareSpace site, I have added the following header-code snippet to Settings->Advanced->Code Injection->Header Code
<!-- jQuery for Bigfoot.js --> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.1/jquery.min.js" ></script> <script type="text/javascript" src="/s/bigfoot.js"></script> <link rel="stylesheet" type="text/css" href="/s/bigfoot-number.css"> <script type="text/javascript"> $.bigfoot(); </script> <!-- End bigfoot.js -->
This code references the JavaScript and CSS files linked below. To change the styles, change the header injection code to reference the alternate CSS file (e.g. /s/bigfoot-bottom.css).
Active
Inactive
-
like this ↩︎