mmc6e Posted June 8, 2013 Share Posted June 8, 2013 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 Quote Link to comment Share on other sites More sharing options...
Love2c0de Posted June 9, 2013 Share Posted June 9, 2013 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. Quote Link to comment Share on other sites More sharing options...
Psycho Posted June 9, 2013 Share Posted June 9, 2013 (edited) 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 Quote Link to comment Share on other sites More sharing options...
Love2c0de Posted June 10, 2013 Share Posted June 10, 2013 Good morning Psycho, What is the correct naming convention for that style declaration above? Kind regards, L2c Quote Link to comment Share on other sites More sharing options...
Christian F. Posted June 10, 2013 Share Posted June 10, 2013 Media Queries. Quote Link to comment Share on other sites More sharing options...
Love2c0de Posted June 10, 2013 Share Posted June 10, 2013 Good morning Christian, You know it was on the tip of my tongue! Cheers bud L2c Quote Link to comment Share on other sites More sharing options...
Christian F. Posted June 10, 2013 Share Posted June 10, 2013 Good morning to you too, and you're welcome. Quote Link to comment Share on other sites More sharing options...
Psycho Posted June 10, 2013 Share Posted June 10, 2013 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.