Footnotes jQuery inclusion
On my main site i've been using the footnotes plugin extensively. I like putting footnotes into the text and signalizing, what I'd rather say, but would not out of respect for the reader. In general placing extended information - be it a citation or an extension to the main text - is a nice way of writing. The plugin i'm using for that is wp-footnotes.
The problem is: for many readers it's hard to read the footnotes especially if they're at the end of a large article. I thought, i would script a little bit and found myself writing the following javascript-snippet which is based on the jQuery-library:
-
jQuery(document).ready(function () {
-
jQuery("a[href^='#footnote-'][id^='footnote-link']").each(function () {
-
aa = jQuery(this);
-
jQuery(jQuery(this).attr("href")).clone().find("a:last").replaceWith("<a href=\"" + aa.attr("href") + "\">»</a>").end().contents().wrapAll("<span class='activefootnote'></span>").parent().insertAfter(aa);
-
});
-
});
Update: wp-Footnotes 3.3
Version 3.3 of wp-footnotes formats the footnote-links differently and therefor our selector has to change. This is the new code:
-
jQuery(document).ready(function () {
-
jQuery("a[href*='#footnote_'][id^='identifier_']").each(function () {
-
aa = jQuery(this);
-
href = aa.href("href");
-
pos = href.indexOf('#');
-
len = href.length;
-
jQuery(href.substr(pos,len)).clone().find("a:last").replaceWith("<a href=\"" + aa.attr("href") + "\">»</a>").end().contents().wrapAll("<span class='activefootnote'></span>").parent().insertAfter(aa);
-
});
-
});
This inserts a span after the footnote number inside the article, which can then be shown or hidden on the spot. To support that effect, the following css-code should be present:
-
span.activefootnote {
-
display: none;
-
}
-
sup {
-
position: relative;
-
}
-
sup:hover span.activefootnote {
-
display: block;
-
position: absolute;
-
background: #fff;
-
border: 1px #000 solid;
-
top:-.5em;
-
left:-100px;
-
width: 200px;
-
}
To make it look nicer, i've expanded the css-code to the following:
-
span.activefootnote {
-
display: none;
-
}
-
sup {
-
position: relative;
-
}
-
sup:hover span.activefootnote {
-
display: block;
-
position: absolute;
-
background: #eaeace;
-
border: 3px #ccc solid;
-
top:-.5em;
-
left:-100px;
-
width: 200px;
-
font-size: 1.2em;
-
padding: 6px;
-
border-radius: 10px;
-
-moz-border-radius: 8px;
-
border-radius: 1em;
-
-moz-border-radius: 1em;
-
opacity: 0.95;
-
}
Maybe Simon Elvery will integrate this code into his plugin.. I think this would be a nice addition. You can see the effect at this article of mine. Just hover over one of the many footnote-numbers..