Results 1 to 7 of 7

Thread: Print a Section of the page using <div id="p1234">

  1. #1
    Join Date
    Sep 2004
    Location
    Little Falls, Roodepoort, South Africa
    Posts
    411
    Thanks
    4
    Thanked 1 Time in 1 Post

    Exclamation Print a Section of the page using <div id="p1234">

    Hi

    Can someone help me with my code, I'm tryig to print sections of a website on user request, i.e the website http://www.silvertreeestates.co.za/ has many property listings, and I want to put a print button at the bottom of each listing to allow the user to be able to print that section only.

    I did create a jsfiddle https://jsfiddle.net/SimonRWFish/3e462gqa/5/

    Code I'm trying to use is
    Code:
    <script>
    function printDiv(divName) {
          var printContents = document.getElementById(divName).innerHTML;    
       var originalContents = document.body.innerHTML;      
       document.body.innerHTML = printContents;     
       window.print();     
       document.body.innerHTML = originalContents;
       }
    </script>
    I also want to bring my style sheet though into the popup window and a logo is possible

    Style sheet is http://www.silvertreeestates.co.za/a...s/stestyle.css

    Logo would be "smlogosprite"

    Any help , advice is appreciated as always....
    Last edited by simonf; 07-10-2017 at 12:19 PM.
    Very Best Rgds, Simonf :cool:
    __________________________________
    My Site | E-Mail Me

  2. #2
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    432
    Thanks
    0
    Thanked 54 Times in 50 Posts

  3. #3
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,094
    Thanks
    1
    Thanked 205 Times in 201 Posts

    Default

    Hi there simonf,

    check out the attachment, which contains a fully working example.

    coothead
    Attached Files Attached Files
    ~ the original bald headed old fart ~

  4. #4
    Join Date
    Sep 2004
    Location
    Little Falls, Roodepoort, South Africa
    Posts
    411
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

    Hi

    Thanks will check it out
    Very Best Rgds, Simonf :cool:
    __________________________________
    My Site | E-Mail Me

  5. #5
    Join Date
    Aug 2017
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Dear Sir,

    I am using Ironspeed v 9.11 and for printing using the method JavaScript.window.print . it is printing but I want the printing without the page header and footer as the resultant printing is a small billing only. could you give me an idea with example code as I am very beginner. please.

  6. #6
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,094
    Thanks
    1
    Thanked 205 Times in 201 Posts

    Default

    Hi there nsmsh,

    and a warm welcome to these forums.

    You really should have started a new thread for your problem.

    Removing sections of a document for printing is done with CSS.

    Here is a basic example...

    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>untitled document</title>
    
    <link rel="stylesheet" href="screen.css" media="screen, print">
    
    <style media="screen, print">
    body {
        background-color: #f0f0f0;
        font: 1em/150% verdana, arial, helvetica, sans-serif;
     }
    
    #header, #content, #footer  {
        padding: 2em;
        border: 0.062em solid #999;
        background-color: #ccc;
        text-align: center;
     }
    
    #content {
        margin: 0.5em 0;
        background-color: #fff;
     }
    
    @media print {
    #header, #footer  {
        display: none;
      }
     }
    </style>
    
    </head>
    <body> 
     <div id="header">
      <h1>This is the header</h1>
     </div>
     <div id="content">
      <h2>This is the content</h2>
     </div>
     <div id="footer">
      <h3>This is the footer</h3>
     </div>
    
    </body>
    </html>

    coothead
    Last edited by coothead; 08-20-2017 at 05:04 PM.
    ~ the original bald headed old fart ~

  7. #7
    Join Date
    Aug 2017
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    Thanks a lot sir. I will try as per your guidance. Regards.
    Last edited by jscheuer1; 08-20-2017 at 07:07 PM. Reason: excessive quoting

Similar Threads

  1. Replies: 8
    Last Post: 12-08-2016, 11:55 PM
  2. Image Thumbnail Viewer- Adding a "Print Page" option.
    By Bill in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 06-24-2009, 01:54 AM
  3. "print this page" ?
    By soscopyrights in forum PHP
    Replies: 7
    Last Post: 02-02-2007, 05:08 AM
  4. Script for "email a friend" and "print page"
    By pernes in forum JavaScript
    Replies: 0
    Last Post: 11-30-2005, 08:31 PM

Tags for this Thread

Bookmarks

Posting Permissions

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