<html>
<head>
<link rel="stylesheet" type="text/css" href="./docs.css">
<script type="text/javascript" language="JavaScript">
<!-- Begin
function PrinterFriendlyPage()
{
var HTML;
eval("HTML = document.getElementById('contentstart').innerHTML");
if ( ! HTML || ! window.print ) {
alert('Your Browser does not support printing.');
}
else {
var pfw=window.open("","","toolbar=no,location=no,directories=
+no,menubar=yes,scrollbars=yes,width=750,height=600,left=100,top=25");
pfw.document.open();
pfw.document.write('<p>\n');
pfw.document.write('<'+'script>function PrintPage () { window.
+print() }<'+'/script>\n');
pfw.document.write('<p><a href="javascript:PrintPage()">Print
+This Page</a>\n</p>');
pfw.document.write(HTML);
pfw.document.write('<p>');
pfw.document.close();
pfw.focus();
}
}
// End -->
</script>
</head>
<body>
<h1>This is where the site template HTML goes</h1>
<p><a href="javascript:PrinterFriendlyPage()">Printer Friendly Version
+</a>
<div id="contentstart">
<p>Anything between these div tags will show in printer friendly windo
+w.
</div>
<h1>More site template HTML goes here</h1>
</body>
</html>
Just save this as HTML and open it in a browser. Anything between the contentstart div tags will get extracted by the js into the pf window which the script pops up, complete with click here to print link. You can also document.write a (new) style sheet link in as desired.
Note in practice I call the PrinterFriendlyPage() function PrinterFriendlyPageNNNN where NNNN is different for every page. The reason is that the history object will remember that the link to PrinterFriendlyPage() has been visited so these links will all change to visited as soon as a user prints a single page. Same for the PrintPage() function that gets written in the JS. Anyway that is one way to do it neatly and rather simply.
|