WEB STANDARDS CREATIVITY

It is generally considered bad practice to use a link, stick an href of # in there, and then use the link for
another purpose. So why the heck am I doing it? How can I justify these actions? Well, the reason that it’s
normally a bad idea is that a link written this way fails when JavaScript is switched off. However, we’re using
JavaScript to create this technique; therefore, there’s absolutely no danger of this situation happening.
Another solution might be to dynamically write in buttons rather than a link. However, that itself presents
some issues. First of all, this may limit your styling options (you have more CSS control over a link element
than an input of type button or submit). Secondly, well, it’s not really a form is it? And if you dynamically
write in form buttons, you need to wrap a form element around it. Also, if it is a form, should you use an
input of type button or submit? No form data is being submitted for processing, after all. So, I opted for an
anchor. Somebody shoot me!
Finally, we call the Print dialog box. All the classnames have been changed—thus affecting their display—and so we’re pretty
much good to go:
window.print();
}//end of the togglePrintDisplay function
Writing the new links into the document
We’re not quite done yet, though. The togglePrintDisplay function was called from the addPrintLinks function, and that
first script wasn’t quite completed yet. There was the small matter of inserting the buttons (contained in paragraphs) into
the web page after it loaded. That’s achieved with this line:
el[i].insertBefore(newLinkPara,el[i].firstChild);
Recap: what these scripts do
And now we’re pretty much done. So to recap:
1. The page loads, and addPrintLinks runs.
2. addPrintLinks calls another function, togglePrintDisplay, where the behaviors are set.
3. When the behavior is set for each element required, addPrintLinks resumes, appending the new links into the
web page.
Here are the finished scripts in their entirety:
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
chapter 8 Print Magic: Using the DOM and CSS to Save the Planet
195