using JQuery on beforeprint event

I have the following function.

<script type="text/javascript">
     window.onbeforepri开发者_如何学Gont = expandAll;

     function expandAll(){
       $(".fieldset:gt(0)").slideDown("fast");
      }
</script>

For this html

<table class="sectionHeader" ><tr ><td>Heading</td></tr></table>
 <div style="display:none;" class="fieldset">Content</div>

I have several block of content over the page, but when I do print preview or print, I can see all divs sliding down before opening the print preview or printing but on the actual print preview or print out they are all collapse.

Anyone have any idea why is this?

Thanks.

You need to use a print style sheet e.g.

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

You can style things up specifically for how you want the printed page to look without having to use the JS to do anything to it.

CSS media works only for presentation, unless JavaScript is using a style object or a jQuery css method, you cannot change of disable JavaScript with CSS.

You need to just bind to the un document window beforeprint event, in general jquery just drops the on and has the event name in all lower case.

function expandAll() {
    $(".fieldset:gt(0)").slideDown("fast");
}

$( window ).bind( "beforeprint", expandAll );

// Anonymous would look like

$( window ).bind( "beforeprint", function() { 
    $(".fieldset:gt(0)").slideDown("fast"); 
});