Menu
I have a XHTML-based page which contains admin information. The admin should be able to print the page, but I would like it to hide their information.
Is there a way to set a print area when printing a page, or is the only viable solution to open up a secondary page without the admin information when clicking on the "print" button?
Thank you!
826
The media query is used to hide an element when printing web pages. Use @media print query and set the visibility hidden to that element that needs to hide at printing. Example 1: In this example, hide the element h1 at printing time. To hide the element h1 use media query and set visibility:hidden.
To hide an element, set the style display property to “none”. document. getElementById("element"). style.
Completely hiding elements can be done in 3 ways: via the CSS property display , e.g. display: none; via the CSS property visibility , e.g. visibility: hidden; via the HTML5 attribute hidden , e.g. <span hidden>
This rule allows you to specify different style for different media. So, you can define different rules for screen and a printer. The example below specifies different font families for screen and print. The next CSS uses the same font size for both screen as well as printer.
try this:
<style type="text/css" media="print">
.dontprint
{ display: none; }
</style>
<div class="dontprint">I'm only visible on the screen</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
