Print a <div></div> only

Bob Schneider
Bob Schneider used Ask the Experts™
on
Is it possible to print just a div?  If you look at this page and click on a person's name, I am wondering if it is possible to print only the individual information box that appears.

Thanks in advance!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
View Solutions Only
Michel PlungjanIT Expert
Top Expert 2009
Commented:
You have a few possibilities

1. open a new window and document.write the div content to it with an onload=window.print() script
2. hide everything else on print using a style 
@media print {
  .bluebox {
    height: 100%;
    width: 100%;
    position: fixed;
    background-color: white;
  }
}

Open in new window

Bob SchneiderCo-Owner

Author

Commented:
I am looking for a way to allow the end user to print the div with their info in it from my website.  Is that an option?
HainKurtSr. System Analyst
Commented:
add this to css

@media print
{    
    .no-print, .no-print *
    {
        display: none !important;
    }
}

Open in new window


then apply it to elements (class="no-print") that you don't want to print...
Sr. System Analyst
Commented:
here is an article that explains how to implement the solution above

http://www.willmaster.com/library/features/a_printer-friendly_web_page_with_non-printing_elements.php
Bob SchneiderCo-Owner

Author

Commented:
Thank you very much.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial