Printing a Web page

[mmc6e]

I hope this is the correct area for this question. I have a page that opens in a seperate window and I have put a "Print This Page" button at the top. It works well but I cannot figure out how to have it print without the "Print This Page" button showing on the printed page.

Thanks in advance

[Love2c0de]

Good evening mmc6e,

 

What you could try, is when the user clicks the 'print this page' link, set it to display none?

 

I'm not sure how printing a page works but it might be an avenue to explore.

 

Regards,

 

L2c.

[Psycho]

You could do that, but there is a more elegant option. You can define styles to be different based upon he output. So, you can set the "print" display property of the button to be none when the page is printed vs. in-line when it is viewed in the browser.

 

Put the content in a div (with a class, e.g. 'printDiv') and use some CSS like this:

 

@media print {
    .printDiv { display: none; }
}

 

The content will be displayed in the browser but not in the print output - you can test using Print Preview in your browser.

Edited June 9, 2013 by Psycho

[Love2c0de]

Good morning Psycho,

 

What is the correct naming convention for that style declaration above?

 

Kind regards,

 

L2c

[Christian F.]

Media Queries.

[Love2c0de]

Good morning Christian,

 

You know it was on the tip of my tongue!

 

Cheers bud

 

L2c

[Christian F.]

Good morning to you too, and you're welcome.

[Psycho]

Media Queries.

 

What I showed was a use of Media Types. Media Queries is a feature to extend the functionality of Media Types. As I understand it, Media Queries can be used to apply different styles based upon specific attributes of the output device. For example, you could have a specific style sheet when the output is Color vs. Black & White (most relevant to print output I would suppose.). You could also have different outputs based upon the resolution of the output device. This is probably one of the biggest advantage. Media Types allows for type called "handheld", but that was defined many years ago before the proliferation of "handheld" devices (of varying sizes ) we have today. There isn't always a one-size-fits-all approach for "handheld" devices. The output that works best for a large tablet won't work well for a smartphone. Then you have the in-between sizes such as the iPad mini. Based on this page (http://caniuse.com/css-mediaqueries) Media Queries are just now supported in all major browsers whereas Media Types have been around for about a decade.

 

I wasn't even aware of Media Queries. I think I'm going to have to play around with those.