Why jquery have problem with onbeforeprint event?

I have the following function.

$(function() {
    $(".sectionHeader:gt(0)").click(function() {
        $(this).next(".fieldset").slideToggle("fast");
    });
    $("img[alt='minimize']").click(function(e) {
        $(this).closest("table").next(".fieldset").slideUp("fast");
        e.stopPropagation();
        return false;
    });
    $("img[alt='maximize']").click(function(e) {
        $(this).closest("table").next(".fieldset").slideDown("fast");
        e.stopPropagation();
        return false;
    });
});

<script type="text/javascript">
     window.onbeforeprint = expandAll;

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

For this html

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

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

I have several div class="fieldset" over the page, but when I do print preview or print, I can see all divs sliding down before opening the print previ开发者_开发知识库ew or printing but on the actual print preview or print out they are all collapse.

I would appreciate if anyone comes with a solution for this.

Anyone have any idea why is this or how to fix it?

Thanks.

PS:Using a does not work either ( I assume because jquery using toggle) and its not the kind of question I am looking for.

An easier way to do this is in the CSS, you can have different styles for printing vs the screen like this:

@media print {
  .fieldset { display: block; }
}

@media screen {
  .fieldset { display: none; }
}

The .fieldset class will display when printing, but not by default in the browser. Be sure to take out your in-line diplay: none styles on .fieldset divs in the page, as they'll override either of these in a CSS file.

I would like to strongly suggest to you not to use this technology for printing. You need to rely on a setup that works without javascript for printing.

Although the method you are going for can be marked as clever although using:

<style type="text/css" media="print">  css to modify for print  </style>

Will ensure that you get your expanded panels for print even without javascript.

A JavaScript solution is available for the need is not using onbeforeprint event (which is not supported in some browsers), but use the window.matchMedia API.

var mql = window.matchMedia("print");
mql.addListener(function(mql){
  if(mql.matches){
     // on before print
  }else{
     // on after print
  }
});

Here is an jquery polyfill:

/**
* jQuery polyfill to handle beforeprint/afterprint on webkit-based browsers.
*/
(function ($) {
  // TODO: for some reason events are coming twice, need to debounce them
  if ((window.onbeforeprint === undefined || window.onafterprint === undefined)
    && window.matchMedia
  ) {
    var mediaQueryList = window.matchMedia('print');
    mediaQueryList.addListener(function (mql) {
      if (mql.matches) {
        $(window).trigger('beforeprint');
      } else {
        $(window).trigger('afterprint');
      }
    });
  }
})(jQuery);

With polyfill behind you will be able to handle onbeforeprint/onafterprint in obvious way for webkit-based browsers and IE, Firefox with jquery:

$(window).on('beforeprint', ...);
$(window).on('afterprint', ...);