How to print only parts of a page?

Question

I am trying to hide some divs before the user prints this giant form, then display the divs again afterward. Thus I want to ignore the rest of the page, and only print the form itself.

Sure I could open a separate page when the user clicks the print button. The only thing is that the form is really long and it would be quite tedious to do that.

Edit: My previous question did not actually reflect what I was looking for. So I changed it to the current one.

Also thanks to all that suggested window.onbeforeprint and window.onafterprint. That was relevant to my edited question.

Answer 1

First, The Ok Way:

Take a look at window.onbeforeprint and window.onafterprint (the original question asked about how to do it programmatically I believe).

Now, the Better Way:

A better way to do this is with a style that is specifically for printing. In other words, your div might look like this:

<div class="someClass noPrint">My Info</div>

You would then have this in your stylesheet:

.someClass {font-family:arial;}
@media print {
    .noPrint { display: none; }
}

Another Option

You could also put this in a separate stylesheet if you wanted so you don't have to mix styles:

<link rel="stylesheet" type="text/css" media="print" href="print.css">

Your screen stylesheet could have ".someClass" defined one way and then your print stylesheet could have it defined a completely different way.

Answer 2

You may want to consider creating a style sheet specifically for printing using media="print"

Answer 3

IE supports onbeforeprint and onafterprint, but what you really want is a print stylesheet.

<link rel="stylesheet" type="text/css" media="print" href="print.css">

See also: this answer

Answer 4

You should really implement this as CSS media=print styles. The media attribute of link element can be used to select to which media a stylesheet is applied. Check this article