WEB STANDARDS CREATIVITY

192
// create a container for the link to
// go in and give it a class
var newLinkPara = document.createElement("p");
newLinkPara.setAttribute("class","printbutton");
// set up the 'print this section' link
newLink.setAttribute("href","#");
// the print button will need a unique ID
// (this will be used to tell the function
// what section is to be shown or hidden )
var btId = "printbut_" + el[i].id;
newLink.setAttribute("id",btId);
// add the text for the link to the anchor element
newLink.appendChild(newLinkText);
// add the anchor element to the paragraph element
newLinkPara.appendChild(newLink);
//add the behaviors for the new link
newLink.onclick = togglePrintDisplay;
newLink.onkeypress = togglePrintDisplay;
}
}
}
At this point, we’ve created the link that will be used to do the printout. It’s been placed in a paragraph, but that paragraph
has not yet been inserted into the document. It’s currently in limbo—floating around in the browser’s memory somewhere—but
we’ll be getting to that in just a moment. Carrying on with the pseudo-to-real code translations then:
“The behavior [of the link] when clicked is to first check the id of the link that was clicked. If the id matches the current section
(as the browser trawls through all the printable sections in the document), make that section visible (in the printed
view). If the id of the link clicked does not match up (as the browser trawls through all the printable sections in the document),
it hides the current section (again, only for print).
Bring up the Print dialog box in the browser:”
The behavior for the link was attached using these lines of script:
newLink.onclick = togglePrintDisplay;
newLink.onkeypress = togglePrintDisplay;
This means that when the link is clicked or when the link has focus and a keypress event is detected, the browser should run
a new function called togglePrintDisplay.
Adding the behavior
Let’s take a look at what’s in the togglePrintDisplay function. I’ll show it all in one go first, and then I’ll step through the
constituent parts to explain what’s happening:
function togglePrintDisplay(e)
{
var whatSection = this.id.split("_");
whatSection = whatSection[1];
var el = document.getElementsByTagName("div");