Jquery: print hidden element

Question

I use the jQuery Print Element plugin to print, but I think this is a common css problem:

How can I print a hidden element? (with css set to display: none;)

when I try, I get only a simple sheet. is there any solution?

thank

Answer 1

As DN suggests, using a print style sheet will work well. In the print style sheet, set your css rule to #element {display:block}.

I look at jQuery.printElement Options , and there is an option overrideElementCSS. This seems to be exactly what you need. Here is a sample code:

$("#element").printElement( 

            { 

            overrideElementCSS:[ 

        'thisWillBeTheCSSUsed.css', 

        { href:'thisWillBeTheCSSUsedAsWell.css',media:'print'}] 

            }); 

thisWillBeTheCSSUsedAsWell.css , #element {display:block}.

Answer 2

?

Answer 3

, jQueryUI

{display:none !important;}

!important , , , !important ( , jQuery)

Answer 4

, .

<div id="to-be-printed" style="position:absolute;z-index:-9999;">
  <%= render :partial => "printed_version"%>
</div>
<div id="to_be_printed_cover" style="position:absolute;z-index:-8999;background-color:white;">
  <script type="text/javascript">
  $( document ).ready(function() {
    $("div#to_be_printed_cover").css({ 
      height: $("div#to_be_printed").height(),
       width: $("div#to_be_printed").width(),
    });
  });
  </script>
</div>

( ), , .

Answer 5

div display: none;

        <div style="display: none;">
            <div id="printable-area">
                <h1>Lorem ipsum</h1> 
                <p>Lorem ipsum dolor sit amet</p>
            </div>
        </div>