Wednesday, March 30, 2011

Javascript Event Handler for Print

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?

From stackoverflow
  • IE has onbeforeprint and onafterprint

  • 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.

  • 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;
        }
    }
    
  • We also found that you can do a print-only style with the following:

    <style type="text/css">
    @media print {
        div
        {
            overflow:visible;
        }    
    }
    </style>
    

0 comments:

Post a Comment