Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Preventing a div and its content from being printed

Tags:

css

printing

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?

like image 368
Fiona - myaccessible.website Avatar asked Nov 27 '09 12:11

Fiona - myaccessible.website


People also ask

How do I hide the elements when printing?

To hide the element, add “display:none” to the element with CSS.

How do I stop an element from printing on two pages?

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.

How do I block a website from printing CSS?

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.

How do I print only a selected DIV?

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.


1 Answers

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

like image 70
Davide Icardi Avatar answered Sep 19 '22 15:09

Davide Icardi