Web Builder Zone - Comments for "Optimize Your Links For Print Using CSS: Show The URL "

@Andrew & Chris: That's

davidwalsh — Thu, 06 Mar 2008 09:19:32 -0500

@Andrew & Chris: That's right, Chris. Since you don't always know what directory the page is in, javascript would be the best way to go.

@Andrew: That's a good

chriscoyier — Thu, 06 Mar 2008 09:07:27 -0500

@Andrew: That's a good question, I don't know that there is a way to do that. Maybe with some javascript finagling?

This is a great technique,

Andrew Fleming — Thu, 06 Mar 2008 00:51:59 -0500

This is a great technique, very handy for users. I did have one question in regards to displaying global URL's after the links. When I put the CSS in my print style sheet only the relative links appeared after the links. Of course this is better than nothing, but it's not ideal. Is there a way to display global URL's without putting them in the HTML?

This is SO timely. Just

blathermoore — Fri, 29 Feb 2008 15:02:51 -0500

This is SO timely.

Just yesterday, I had to print out a purchase receipt after buying an online service. It had links on the online receipt to places where I could get developer docs, find the control panel, and get support. But of course I just printed it out for my files thinking I'd be able to find the links if I needed them.

Only the underlined text printed out, of course. Oh, and the links were not present in my confirmation email, which was just dumb. I had to do a really difficult search to get back to the online version of the receipt, then bookmark those links.

I would not have minded being able to just type them in from paper considering how long it too me to find the receipt.

Thanks. And sure, it could

bryanmig — Fri, 29 Feb 2008 14:29:34 -0500

Thanks.

And sure, it could be modified in any number of ways since jQuery uses CSS3 selectors. We could take it one step further and easily turn it into a jQuery plugin.

I know it could be done in any framework, or with pure JS but I am a big fan of jQuery so thats why I do it this way.

OMG that is a beautiful

ext237 — Fri, 29 Feb 2008 13:09:22 -0500

OMG that is a beautiful thing. And with a small modification, you can have it filter to just whats in the 'mainContent' div. Nice contribution, thanks!

One line of jQuery is all

bryanmig — Fri, 29 Feb 2008 12:29:03 -0500

One line of jQuery is all you need. This uses the same approach as noted above by Joe, only it is done client side.

$('a').each(function(i,e){$(e).html($(e).html() + "<span class='print-only'>"+this.href+"</span>");})

In your screen CSS:

span.print-only {display:none;}

Awesome suggestion Chris --

davidwalsh — Fri, 29 Feb 2008 10:36:32 -0500

Awesome suggestion Chris -- I didn't include that in the code.

Another thing to consider is

chriscoyier — Fri, 29 Feb 2008 10:23:24 -0500

Another thing to consider is in which sections you would want this to happen. I really love this technique for the main content area, but I wouldn't want those anchor links printing their URL for things like your main menu. You could just do something like:

#main-content a:after { content:" [" attr(href) "] "; }

...in your print stylesheet. This also assumes that you aren't already hiding your menu in the print stylesheet, which can also be a good idea.