Amra Amra - 2 months ago 6x
jQuery Question

Why jquery have problem with onbeforeprint event?

I have the following function.

$(function() {
$(".sectionHeader:gt(0)").click(function() {
$("img[alt='minimize']").click(function(e) {
return false;
$("img[alt='maximize']").click(function(e) {
return false;

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

function expandAll(){

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 preview 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?


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.