0

I've got a webpage that hides and shows various pieces using jQuery's hide() and show() functions in response to user actions. If the user prints the page, I want all those pieces to be shown, and I've got an @media print section of my stylesheet to do that. However, jQuery's functions override this. How can I solve this problem?

nicholaswmin
  • 21,686
  • 15
  • 91
  • 167
Mark
  • 2,792
  • 2
  • 18
  • 31
  • why don't you temporarily `show()` them all just before printing? – nicholaswmin Dec 25 '14 at 02:01
  • @Nicholas, how do I hook Javascript into the browser's "print" menu option? `window.onbeforeprint`, for example, isn't standardized or cross-browser. – Mark Dec 25 '14 at 02:02
  • 1
    err...http://stackoverflow.com/questions/1234008/detecting-browser-print-event ..Bu this is actually a hack. I would suggest, if you are at the early development stages to rethink if you really need to use `hide()` and `show()`. Maybe you should just abstract into a function the hide and show, and use your own CSS class toggling - as described below - that plays well with `@media print` – nicholaswmin Dec 25 '14 at 02:03

1 Answers1

1

html

<div class="pieces">hello world</div>

if use jQuery hide(); it would output

<div class="pieces" style="display: none;">hello world</div>

style property declared and their priority over others here. so there has a solution, add a class display:none;

<style>
.hide{display:none;}

@media print{

    .hide{display:block;}
}
</style>
<div class="pieces hide">hello world</div>

use $('.pieces').addClass('hide') instead of $('.pieces').hide()

$('.pieces').removeClass('hide') instead of $('.pieces').show()

print demo http://jsfiddle.net/abj01sa7/3/show/

Alien
  • 3,658
  • 1
  • 16
  • 33