Use jQuery to Show a Link's Address After its Text When Printing In IE6 and IE7

I found a cool trick in a post by Remy Sharp that appends the address of a hyperlink to the end of the link’s text when the page is printed. Unfortunately the trick only works in browsers that support the CSS2 pseudo selector :after. Firefox, Safari, Chrome*, Opera and now IE8 all support the selector. IE6 and IE7 don’t though and that is a huge percentage of users.

I came up with a way to achieve the same thing with IE6 and IE7 using jQuery and the proprietary IE events onbeforeprint and onafterprint though.

• I have only tested this successfully in IE6, IE7, IE8 RC, FF3.1 and Chrome 1.0
• I tried to test in Chrome 1.0 and it did not work. The only thing I can find is Chrome does not yet fully support the “content” selector.

Before Printing:

After Printing:

jQuery

First add a reference to the jQuery file. I recommend using Google’s CDN. After that the following is all that is needed:

Cool jQuery Functions Used:

• append(content) – Append content to the inside of every matched element.
• data(name) – Returns value at named data store for the element, as set by data(name, value).
• data(name, value) – Stores the value in the named spot.
• text() – Gets the combined text contents of all matched elements.
• text(val) – Sets the text contents of all matched elements.

Of course you probably want to add a more in depth print style sheet beyond just this tweak. I would recommend looking at Remy’s post as a starting place.

Be sure to checkout the live demo and download. Please let me know how you would improve this or if you find any bugs. Also, please let me know if it works on Safari and Opera.