Capturing Print Event via jQuery

Question

I would like to be able to manipulate the DOM just before my page is sent to be printed. Internet Explorer has an event on the window object called "onbeforeprint" but this is proprietary and isn't supported by other browsers. Is it possible to do this via javascript (jQuery in particular, if possible)?

Before you ask, I can't easily use a print media stylesheet to apply the changes as the elements I need to change have inline styles which can't be overridden with a global stylesheet. I need to override these inline styles for print purposes. It should be possible to modify the existing jQuery if needs be, however that would be a more time-consuming and risky change.

Cheers, Zac

Answer 1

Why not just call the print() function from within an other function?

Like:

function myPrint() {
  $("#myDiv").css({"border-color":"red"});
  window.print();
}

Then you could call it from where you need it.

Answer 2

Adding !important after a property in your CSS will allow it to override the inline styles. For example:

<div class="test" style="color: blue;">Some Text</div>

css:

  .test {
     color: red !important;
  }

will be displayed red.