Our print preview library is set up to display the final product to users, but we don't want the images to actually be printed since we are using branded paper.
To address this, I have included a print media query in the print.css file and added all images to the hideImg class defined within that file.
I am trying to figure out why the print media query is not functioning as expected or how I can adjust the library or jQuery code. I have attempted different approaches such as placing the images in different divs and modifying the displayed content on the preview screen, but without success.
Although the classes are correctly applied, no errors are shown in the console.
CSS :
@media print {
/* -- Hide screen specific elements -- */
.hideImg{
display:none !important;
visibility:hidden !important;
}
}
jQuery
var images = document.getElementsByTagName("img");
var i;
for(i = 0; i < images.length; i++) {
images[i].className += "hideImg";
}
HTML
<div id="content" class="container_12 clearfix">
<div id="printableArea" style="display:none;">
<img src="images/badgeHead.png" alt"needs more jpg"/>
<h1>Hi, my name is...<br/>
</h1>
<br>
<img src="images/badgeFoot.png" alt"needs more jpg"/>
</div>
</div>
Library jQuery
// Bind closure
$('a', print_controls).bind('click', function(e) {
e.preventDefault();
//adding the printframe contentwindow rather than body prints out just what we want
if ($(this).hasClass('print')) { print_frame[0].contentWindow.print(); }
else { $.printPreview.distroyPrintPreview(); }
});