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

The problem is that you cannot know when the printing is finished using javascript. There's no event that will be triggered to notify this.

For security reasons javascript is executed in a sandboxed environment inside the browser limiting its access to any system resources.

Answer 2

The print dialog box is part of the operating system. Javascript can only access items that are part of the web page - anything else would be a major security breach.

Answer 3

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.