Bigger Footnotes With MultiMarkdown
The following is a guest post by Howard Buddin, a fellow Charlestonian, a neuroscientist, and a MultiMarkdown aficionado. He discovered a new tool that adds interesting features to websites using MultiMarkdown footnotes, and graciously agreed to write about it!
*I’ve been using the MultiMarkdown Content Management System for a little more than a year now. I dig it a lot. Among the myriad features MultiMarkdown (and the CMS) affords is the ability to render footnotes. On a mobile viewport (i.e., tablet, phone), however, there is potentially a lot of jumping back and forth between the footnote and its respective anchor, depending on the length of the text. This is not a functional problem, per se, but it does disrupt the flow of text and reading.
A secondary issue was somewhat related to functionality: for sites that use a scrolling toolbar, jumping from the footnote back to the text results in the text at the footnote anchor being covered by the toolbar (at least on phone-sized viewports I’ve tested). To be sure, this was more of an annoyance since everything else worked as advertised, and it would be a non-issue on sites without a scrolling toolbar. Ultimately, there wasn’t much I could do about it – my skills in JavaScript, JQuery, etc. are fairly minimal, at best, and I didn’t have the time to try to fix something so decidedly cosmetic.
Then I came across Bigfoot JS, a JavaScript plug-in that creates (mostly) popover style menus from existing footnote syntax. Fun fact: it was tested by the developer using the MultiMarkdown syntax with 100% success. After viewing the demos, I headed over to the Github repository and cloned it straight away.
To get it running is as straightforward as most single-purpose plugins:
- Pick the style of footnote that you want to use (there are four popover-style menus and one visor-style menu that slides up from the bottom)
- Drop the style-specific JS and CSS files into their respective directories for your site
- Point to the JS and CSS files (how and where you do this depends on certain factors, e.g., dynamic versus static pages)
- Include the following script before the
</body>tag
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/bigfoot.js"></script>
<script type="text/javascript">
$.bigfoot();
</script>
Simple. The plug-in worked exactly as advertised, right out of the box. There are multiple options that you can include in the default plug-in script, which you can find in the documentation.
On a final note, I started off using the MMD CMS to manage the articles section of Neuropsych Now, a website authored by myself and my friend and neuropsychology partner-in-crime, Marc Testa, Ph.D.. Neuropsych Now was my first crack at coding a web site. As a newcomer, it wasn’t the easiest thing in the world to figure out, but just as with anything else, a little time and effort pay dividends. If you’ve never given this CMS a look, I encourage you to do so. Creating an entire website, writing only in MultiMarkdown, and enjoying the benefits of a powerful CMS is a pretty nice thing.
Fletcher’s note: As of version 4.4, MultiMarkdown offers the --random option to generate unique footnote id numbers in case you show multiple articles at once on your website. This prevents footnotes in different articles from colliding with each other.
Follow me on twitter
Subscribe to atom feed