This is an experiment to see if it's possible to selectively print sections of a large document usings CSS print styles after the page has loaded without affecting the on-screen display.
Why might you use this? Well, the inspiration came from a page of interest rates from banking and savings products. Customers have often complained that the interest rates were split up on different sections - they wanted everything in one page. But what about those people who only want to print out the section that relates to them? One solution is to build the page using include files with separate printer-friendly pages that are linked to. This solution uses DOM scripting to dynamically apply print CSS styles depending on the link that has been clicked on - if the user clicks on 'print this section', all other sections are set to display none for print.
This technique could be use in
This has been tested and works in
The 'print this section' links are dynamically inserted for any section that is marked with the class name of section and are hidden using print CSS. No JavaScript, no see the links!
I have had to double up on the attribute setters in the script so that IE didn't get upset. It's not perfect, but it works and isn't really nasty. No, honestly, it isn't ;-)
el[i].setAttribute("className","section print");
el[i].setAttribute("class","section print");
And if you like what you see, why not digg it for me? Thanks
function addEvent(elm, evType, fn, useCapture)
{
if(elm.addEventListener)
{
elm.addEventListener(evType, fn, useCapture);
return true;
}
else if (elm.attachEvent)
{
var r = elm.attachEvent('on' + evType, fn);
return r;
}
else
{
elm['on' + evType] = fn;
}
}
function addPrintLinks()
{
var el = document.getElementsByTagName("div");
for (i=0;i<el .length;i++)
{
if (el[i].className=="section")
{
var newLink = document.createElement("A");
var newLinkText = document.createTextNode("print this section");
var newLinkPara = document.createElement("P");
newLinkPara.setAttribute("class","printbutton");
newLink.setAttribute("href","#");
var btId = "printbut_" + el[i].id;
newLink.setAttribute("id",btId);
newLink.appendChild(newLinkText);
newLink.setAttribute("href","#");
newLinkPara.appendChild(newLink);
el[i].appendChild(newLinkPara);
var newLinkEl = document.getElementById("printbut_" + el[i].id);
newLinkEl.onclick = togglePrintDisplay;
newLinkEl.onkeypress = togglePrintDisplay;
}
}
}
function togglePrintDisplay(e)
{
var whatSection = this.id.split("_");
whatSection = whatSection[1];
var el = document.getElementsByTagName("div");
for (i=0;i<el.length;i++)
{
if (el[i].className.indexOf("section")!=-1)
{
el[i].removeAttribute("className");
if (el[i].id==whatSection)
{
//show only this section for print
el[i].setAttribute("className","section print");
el[i].setAttribute("class","section print");
}
else
{
el[i].setAttribute("className","section noprint");
el[i].setAttribute("class","section noprint");
}
}
}
if (window.event)
{
window.event.returnValue = false;
window.event.cancelBubble = true;
}
else if (e)
{
e.stopPropagation();
e.preventDefault();
}
window.print();
}
addEvent(window, 'load', addPrintLinks, false);
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>How to Print Selective Sections of a Web Page
using CSS and DOM Scripting</title>
<script type="text/javascript" src="print_sections.js"></script>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<style type="text/css">
.section
{
border:1px solid gray;
background:#e1e1e1;
margin:0 0 15px 0;
padding:10px;
}
@media print
{
.noprint, .printbutton
{
display:none;
}
.print
{
display:block;
}
}
</style>
</head>
<body>
<div id="sect1" class="section">
<h2>Section 1</h2>
<p>This be section 1, it do. This be section 1. </p>
</div>
<div id="sect2" class="section">
<h2>Section 2</h2>
<p>This is section 2. This is section 2. This is section 2. </p>
</div>
<div id="sect3" class="section">
<h2>Section 3</h2>
<p>This is section 3. This is section 3. This is section 3. </p>
</div>
</body>
</html>