Monday, December 13, 2004
Printable view
Housekeeping time: I've just added a
"Printable View" link on the left. This will open a new browser window
with only the text of the posts (without buttons, left bar, main heading).
The link is available both in the main view and in the individual posts.
In case this interests anybody, here's how I did it. Warning: you need to modify your Blogger template; make sure you save a copy before doing anything else, so that you can always go back to a working template in case something does not go well (or if you don't like the result). You have been warned.
In case this interests anybody, here's how I did it. Warning: you need to modify your Blogger template; make sure you save a copy before doing anything else, so that you can always go back to a working template in case something does not go well (or if you don't like the result). You have been warned.
- I put the following
Javascript (slightly modified from this
version) in the
<head>section of my Blogger template:
<script language="JavaScript" type="text/javascript"> var divName = "printableView"; // this is the <div> to print function printSpecial() { if (document.getElementById != null) { var html = '<HTML>\n<HEAD>\n'; if (document.getElementsByTagName != null) { var headTags = document.getElementsByTagName("head"); if (headTags.length > 0) html += headTags[0].innerHTML; } html += '\n</HE' + 'AD>\n<BODY>\n'; var printReadyElem = document.getElementById(divName); if (printReadyElem != null) { html += printReadyElem.innerHTML; } else { alert("Could not find the printableView section in the HTML"); return; } html += '\n</BO' + 'DY>\n</HT' + 'ML>'; var printWin = window.open("","printSpecial"); printWin.document.open(); printWin.document.write(html); printWin.document.close(); } else { alert("Sorry, the Printable View feature is only available in modern browsers."); } } </script> - Also in the template, I marked with
<div id="printableView">and</div>the section I wanted to make available in the printable view page (have a look at the source of this very page to see what I mean in practice.) - On the left bar, I put a
link to the Javascript. The link is simply
<a href="javascript:void(printSpecial())">Printable View</a>
