Trapping CTRL + P in javascript and calling a custom function for printing

Question

Hi, I have a webpage where i show billing information in a pop. This popup is a DIV and not an new window. In that popup there are two div's one is to hold the print and close button and the other is to hold an iframe.

Then reason is when the print button is clicked the content of the iframe is printed so that the print and close buttons will not get printed. it is like...

<div id='popupandcenterscreen'>
<div>... print and close buttons</div>
<div><iframe></div>
</div>

So, it is a listing where each entry has a bill link when clicked the popup is displayed in which an iframe is loaded to display the billing information.

When user clicks the print button we are printing only the document content of the iframe.

BUT WHEN THE USER USED CTRL + P the total window including the backgroung parent window and this popup div gets printed.

what i thought was to trap ctrl+p when the popup is open and to print only the iframe content.

How could that be possible?

Answer 1

I think a better solution would be to control rendering through @media rules in your CSS, or include different stylesheets based on the media type. You can then use CSS properties like display to hide some elements for printing, or even give them different sizes and positions.

Answer 2

Using Css would be better than JavaScript.

The end result might be same one of the other, but would be easier in Css, and be less "hacky".

If you only use JavaScript to sort out the elements to show when printing when the user presses Ctrl + P, It would work.

But if the user clicked print in the menu, you would need a print stylesheet to sort out the page.