View Full Version : Print a Section of the page using <div id="p1234">

07-10-2017, 11:55 AM

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/ (https://jsfiddle.net/SimonRWFish/3e462gqa/2/)

Code I'm trying to use is

function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
document.body.innerHTML = originalContents;

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/assets/css/stestyle.css

Logo would be "smlogosprite"

Any help , advice is appreciated as always....

07-10-2017, 03:24 PM
This might help:


07-10-2017, 05:19 PM
Hi there simonf,

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


07-12-2017, 07:19 AM

Thanks will check it out :o

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.

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

<!DOCTYPE html>
<html lang="en">

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

<div id="header">
<h1>This is the header</h1>
<div id="content">
<h2>This is the content</h2>
<div id="footer">
<h3>This is the footer</h3>



08-20-2017, 05:14 PM
Thanks a lot sir. I will try as per your guidance. Regards.