Printing Scrollable DIVs - Full Contents Only

Making a button outside a scrollable DIV print the full contents of a DIV?

[rufnut]

Hi guys

I've trawled the net for an answer to this and have learnt alot but not found the answer to my question.

I am developing a page which will contain a scrollable DIV. I want to make a button on the webpage (outside the scrollable DIV) print the full contents of the DIV. So far I have been using IFRAMES to do this successfully but would like to move away from this because of the need to produce 2 seperate HTML pages for it to work.

Kind Regards,
RufNut

[jollymcfats]

If you want any print action (from the browser menu or window.print()) to print the full contents of the div, you can specify an alternate printing stylesheet with the media attribute:

<link rel="stylesheet" media="print" ...>

In that stylesheet you could override the styling for the div to make its height automatic or whatever is needed to print well.

If you want the default print to work normally and have your custom print button be the only way to print the full div contents, you could switch to an alternate stylesheet when your print button is pressed. The alternate stylesheet could hide all the content but the div. Then just switch back to the regular stylesheet after printing.

function printDiv() {
 switchToDivPrintSheet();
 window.print();
 switchToRegularSheet();
}

Googling for changing stylesheets on the fly should net a variety of approaches for writing the switch...() functions.

[rufnut]

It works - thank you SO much.