WEB STANDARDS CREATIVITY

hide the sections from printout
el[i].setAttribute("className","print_section noprint");
el[i].setAttribute("class","print_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);
What about the CSS?
Wow, with all the talk of scripting, you might have forgotten that there’s another very important aspect to this, and that’s
the print CSS styles. The scripts change the classnames of the various elements in the document, but somewhere we need to
define the appearance of these items. The following CSS needs to be added to the document. The first part is purely cosmetic
(for the link—to make it appear “buttony”), but the important part is highlighted in bold:
.print_section p.printbutton
{
float:left;
}
.print_section p.printbutton a
{
text-decoration:none;
background:white;
display:block;
float:left;
margin:3px;
padding:10px;
border:1px solid red;
}
@media print
{
.noprint, .printbutton
{
display:none;
}
.print
{
display:block;
}
}
chapter 8 Print Magic: Using the DOM and CSS to Save the Planet
197