Is it possible to customize the show and hide properties of JQuery for different media types (e.g., screen and print)?
For instance, I have two divs and a button that toggles between showing and hiding one div while displaying the other. However, when it comes to printing, I want both divs to be visible. Despite defining in CSS that for printing the display should be inline-block, the currently hidden block remains hidden in the printed version. How can this issue be resolved?
Thank you, DorijanHere is an example:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<style type="text/css">
@media print{
#div1{
display:block;
}
#div2{
display:block;
}
}
</style>
<div id="div1">Div1</div>
<div id="div2">Div2</div>
<a href="#" onclick="$('#div1').hide();$('#div2').show();">Show Div1</a>
<a href="#" onclick="$('#div2').hide();$('#div1').show();">Show Div2</a>