Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts

    Print Just A Specific <div>

    Hello-

    I believe this can be done with CSS - How can I make it so that at print only a specific <div> within the page is printed. Also if this can be accomplished, the div's overflow is set to auto will it print the information that is overflowing? Currently I have a javascript that generates a tabular report displayed in the div, when the user goes to print it out anything that is not currently visible is cut off and not printed. The actual code is extremly lengthy so here is a non working example.
    Code:
    <html>
    <head>
    <style type="text/css">
    .print
    {
    print:yes;
    }
    .noprint
    {
    print:no;
    }
    </style>
    </head>
    <body>
    <div class="noprint">A whole bunch of whatever</div>
    <div class="print">The info I want printed</div>
    </body>
    </html>
    TIA,
    Basscyst
    Helping to build a bigger box. - Adam Matthews

  • #2
    Rockstar Coder
    Join Date
    Jun 2002
    Location
    USA
    Posts
    9,074
    Thanks
    1
    Thanked 328 Times in 324 Posts
    You can have another stylesheet that has the media set to print so that when the browser goes to print it uses that and you can hide all the divs you don't want to see and configure the one you how you please.
    OracleGuy

  • #3
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    Awesome **Smacking My Head**- I get it. Sometimes I just need a little push!!!

    Thanks A Bunch,
    Basscyst
    Last edited by Basscyst; 01-23-2004 at 12:46 AM.
    Helping to build a bigger box. - Adam Matthews

  • #4
    J&J
    J&J is offline
    New Coder
    Join Date
    Sep 2003
    Location
    your temp folder
    Posts
    89
    Thanks
    0
    Thanked 0 Times in 0 Posts
    For me, I didn't want the navigation menu & page layout graphics to print, only the main body's content - so I specified which items are hidden and which can be displayed/printed, using a separate CSS specifically for printing only. Example of print.css:

    .menu, .altmenu, .footer, .layout img {display: none;}
    img, .content img, #body img, #content {display: inline;}


    Since I use external CSS, I list the regular CSS as: media="screen"
    and list the print CSS as: media="print"

    Then you can just use the print preview button on your browser to see how it looks, without wasting paper or ink.
    ~ J&J ~
    "Sometimes I feel like I'm rearranging deck chairs on the Titanic."


    Work | Family | Community


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •