Jquery + endnotes

+ print.css = Usability

So I couldn’t think of a better name for it! Sue me.

This little script is all about bringing the old-school essay writer into your code and aiding those of us still using that anachronistic stuff called “pay peer” or some such chicanery.
 

The Problem:

When you print off a website, you often forget to print off the linked pages. And if you don’t have the original site handy, there’s no way to see the actual address of the link.  Or I should say there USED to be no way.

Let’s hop on the jquery trolly and see where it takes us.  Take a look.

 

The Code:

<script>
$(document).ready(function() {
   var aHrefs = [];
   var i = 1;
   $(".endnote").each(function() {
      aHrefs.push($(this).attr("href"));
      $(this).append("<sup class=\"print\">" + i + "</sup>");
      i++;
   });
   var text = "<ol class=\"print\"><li>" + aHrefs.join('</li><li>') + "</li></ol>";
   $('body').append(text);
})
</script>

The Explanation:

So what do we have here?  Well, basically this script will take a look for any link with the class “endnote”, grab it’s href contents (that is, the link address) and file it away in a pretty array.

We then go through the site and add a nice little superscript tag, numbering the link.

It then will create a nice numbered list of the addresses that corresponds to your superscript markers and sticks it at the end of the body tag.

If we then make a style sheet addition to our main css file something along the lines of:
.print{ display: none;}

and then in the PRINT stylesheet, we add
.print{ display: inline;}

This will ensure your tasty endnotes, nor the superscript numbers don’t appear on screens or projectors, but they DO show up when a user goes to print the site.

PS — We’ve got this in mind for a special project that’s in the works and we can’t wait to show you.




Leave a Reply