Search code examples
javascriptjqueryeventsonbeforeprint

using JQuery on beforeprint event

I have the following function.

<script type="text/javascript">
     window.onbeforeprint = 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.

Solution

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