Log in

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

Code I'm trying to use is

<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/assets/css/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/12997123/print-specific-part-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 :o
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...



<!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
nsmsh
08-20-2017, 05:14 PM
Thanks a lot sir. I will try as per your guidance. Regards.