TAGS :Viewed: 7 - Published at: a few seconds ago
[ How to print a Hidden DIV when printing using a JavaScript Function ]
I have a javascript print function:
function printDetails() {
var printContent = document.getElementById('<%= divMail.ClientID %>');
var windowUrl = 'about:blank';
var uniqueName = new Date();
var windowName = 'Print' + uniqueName.getTime();
var printWindow = window.open(windowUrl, windowName, 'left=500,top=500,width=0,height=0');
printWindow.document.write(printContent.innerHTML);
printWindow.document.close();
printWindow.focus();
printWindow.print();
printWindow.close();
return false;
}
I have the following HTML:
<div id="divMail" runat="server" >
<div id="showTopDetailsContent" style="display: none; position:relative;">
MORE HTML
</div>
</div>
And the following JQuery/Script:
$('#showTopDetailsContent').toggle(300);
The problem: When I Print I get the Contents of the divMail (DIV) and send them to the Print Function, the problem is that since I have a DIV inside divMail that is Hidden it will not be displayed in the Print. How do I make the Print Function Display that hidden DIV?
Answer 1
try this:
printWindow.document.getElementById('showTopDetailsContent').style.display='block';
after the
printWindow.document.write(printContent.innerHTML);
Answer 2
You can specify it as visible for printing in CSS:
@media screen {
#showTopDetailsContent { display: none; }
#showTopDetailsContent.show { display: block; }
}
@media print {
#showTopDetailsContent { display: block !important; }
}
And instead of using .toggle()
which applies inline styles, use a class.
$('#showTopDetailsContent').toggleClass('show');