A recent task of mine was to translate the user experience of footnotes on the printed page to the webpage. On the printed page, a footnote sits at the bottom of the page that has the footnote reference - not too far for your eyes to travel. The problem with putting the footnote at the bottom of the webpage is that this is too far for your eyes to travel - bad experience. Luckily webpages have two things that print does not: hyperlinks and Javascript. With those two tools, I created a webpage footnote experience that lets the user quickly read the footnote without losing their place. View the demo below to see it in action and then learn how to use the jQuery plugin.
Demo
<html>
<head>
<style>
#content {
width: 500px;
position: relative;
}
a.footnote {
font-size: 80%;
vertical-align: super;
}
.footnotepopup-popup {
position: absolute;
padding: 10px;
background-color: #333;
color: white;
left: 0;
right: 0;
}
</style>
<script src="files/jquery.js" type="text/javascript"></script>
<script src="files/jquery.footnotepopup.js" type="text/javascript"></script>
<script>
jQuery( document ).ready( function(){
jQuery( '#content a.footnote' ).footnotepopup( );
} );
</script>
</head>
<body>
<div id="content">
<p>Lorem ipsum dolor sit amet onec<a class="footnote" href="#footnote-11" id="ref-footnote-11">1</a>
malesuada feugiat pretium. Pellentesque
venenatis venenatis tincidunt.
Integer massa neque, dictum sed dictum<a class="footnote" href="#footnote-12" id="ref-footnote-12">2</a>
ac, mattis non risus. Mauris eu suscipit nulla. </p>
<h3>Footnotes</h3>
<ul>
<li id="footnote-11"><a href="#ref-footnote-11">1</a> My first footnote.</li>
<li id="footnote-12"><a href="#ref-footnote-12">2</a> Nam eu lorem sit amet massa bibendum placerat et eget nisl.</li>
</ul>
</div>
</body>
</html>
Basic Example
We are going to start with some pretty simple HTML code of an article with the footnotes at the end. The most important thing to note is the footnote references are links to the IDs for the corresponding footnote. This is great because it does that thing known as progressive enhancement. Without the script, the user can still click on the link and go straight to the footnote.
<html>
<body>
<div id="content">
<p>Lorem ipsum dolor sit amet onec<a class="footnote" href="#footnote-11" id="ref-footnote-11">1</a>
malesuada feugiat pretium. Pellentesque
venenatis venenatis tincidunt.
Integer massa neque, dictum sed dictum<a class="footnote" href="#footnote-12" id="ref-footnote-12">2</a>
ac, mattis non risus. Mauris eu suscipit nulla. </p>
<h3>Footnotes</h3>
<ul>
<li id="footnote-11"><a href="#ref-footnote-11">1</a> My first footnote.</li>
<li id="footnote-12"><a href="#ref-footnote-12">2</a> Nam eu lorem sit amet massa bibendum placerat et eget nisl.</li>
</ul>
</div>
</body>
</html>
Now to add some basic styling. We will format the footnote references links, as they are commonly displayed, as superscript. I know you got that part, now on to the popup. Number one - #1 - thing you need is to position the popup absolute with z-index to achieve the effect. The rest of the popup styles is just visual; for the basic, we will just set a background color, color, width and padding.
#content {
width: 500px;
position: relative;
}
a.footnote {
font-size: 80%;
vertical-align: super;
}
.footnotepopup-popup {
position: absolute;
background-color: #333;
color: white;
padding: 10px;
left: 0;
right: 0;
}
Now for the hard and complex Javascript. First, we include jQuery script. Second, we include footnotepopup plugin script. Third, we call footnotepopup( ) on the jQuery set for the footnote references. Oh look, I lied, it's easy.
jQuery( document ).ready( function(){
jQuery( '#content a.footnote' ).footnotepopup( );
} );
All together now:
<html>
<head>
<style>
#content {
width: 500px;
position: relative;
}
a.footnote {
font-size: 80%;
vertical-align: super;
}
.footnotepopup-popup {
position: absolute;
padding: 10px;
background-color: #333;
color: white;
left: 0;
right: 0;
}
</style>
<script src="files/jquery.js" type="text/javascript"></script>
<script src="files/jquery.footnotepopup.js" type="text/javascript"></script>
<script>
jQuery( document ).ready( function(){
jQuery( '#content a.footnote' ).footnotepopup( );
} );
</script>
</head>
<body>
<div id="content">
<p>Lorem ipsum dolor sit amet onec<a class="footnote" href="#footnote-11" id="ref-footnote-11">1</a>
malesuada feugiat pretium. Pellentesque
venenatis venenatis tincidunt.
Integer massa neque, dictum sed dictum<a class="footnote" href="#footnote-12" id="ref-footnote-12">2</a>
ac, mattis non risus. Mauris eu suscipit nulla. </p>
<h3>Footnotes</h3>
<ul>
<li id="footnote-11"><a href="#ref-footnote-11">1</a> My first footnote.</li>
<li id="footnote-12"><a href="#ref-footnote-12">2</a> Nam eu lorem sit amet massa bibendum placerat et eget nisl.</li>
</ul>
</div>
</body>
</html>
Advance Styling Example
Since I leave the styling of the popups to you, I want you to be able to personalize your popups. Most of your personalization can be accomplish with CSS, but sometimes you do need to modify the popup element. Well, lucky you, I did add an option when creating a popup to pass in a function to modify the popup element during creation.
For example, we want the popup to have a little triangle pointing up from the popup to the footnote reference link. To do this, we need to add an element for the triangle and position it to align with the link. The function will be passed the popup jQuery object and the link jQuery object.
<html>
<head>
<style>
#content {
position: relative;
}
a.footnote {
font-size: 80%;
vertical-align: super;
}
.footnotepopup-popup {
position: absolute;
padding: 10px;
color: white;
background-color: #333;
left: 0;
right: 0;
}
.footnotepopup-popup-arrow {
width: 30px;
height: 15px;
position: absolute;
top: -15px;
background-image: url( "files/up-arrow.gif" );
}
</style>
<script src="files/jquery.js" type="text/javascript"></script>
<script src="files/jquery.footnotepopup.js" type="text/javascript"></script>
<script>
function footnotepopupFilter( $popup, $link ){
var $arrow = jQuery( '<span class="footnotepopup-popup-arrow"> </span>' );
$popup.prepend( $arrow );
var arrow_left_offset = $link.position( ).left + ( $link.width( ) / 2 ) - 15;
$arrow.css( 'left', arrow_left_offset+'px' );
}
jQuery( document ).ready( function(){
jQuery( '#content a.footnote' ).footnotepopup( { 'popupFilter': footnotepopupFilter } );
} );
</script>
</head>
<body>
<div id="content">
<p>Lorem ipsum dolor sit amet onec<a class="footnote" href="#footnote-11" id="ref-footnote-11">1</a>
malesuada feugiat pretium. Pellentesque
venenatis venenatis tincidunt.
Integer massa neque, dictum sed dictum<a class="footnote" href="#footnote-12" id="ref-footnote-12">2</a>
ac, mattis non risus. Mauris eu suscipit nulla. </p>
<h3>Footnotes</h3>
<ul>
<li id="footnote-11"><a href="#ref-footnote-11">1</a> My first footnote.</li>
<li id="footnote-12"><a href="#ref-footnote-12">2</a> Nam eu lorem sit amet massa bibendum placerat et eget nisl.</li>
</ul>
</div>
</body>
</html>
Popup Somewhere Else Example
Maybe you have some really specific personalization where the popup needs to show up within another element on the page.
jQuery( '#content a.footnote' ).footnotepopup( { 'appendPopupTo': '#popups-go-here' } );
Removing the Footnote Popup
Just in case the need arises, you can undo the popups by simple passing "remove" to the plugin.
jQuery( '#content a.footnote' ).footnotepopup( 'remove' );
Download jquery.footnotepopup.js.