plz help, is there any way to print the contents of a div? [Archive]

WebJoel

04-28-2007, 06:34 PM

Here's something I used to do when I needed to print 'just an image' like driving-directions/map on sites to be "printable". I converted it a bit to make (I think??) the contents of the DIV "#printable", be sent to the printer...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */

body {min-height:100%; height:101%;
font:x-small Arial, Verdana, sans-serif;
voice-family: "\"}\"";voice-family:inherit;
font-size:small;/*for IE 5.5 */
} html>body {font-size:small; height:auto;}/* Assist IE6 & <, 100% height */
font-size: small; voice-family: "\"}\"";
voice-family: inherit; font-size: medium;} /* Assist IE rendering height, keyword-font sizes, etc. */

p {font-size: 90%; line-height:1.3em; margin:12px 0 2px 0;}
h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, serif; background-color:none;
font-style:normal; font-variant:normal; font-weight:normal; margin:14px 0 4px 10px;}
h1{font-size: 1.93em;}
h2{font-size: 1.72em;}
h3{font-size: 1.52em;}
h4{font-size: 1.42em;}
h5{font-size: 1.32em;}
h6{font-size: 1.21em;}
</style>

<style>
.non_printable {width:520px; height:80px; text-align:center; margin:25px auto; border:1px solid red;}
#printable {width:500px; height:auto; padding:15px 6px 15px 15px; margin:25px auto; border:1px solid red;}
</style>

<script type="text/javascript">
</script>
<link rel="shortcut icon" href="favicon.ico">

<script language="Javascript" type="text/javascript">
function printit() {
if (document.body.print) {
document.body.src='#printable'.print() ;
} else {
var WebBrowser = '<OBJECT ID="WebBrowser1" WIDTH=0 HEIGHT=0 CLASSID="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></OBJECT>';
document.body.insertAdjacentHTML('beforeEnd', WebBrowser);
WebBrowser1.ExecWB(6, 1);
}
}
</script>

</head>
<body>

<div class="non_printable">
<h1>This DIV will not be printed.</h1>
<p>This div will not be printed</p>
</div>

<div id="printable">
<center>
<script language="Javascript" type="text/javascript">
var NS = (navigator.appName == "Netscape");
var VERSION = parseInt(navigator.appVersion);
if (VERSION > 3) {
document.write('<form title="Click here to print this section"><input type=button value="Click Here To Print This Section" name="Print" onClick="printit()"></form>');
}
</script>
</center>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
turpis at erat.</p>
</div>

<div class="non_printable">
<h1>This DIV will not be printed.</h1>
<p>This div will not be printed</p>
</div>

</body>
</html> Essentailly, the javascript in the head and in the div "printable", there is a generated a 'click here to print this section", and everything between the RED div's, (should)print... (My printer is out of black ink and therefore, cannot test this 'on text'. This works for images...).