Question

i have a

<div>.......</div>
<div id="some_id"></div>

and in my script i have done

$('#my_button').click(function(){
$('#some_id').toggle();
})

so initially the text withing the div is hidden using style=display:none , but when i take a print out , the hidden text is also printed ! what i want is that only when text in is visible only then it show be displayed in the print out , if hidden it should not come in the print out

To recreate , create two div tags and make one of them style= display:none , now open the webpage in IE and do a select All , when u paste in a MS word or excel you will see even hidden text is selected

i think i need to use @media of css but i cant figure it out

Answer 1

In your stylesheet use this:

@media print {
.noPrint {
    display:none;
}
}

Then add class='noprint' (or add the noprint class to an exsiting class statement) in your HTML that you don’t want to appear at the time of printing. like this

$('#my_button').click(function(){
     $('#some_id').toggle();
     if($('#some_id').is(":visible"))
     {
        $('#some_id').removeClass('noprint');
     }
     else
     {
        $('#some_id').addClass('noprint');
     }
})