8

I am trying to alter style at print-time:

Is there an event in javascript that you can listen for for when file>>print is called? What is it? Also - is there a handler for when printing is finished? What is it?

or if there is a better way to do this with some other means, such as style sheets, how do you do that?

user13276
  • 4,873
  • 5
  • 21
  • 16

5 Answers5

7

Different Style Sheets

You can specify a different stylesheet for printing.

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

One Style Sheet

As kodecraft mentioned, you can also put the styles into the same file by using the @media block.

@media print {
    div.box {
        width:100px;
    }
}

@media screen {
    div.box {
        width:400px;
    }
}
EndangeredMassa
  • 17,208
  • 8
  • 55
  • 79
3

In IE there are the nonstandard window.onBeforePrint() and window.onAfterPrint() event listeners. There isn't a non-IE way to do it that I know of, however.

What kinds of changes are you trying to make? It's possible that your problem could be solved by specifying different rules for your print stylesheet.

danieltalsky
  • 7,752
  • 5
  • 39
  • 60
  • For printing it maybe nice to add aditional content to the DOM. This could all be done with print.css, hiding other elements by default, enabling them. I'd prefer the javascript approach though. Do you know a solution for other browsers? – Hendrik Mar 19 '12 at 23:13
3

Firefox 6 now supports beforeprint and afterprint

https://developer.mozilla.org/en/Printing#Detecting_print_requests

Roger Roelofs
  • 187
  • 1
  • 7
2

We also found that you can do a print-only style with the following:

<style type="text/css">
@media print {
    div
    {
        overflow:visible;
    }    
}
</style>
user13276
  • 4,873
  • 5
  • 21
  • 16
0

IE has onbeforeprint and onafterprint