How can I hide button before printing and show it when printind process has been completed?

Question

I have a print button with id="print_req". I wrote some Javascript code for printing a page, which is triggered by clicking on this button, and I also want to hide this button before printing, and show it after whole printing process.i mean not to print button in my printed document. Here is my code:

$(document).ready(function(){
    $("#print_req").click(function(){
        $("#print_req").css("display","none");
        window.print();  
    });

    $("#print_req").css("display","block");
    return false;   
});

This correctly hide that button, but when the printing process get done, the button won't show again! What is the problem?

Answer 1

You are going at this wrong. You should not be showing and hiding the button with JavaScript or using a background image to do it. You should be using a print stylesheet that will allow you to apply different styles to the page when it is printed. In your case you would set the display to none [or visibility to hidden] in this stylesheet.

So you add a stylesheet with the media type for print

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

In that print.css, you hide the button

.printButtonClass{ display : none }

And presto, the button hides when you print with no JavaScript.