Squarespace Markdown Popup Footnotes


EDIT: If you just want to know how to do this quickly and easily, here you go:

  1. Download the script from here.

  2. Reference jQuery in your header using code injection. You can probably use the Google-hosted one.

  3. Either reference the jQuery script you downloaded (if you have somewhere to host it) or just add it to your header with code injection.

  4. Make sure your footnotes are formatted the right way by whatever prepares your HTML (see below, mine initially weren’t.)

  5. Go forth and footnote.

(If you’re getting a “see footnote” popup then either change your Markdown processor, or use jQuery to strip out title tags. Thanks Brian!)

13-04-01


In my last post I used a couple of footnotes. I’ve always enjoyed using footnotes when writing documents, ever since I first read the hilarious Mot D’Heures: Gousses, Rames. I’ve always shied away from using them on the web, however, as it seemed like too much bother to work out all the HTML to put them in. I noticed recently, though, that they were a staple of some sites I frequent, especially Dr. Drang, and I remembered that they are in fact handled by Markdown. SO in my last post I experimented, and I was happy with how they turned out.

Dr. Drang had gone one better, though, and has a popup box containing the footnote appear when you hover over the number. A quick search led me to this post where he explains that he is using a script from Lukas Mathis in order to accomplish the popup.

This site being hosted on Squarespace made the usual procedure for referencing scripts slightly different, but fortunately they have options to insert code into the header and footer - both site-wide and per page. I downloaded jQuery and the footnote popup script and uploaded them to my separately hosted space, then included both of those in the header.

Of course nothing happened, but I had been expecting that might be the case, and a quick comparison of my source code and the script revealed the problem, the line where the script identifies what counts as a footnote.

var footnotelinks = $("a[rel='footnote']")

My source code showed that my footnote links did not have any “rel” assigned. They did, however, have a class, so I changed the code to say:

var footnotelinks = $("a[class='footnote']")

This now worked… partly, but the popup footnote div was showing under the text below, meaning it was all but illegible in most cases. I wanted to change the popup style, anyway, and whilst I was doing that I realized that inserting a z-index in the css for the div would hopefully make sure it stayed on top.

<code>div.css({
    'z-index':1,
position:'absolute',
</code>

…etc Whilst there I also added in a couple of lines from Dr. Drang which removed the return link from the end of the popup footnotes, a small change but just a bit nicer looking.

div.html($(el).html());
div.find("a[rev='footnote']").remove();

I was now happy with how it looked until I realized that when I hovered over a footnote for longer than half a second it would popup the title of the footnote, which in every case had been set to “see footnote”, whenever the HTML was generated. I’m not sure if this had happened in whatever fork of Markdown Squarespace was using, or whether it was somewhere in Marked which I generally copy HTML from. At any rate, I switched my workflow a little and generated HTML in Textmate instead.

This got rid of the annoying title problem, but also switched the way my footnotes were generated so that they had no class, either, and instead had rel tags. So I eventually changed the line in the script back that I’d originally started with, and everything finally came together.