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

**simonf** · 07-10-2017, 11:55 AM

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....

**styxlawyer** · 07-10-2017, 03:24 PM

This might help:

https://stackoverflow.com/questions/...art-of-webpage

**coothead** · 07-10-2017, 05:19 PM

Hi there simonf,

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

coothead

**simonf** · 07-12-2017, 07:19 AM

Hi

Thanks will check it out

**nsmsh** · 08-20-2017, 01:14 PM

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.

**coothead** · 08-20-2017, 04:59 PM

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