Generating a printable list of a pages' links as endnotes - modified from a script by David Walsh
Nov 24
posted by Sara Burriesci in
Javascript
For many years we wrote out links’ URLs in the visible text on our pages so they would not be lost to users who printed out our pages. This made our site a lot less readable than it could have been. To remedy the situation, we tried a CSS technique that would display links’ URLs only when a page was printed out. Unfortunately, like a lot of useful CSS tricks, this didn’t work in Internet Explorer.
On the David Walsh Blog we found a solution that uses CSS and the MooTools Javascript framework to dynamically generate endnotes showing the URLs of every link on a page. It does this by collecting all of a page’s anchor tags into an array and breaking out the values of their href properties into an ordered list. Unfortunately, this solution generated several empty endnotes, since it also included the empty href values of several named anchors we use for same-page navigation on many of our pages.
My solution to the named-anchor problem was to use MooTools’ array.filter method to remove from the anchor array any anchor whose href value was null. The final, modified code looks like this:
/* when the dom is ready */
window.addEvent(’domready’,function() {
/* get the links */
var links = $$(’#print-content-area a’);
/* remove from the array named anchors lacking an “href” property */
function notNull(a) {
return(a.get(’href’) != undefined);
}
var filteredLinks = links.filter(notNull);
/* if there are any */
if(filteredLinks.length) {
/* create toc list */
var container = new Element(’ol’,{
‘class’: ‘print-only toc-list’
}).inject(document.body,’bottom’);
/* add a heading for the TOC */
var header = new Element(’h2′,{
text: ‘Links In This Document’
}).inject(container,’top’);
/* get links inside the content area */
filteredLinks.each(function(a,i) {
/* insert the span reference right after the link */
/*if(a.get(’href’) != undefined){*/
new Element(’span’,{
text: ‘[' + (i + 1) + ']‘,
‘class’: ‘print-only’
}).inject(a,’after’);
