Printing a single Div

Hi guys I hope everyone is having fun watching football today…

I would like to be able to print a single div on an onclick event. I am trying the code

<input type=“Button” name=“printit” value=“print” onclick=“getElementByID.print(“printdiv”)”>

but it doesn’t seem to work. Usually I would just create a seperate stylesheet for printing and make all the divs i dont want to print to display:none; in this instance though that will be a huge pain because the project is an old table based layout with many php includes, and i dont have time to redo the whole project

any help would be great.



no you can’t print just a part of your page like that !
you would have to use css media screen and media print, defining display properties for each element according to media…

[URL=]here is a example …
(in french but principle is there)
you will see that waht you print is not what you see…

Usually I would just create a seperate stylesheet for printing and make all the divs i dont want to print to display:none;

or print a popup

The way I’ve worked before is to grab the content from the element and plug it into a dynamically created iFrame (with CSS styling to prevent it from being visible). You can then print the contents of that frame without too many problems.

You could use Javascript stylesheet switching to select the print stylesheet that will print just the part of the page that you want based on which print link is selected.

felgall => why try and reinvent warm water when css has already this brilliant feature called media screen and media print … no need to switch … (see link above )

Wasn’t the original question about being able to select which div to print. Sure using media=print allows you to define a stylesheet for printing the page but it provides a static definition of what parts of the page to print and what parts not to print. Therefore it is not a complete solution to being able to print different divs at different times.

The easiest way to allow for different parts of the page to print from different print links is to set up separate stylesheets with media=print that define what to print for each of the alternatives and define all but one of them as alternate stylesheets. You would then use Javascript attached to the print links to define which of the media=print stylesheets is the currently active one based on which part of the page it is that you want to print.

Not a matter of reinventing something at all. More a matter of using three provided facilities together to achieve something that can’t be achieved with only one of them.

media print = static ?
ever heard of the possibility of changing the class of an element dynamically ??

just build your media screen with a class display:none and a class display:block
put all elements with display none for media print
and modify class of element you want to print on page
document.getElementById(‘blabla’).className=mediascreenthathasdisplayblock …

Any class changes that you make will apply to the stylesheets for all media types. For switching everything for just one media type is is far simpler coding to just swap the entire stylesheet.