Forums

Need to PRINT a certain Div and ignore everythign else on the page

Permalink
My client wants the "Internet Special" on various pages to be printable with nothing else from the page printing. I could solve this by creating a PDF or JPEG that people could download, but given that he plans to change these specials and won't know how to update the downloadable document, I need to find another way. Thus... I created a ".printarea" class and have attempted to hide everything in the body by using a universal selector and setting the body to "visibility: hidden" and the specific class of the area I want printable to "visibility: visible". However, this is proving to be too broad since the printable area is a child of the Body, which is hidden.

@media print {
body * { visibility: hidden; }
.printarea { visibility: visible; }
}


I have only added the .printarea class to the following page for testing purposes (http://www.azstorage.com/self-storage-locations/tempe/tempe-az-self... ) and the area I'd like to print is under the "Internet Special" tab. I have to have the Tab open to be able to print that area and if I hit control P to print the page, it tries to print 3 blank pages with header/page link info at the top and you can see the dashed border of the Internet Special with nothing else. I think the "body *" is blocking everything.

In a perfect world, I'd like to not only print a certain area, I'd like to add a button above it that will print it. Does anyone have any suggestions?
barkingtuna
 
Steevb replied on at Permalink Reply
Steevb
I have done this for a client which also prints out their logo (not on web page). Give me while to find the css file I used and I'll get back to you.
maar replied on at Permalink Reply
maar
Hi,

I used this bootstrap code some time ago:
<!DOCTYPE html>
<head>
<!-- all your head stuff -->
</head>
<body>
<header>
<!-- all your header stuff -->
</header>
<div id="wrapper">
<!-- all your content stuff - things in here will print -->
</div>
<footer>
<!-- all your footer stuff -->
</footer>
</body>
Viewing 15 lines of 16 lines. View entire code block.


And then the css:
@media print {
   body * {
      visibility: hidden;
      margin:0; padding:0;
   }
   .printable * { 
      visibility: visible;
   }
   #wrapper {
      margin:0 !important;
      padding:20px 0 0 0 !important;
   }
   #header, #footer, .btn { display:none; }
   .col-sm-1, .col-sm-2, .col-sm-3, 
   .col-sm-4, .col-sm-5, .col-sm-6,
Viewing 15 lines of 31 lines. View entire code block.
maar replied on at Permalink Reply
maar
Sorry...
You then of course have to wrap everything you want to print with the .printable class.
Steevb replied on at Permalink Reply
Steevb
I have a form wrapped in a ‘printoff’ id, a ‘contentHolder’ class for the content, a submit button (.submit) and a print button (.printform). Then with ‘@media print’ I display some elements and hide others. The only thing that prints is the 'printoff'

@media print {
.printform, .submit {
display:none;
visibility: hidden
}
#printoff, .logo {
display: block;
visibility: visible;
width:100%;
height:100%;
border: none;
margin:0;
padding: 0;
overflow: visible
}
Viewing 15 lines of 19 lines. View entire code block.
barkingtuna replied on at Permalink Reply
barkingtuna
Thanks for the suggestions... both of you. I'll play with it today and post results.