I have a print page, and I want to put a div with some instructions on how to print the page in it. I don't want this section to appear when they actually print the page.
How would I achieve this using CSS or JavaScript?
To hide the element, add “display:none” to the element with CSS.
You can use page-break-inside="avoid" on <div> "B". This is probably closer to what you want. If "B" does not fit on the page with "A", "B" will all be moved to the next page.
You simply need to create a 1 line stylesheet named "print. css" that includes the following line of CSS. This one style will turn the "body" element of your pages to being not displayed — and since everything on your pages is a child of the body element, this means that the entire page/site will be not displayed.
To print the content of div in JavaScript, first store the content of div in a JavaScript variable and then the print button is clicked. The contents of the HTML div element to be extracted.
A common method is to use a separate CSS for printing. You can have a css for all media and one for print:
<link rel="stylesheet"
type="text/css"
media="print" href="print.css" />
In the print.css just put the display:none on the div.
Davide
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