How to Print Selective Sections of a Web Page using CSS and DOM Scripting

This is an experiment to see if it’s possible to selectively print sections of a large document usings CSS print styles after the page has loaded without affecting the on-screen display.

Why might you use this? Well, the inspiration came from a page of interest rates from banking and savings products. Customers have often complained that the interest rates were split up on different sections - they wanted everything in one page. But what about those people who only want to print out the section that relates to them? One solution is to build the page using include files with separate printer-friendly pages that are linked to. This solution uses DOM scripting to dynamically apply print CSS styles depending on the link that has been clicked on - if the user clicks on ‘print this section’, all other sections are set to display none for print.

This technique could be use in

FAQs
Product information pages
… well, wherever you feel it has value

This has been tested and works in

Windows
- Firefox 1.5
- Netscape 6.2
- Netscape 8
- Opera 7.0
- Opera 8.5
- IE 6
Mac
- Firefox 1.5
- Camino 1.0
- Opera 7.54

Notes:

The ‘print this section’ links are dynamically inserted for any section that is marked with the class name of section and are hidden using print CSS. No JavaScript, no see the links!

I have had to double up on the attribute setters in the script so that IE didn’t get upset. It’s not perfect, but it works and isn’t really nasty. No, honestly, it isn’t ;-)

el[i].setAttribute("className","section print");
el[i].setAttribute("class","section print");

View the Example Here »

And if you like what you see, why not digg it for me? Thanks

Copy the Code Here

Get the JavaScript here and the HTML here

This entry was posted on Tuesday, March 21st, 2006 at 2:02 am and is filed under CSS, Scripting, Tech, Web Standards. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

67 Responses to “How to Print Selective Sections of a Web Page using CSS and DOM Scripting”

AcromE says:

July 3, 2007 at 5:26 am

Excellent.!!! Its work like charm..thank you
Ignasi says:

July 12, 2007 at 4:22 pm

Hello!

I’ve readed your blog and I found this post, is great!

I’m traying to add a “printer-friendly” a blogger Blog, do you know if it’s possible to add this script in blogger?

I don’t know how to addapt a print´-friendly in bloger, I wish I could add this hack!!

Thank you!
chun says:

July 19, 2007 at 12:28 pm

i tried example above using print_section.js and

i printed the selected portion, but i also printed stuff above i specified stuff.

How to only print selected portion?

Thanks
Dugu Miko says:

August 11, 2007 at 10:21 am

Great script, work perfectly for what I needed it. But i would also like to know how to print only a small portion.
Thanks, best regards,
Dugu
Kathir says:

August 28, 2007 at 10:18 am

Hi all,
Thanks for this useful script.
But its not works for me…. may be i dont know how to use this.
I have many table inside and outside a table and even tags. i have set the required table to be print section. its even get the CSS background. but when i print that section its print the whole body of page..
If anyone know pls reply to me how to fix this.

Regards,
Kathir.B
India says:

October 7, 2007 at 4:12 pm

i tried example above using print_section.js and

i printed the selected portion, but i also printed stuff above i specified stuff.

How to only print selected portion?
wmwebtr odullu seo yarismasi says:

November 2, 2007 at 2:16 pm

I would try this out for my new contents based tourism guide site where visitors would need lots of information to be printed!
resimleri says:

November 2, 2007 at 2:18 pm

My only comment other comment would be:
Why are there “#” links in the print links? This means the anchor hasn’t been hijacked according to JKeith’s ideas. Am I correct?
Mp3 Lagu Melayu says:

November 22, 2007 at 4:27 am

i try the script with pdfFactory (pdf), yes it works very well.. thanks for the script.
Musto says:

November 25, 2007 at 7:58 am

Dear Lloydi,

Thank you for this script, it is great and it does save trees :) I noticed a user mentioned that in I.E7 you don’t get the seperate print boxes which it looks like the CSS creates via a DIV. I couldn’t see whether there has been an update to this?

I’m doing an assignment for uni and I would really love for some help to get this working in I.E7, there must be something in I.E7 which doesn’t like the CSS.

Please please if anyone has sorted this issue, can you let me know ASAP

Kindest Regards

Musto
workerBee says:

November 27, 2007 at 8:35 pm

css fix for the ie link bug:

Add a style

*.print_section a {add same styles as p.printbutton a }

Tested it on 6.0 and it should be good to go on earlier v’s.

Cheers
designerkamal says:

November 28, 2007 at 5:08 am

a nice javascript function for the same purpose.
http://www.designerkamal.com/jPrintArea/
Deep says:

February 14, 2008 at 9:54 pm

Why your code is not working on an ASP page ? The external javascript file is loading properly and the style attributes too !
ispanyolca tercüme says:

March 3, 2008 at 2:25 pm

I want to print some reports which I’ll be accessing from other server using URL.
I want to print these reports without displaying it to the user and only printer selection dialogue should apperar in this case and on clicking of print it must print those reports… ispanyolca tercüman
idynn says:

April 11, 2008 at 3:53 pm

I found this script and it looks like a perfect solution for my problem. Thank you.
Andy Sharp says:

June 2, 2008 at 10:43 pm

Good stuff!
sesli sohbet says:

July 26, 2008 at 4:20 pm

Great script, work perfectly for what I needed it. But i would also like to know how to print only a small portion.
Thanks, best regards,

Blog Standard Stuff