How can I customise the browser's output for print/print preview?

Question

I'm trying to dynamically hide certain DIV's when a print (or print preview) occurs from the browser.

I can easily differentiate statically by having two style sheets, one for normal and one for print media:

But I need to go one step further and hide some elements dynamically when the print style sheet becomes active during a print based upon certain criteria

One way to easily solve it would be to handle a DOM event for handling print / printview, then I could just use jQuery to change the display:none on the classes that need to be hidden, but I can't find a DOM print event!!

Anyone know what the solution is?

Answer 1

Not all browsers allow you to capture the print event. I've seen this tackled by adding a 'print this page' link and then using that click event to accomplish what you need.