Introduction
create printer-friendly pages,Writing the content directly into the popup windows.
Using this script the pop up window can be created which holds the data that has to be printed.
It generates a new page using only content defined between div elements.
<div class="style3" id="print_content"> </div>
Everything else is ignored.
The new page is called with following scripts
<a href="javascript:PrintThisPage()">Cick here to print</a>
With JavaScript we can specify properties of the window such as width, height, presence or absence of scrollbars, location bar, stauts bar etc.
Properties like
<P>toolbar=0|1 Specifies whether to display the toolbar in the new window.
<P>location=0|1 Specifies whether to display the address line in the new window.
<P>directories=0|1 Specifies whether to display the Netscape directory buttons.
<P>status=0|1 Specifies whether to display the browser status bar.
<P>menubar=0|1 Specifies whether to display the browser menu bar.
<P>scrollbars=0|1 Specifies whether the new window should have scrollbars.
<P>resizable=0|1 Specifies whether the new window is resizable.
<P>width=pixels Specifies the width of the new window.
<P>height=pixels Specifies the height of the new window.
<P>top=pixels Specifies the Y coordinate of the top left corner of the new window. (Not supported in version 3 browsers.)
<P>left=pixels Specifies the X coordinate of the top left corner of the new window. (Not supported in version 3 browsers.) </P>
</P>
<P><CODE>var disp_setting="toolbar=yes,location=no,directories=yes,menubar=yes,";<BR>
disp_setting+="scrollbars=yes,width=650, height=600, left=100, top=25"; <BR>
Using innerhtml property to READ the content between the DIV and /DIV tags.
var content_vlue = document.getElementById("print_content").innerHTML;
The window.open() method opens a new browser window
we must create a new window and store a reference to it in a variable
var docprint=window.open("","",disp_setting); <BR>
every window contains a document. We use docprint.document.write method to write the content to newwindow.
onLoad attribute inside BODY element executes (javascript onLoad="self.print() )
function and disply the print screen.
docprint.document.write('</head><body onLoad="self.print()"><center>');
docprint.document.close(); <BR><BR>at the end is something different than a window.close(), it kind of means that the document inside the popup is closed for writing.we must close the document ourselves. If we didn't close the document, the computer would still be waiting for more HTML, and indeed would parse the next input as HTML, which would generally produce an error.
<CODE><BR>docprint.focus();
It means the focus is on the new pop up window .
Complete Source Code:
======================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<A href="http:
<html xmlns="<A href="http:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Clinet side printer version</title>
<style type="text/css">
<!--
.style1 {color: #0033FF}
.style3 {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
-->
</style>
</head>
<script language="javascript">
function Clickheretoprint()
{
var disp_setting="toolbar=yes,location=no,directories=yes,menubar=yes,";
disp_setting+="scrollbars=yes,width=650, height=600, left=100, top=25";
var content_vlue = document.getElementById("print_content").innerHTML;
var docprint=window.open("","",disp_setting);
docprint.document.open();
docprint.document.write('<html><head><title>Inel Power System</title>');
docprint.document.write('</head><body onLoad="self.print()"><center>');
docprint.document.write(content_vlue);
docprint.document.write('</center></body></html>');
docprint.document.close();
docprint.focus();
}
</script>
<body bgcolor="#CCCCCC">
<table width="80%" border="0" align="center" cellpadding="4" cellspacing="4" bgcolor="#FFFFFF">
<tr>
<td colspan="2" bgcolor="#CCCCFF"><h2 align="center" class="style1">Site Header Name </h2></td>
</tr>
<tr>
<td width="16%" valign="top" bgcolor="#CCCCFF"> <table width="62%" border="0" align="center" cellpadding="0"
cellspacing="0">
<tr>
<td><a href="#">Link1</a></td>
</tr>
<tr>
<td><a href="#">Link2</a></td>
</tr>
<tr>
<td><a href="#">Link3</a></td>
</tr>
</table></td>
<td width="84%">
<div align="right"><a href="javascript:Clickheretoprint()"> Click here to print</a> </div>
<div class="style3" id="print_content">Content for id "print_content" Goes Here
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Print content Print content Print content Print content Print content Print content Print content Print content
Print content Print content Print content Print content Print content Print content Print content Print content Print content
Print content Print content Print content Print content Print content Print content Print content Print content Print content
Print content Print content Print content Print content Print content Print content Print content Print content Print content
Print content Print content Print content Print content Print content Print content Print content Print content Print content
Print content Print content Print content Print<br />
<br />
content Print content Print content Print content Print content Print content Print content Print content Print
content Print content Print content Print content Print content Print content Print content Print content Print content Print
content Print content Print content Print content Print content Print content Print content Print content Print content Print
content Print content Print content Print content Print content Print content Print content Print content Print content Print
content Print content Print content Print content Print content Print content Print content Print content Print content Print
content Print content Print content Print content Print content Print content Print content Print content Print content Print
content Print content Print content Print content Print content Print content Print content Print content Print content Print
content Print content Print content Print content Print content Print content Print content Print content </td>
</tr>
</table>
</div></td>
</tr>
<tr>
<td colspan="2" bgcolor="#CCCCFF"><span class="style3">footer</span></td>
</tr>
</table>
</body>
</html>
