I run into a strange problem today for the first time. Basically I have a web page that users can print using a print button on the page itself,
but what I want is them to be able to print a print-only version of this page. So, I wrote a css that skins down the page a little, removing,
or I should say hiding, unwanted elements. The problem is the functionality: how do I make sure that when the user clicks the print button
it prints off the page with the print only style sheet? Let's see some code. Here is my sample page:
<html> <head> <title></title> <link rel="stylesheet" type="text/css" href="normalCSS.css"> </head> <body> <div> <a href="#">Print page</a> </div> <div> <!-- all my content goes here--> </div> </body> </html>
This page has a
normalCSS.css file on it, which is its ordinary css. I have another file called
printOnly.css that skins the page down but it is not included in the above code.
So, I need this print only css to be applied to the page everytime somebody press the print button.
1)a script that replaces the current css with the printOnly.css when the print button is clicked?
2)a script that adds the css to the page positioning after the normalCSS.css so that whatever is in printOnly will take precedence?
I have looked into the print media query http://www.joshuawinn.com/css-print-media-query/ but I don't see how that could help me bearing in mind that
the media queries are not supported in IE7 and 8 anyway.