Home Blog : ALUI Portal Printing

You can do lots of interesting things with Javascript and style sheets. Take printing: there is not only a Javascript event that you could use to get the browser to print a page:

<a href="#" onClick="window.print(); return false;">Print</a>

… you can also use style sheets to dynamically hide or show sections of the page:

<link type="text/css" href="print.css" rel="stylesheet"
lang="en" media="print" />

We’ve talked about CSS before, but this little trick lets you show or hide any items in the DOM only when the page is printed.

For example, at pbrn.ahrq.gov, we had a requirement to allow printing, but the text always seemed to get lost off the right side of the page. The solution was to eliminate the left-hand navigation to save page real estate (who needs that when viewing a printout anyway?), and shrink the top header to the bare essentials. All this was accomplished with some simple JS and CSS, and as you can see, the same page can looks quite different when printing:


Write a comment:


Your email address will not be published.

󰀰 󰀩 󰀭 󰀎