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

Printable View

07-10-2017, 11:55 AM
simonf

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....
07-10-2017, 03:24 PM
styxlawyer

This might help:

https://stackoverflow.com/questions/...art-of-webpage
07-10-2017, 05:19 PM
coothead

1 Attachment(s)

Hi there simonf,

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

coothead
07-12-2017, 07:19 AM
simonf

Hi

Thanks will check it out :o
08-20-2017, 01:14 PM
nsmsh

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.
08-20-2017, 04:59 PM
coothead

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
08-20-2017, 05:14 PM
nsmsh

Thanks a lot sir. I will try as per your guidance. Regards.