Member Avatar for Violet_82

Chaps,
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.
Possible solutions:
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.

Any idea?
cheers

  • 3 Contributors
  • 6 Replies
  • 260 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by Violet_82
Member Avatar for almostbob

IE6 IE7 IE8 support @media queries Joshua made a small mistake?
so it can be simply done in css
@media screen { }
@media print { }
so
@media screen {.dontshow {display:none;}}
@media print {.dontprint {display:none;}}
results in

<div> this text would display in both screen and printer</div>
<div class='dontprint'>this text displays only onscreen</div>
<div class='dontshow'>this text displays only on paper</div>

menus get a 'class="dontprint menu" '
it made my css file 1.5k bigger to produce the differences between the screen handheld and print styles
and it functions well
using IE8 firefox and opera, on a xp mini laptop

Edited by almostbob
Member Avatar for Violet_82

that's odd, I appreciate what the microsoft link says, but I have never been able to get medi querie to work in anything below IE10. Anyway, that's beside the point, because hide and show elements is easy enough, but I need to apply the print only css to a page only when users attempt to print it off. Like I said above, the page has an ordinary css, but when the print button is clicked I somehow need to inject the print css on the page. That I presume should be done with a script? Perhaps targetting the head tag and append the new print only css?

Member Avatar for pritaeas

Why not include them both? I've never had issues with this on earlier IE versions?

<link rel="stylesheet" href="normal.css" type="text/css" media="screen" />
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
Member Avatar for Violet_82

thanks priteas and almostbob. I wasn't aware of the possibility to include media="screen" and media="print" in the css declaration in the html file, hence my issue. I have done a bit of reading following both your posts, and in my case this seems to be the best solution. Thanks for that!

Member Avatar for almostbob

Thats why we all come here :)

Member Avatar for Violet_82

:-)!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.