WEB STANDARDS CREATIVITY

74
Inspired by a venerable JavaScript-based style sheet switcher (www.alistapart.com/stories/alternate), the New York
Magazine’s text-sizing code performs a number of different tasks. When a user clicks one of these links, an additional class
is appended to the body element that, when present, will change the size of the text in the article template accordingly.
Additionally, a cookie stored on the user’s browser remembers the user’s selection and automatically applies the appropriate
text size upon his or her return. It’s a rather convoluted piece of JavaScript, but that might be because we’re not exactly
the Samuel L. Jackson of JavaScript programmers.
It’s important to note that the links you see in Figure 3-20 don’t actually exist in the HTML. JavaScript injects the three “A”
links into the page once the page loads, ensuring that the controls are available only to users whose browsers can support
them. And showing a near-compulsive obsession with the body element’s class, we can use that attribute to trigger our
function, which will allow our content producers to drop a simple word into class to invoke the function, and thereby drop
the links into the page.
As always, let’s start with our body element—I know, shocking. But this time, let’s use text-sizer as our new class:
Inside the scripts.js file we referenced from the head of our document is a function called buildTextSizer:
There’s a fair amount of code to this function, so don’t worry if you’re not exactly a JavaScript ninja (after all, I’m certainly
not). Thankfully, the part we’re most concerned with occurs right at the top:
function buildTextSizer() {
if (document.getElementsByTagName && document.createElement ➥
&& document.getElementById) {
var trigger = document.getElementsByTagName("body")[0];
if (findWord("text-sizer", trigger.className)) {
if (document.getElementById("article-content")) {
var container = document.getElementById("article-content");
} else {
var container = document.getElementById("content-primary");
}
if (container) {
// Build elements
var slugs = new Array("small", "medium", "large");
var controlContainer = document.createElement("div");
var topList = document.createElement("ul");
var innerList = document.createElement("ul");
var listItem = document.createElement("li");
var span = document.createElement("span");
var labelText = document.createTextNode("Text Size:")
// Loop over the text size "slugs", and build a link for
//each one
for (var i = 0; i < slugs.length; i++) {
var text = document.createTextNode("A");
var anchor = document.createElement("a");
var item = document.createElement("li");
anchor.appendChild(text);