[ 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');