So I'm trying to add a print button to an html page. Most of the page is not supposed to appear in print, so I hide everything in print and then reveal only the one div that is supposed to be printed (or this is what I'm trying to do). But when I try the print button out, the resulting page is completely empty. The html structure of the page looks like this:
<body>
<div id=fullpage>
<div class=section>
some stuff that should not be printed
</div>
<div class=section>
even more stuff that should not be printed
</div>
<div class=section id=results_page>
<img id=result_image class=archiv src=./images/heumarkt/APDC0013.JPG>
<div class=content_wrapper id=result_text>
<h1 id=result_h1>some stuff</h1>
<h2 id=result_h2>more headlines</h2>
<p id=result_p1>some text</p>
<button class=print_trigger onclick=javascript:print_stadtarchiv(true)>print</button>
<button class=print_trigger onclick=javascript:print_stadtarchiv(false)>print without picture</button>
</div>
</div>
</div>
</body>
And here is the CSS that is supposed to hide everything except the div with the id results_page (of course the buttons in that div are also supposed to be hidden in print).
@media print {
*{
background-color:transparent;
}
div#fullpage .section, .print_trigger, .unprintable{
display:none;
}
div#fullpage #results_page{
display:block;
}
#result_image,
#result_text {
float: none;
margin: 50px;
}
}
The javascript function is pretty simple, depending on what button the user clicks it adds the unprintable class to the picture element and then prints the document (I'm not sure if the html, the css or the js are the culprit here, this is why I include all of this in the question):
function print_stadtarchiv(print_picture){
if(!print_picture) $('#result_image').addClass = 'unprintable';
window.print();
}
So, given all of this, what could be causing the empty page my printer spits out?
