SHOW URL WHEN PRINTING

[berkshirea]

Hi guys,

I have been searching the net for some css or scripts that will allow me to show the URL of my links when being printed and found these sites:

http://davidwalsh.name/optimize-your-links-for-print-using-css-show-url

http://beckelman.net/post/2009/02/1...er-its-Text-When-Printing-In-IE6-and-IE7.aspx

but notice that these works great ONLY when the link is absolute and not relative. My site is using relative links.

Any ideas how I could make this to work in relative links?

Or better yet, if you have any existing scripts or css that could do better job that the above sites?

Thanks for any help.

 

[feherke]

Hi

I would go with the first solution you mentioned and additionally I would put a JavaScript to rewrite the links :

window.onload=function() {
  for (var i=0,l=document.links.length;i<l;i++) document.links[i].href=document.links[i].href
}

Tested in FireFox.


Feherke.

http://rootshell.be/~feherke/

 

[berkshirea]

the thing with the first link is that, it does not work in IE. majority of the visitors of my site are using IE.

 

[BillyRayPreachersSon]

Doesn't IE automatically print the URL as part of the page header anyway?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[Olaf Doschke]

Billy Ray, you're right, at least IE does when printing a page, but that will just be the link to the current page. If you have several image links or even text links that don't show their URL in the browser, in a printed version the URLs can be handy, even if it's rather cumbersome to enter URLs from printed text. I'd rather visit the site and naviaget to the printed page to be able to click the links.

Nevertheless, it could then be good, if in the printed persion there'd not just be blue underlined text, but also the URL.

@berkshirea: The second approach seems more promising, although it needs some preparation, eg you need to load jQuery as mentioned to make that javascript work and you need to make every href a class="print_link" besides changing to the full URL. Take feherke's code and also change each link's class.

Bye, Olaf.

 

[berkshirea]

hi guys,

i just think i will go for a much simpler solution. i will just use the css display: none, block for screen and print media. although that would mean re-writing the url again side by side with the clickable link. i think i could live with that. (as there are visitors on my site that don't have their javascript turned on.)

thanks again guys!

have a nice day.

 

[Olaf Doschke]

It's surely a good idea to use CSS for print media, and that's simply adding a CSS stylesheet dedicated for printing and for example have this CSS definition inside it:

...
a:link:after { content: " (Link to <" attr(href) ">) "; }
...

Within your page load that CSS additional to the normal one by:

...
<link rel="stylesheet" media="print" href="path/to/print.css">
...

No need to change anything else.

Bye, Olaf.

 

[feherke]

Hi

Olaf, please note that your suggestion is the same as the first solution mentioned by the OP. The same about which he also wrote that :

these works great ONLY when the link is absolute and not relative.

it does not work in IE.

Feherke.

http://rootshell.be/~feherke/