WEB STANDARDS CREATIVITY

The JavaScript
When expand_collapse.js is included on the page, it sets up a page load listener, and then iterates through each of the
modules and inserts the appropriate HTML elements:
addLoadListener(initExpandCollapse);
function initExpandCollapse()
{
var modules = [document.getElementById("modules1"), document.getElementById("modules2")];
for (var i in modules)
{
var h2s = modules[i].getElementsByTagName("h2");
for (var i = 0; i < h2s.length; i++)
{
var newA = document.createElement("a");
newA.setAttribute("href", "#");
newA.setAttribute("title", "Expand/Collapse");
attachEventListener(newA, "mousedown", mousedownExpandCollapse,false);
newA.onclick = clickExpandCollapse;
var newImg = document.createElement("img");
newImg.setAttribute("src", "images/min_max.gif");
newImg.setAttribute("alt", "Expand/Collapse");
newA.appendChild(newImg);
h2s[i].appendChild(newA);
}
}
return true;
};
The page load listener is added using the addLoadListener() function from the same event_listeners.js file as the
resolution-dependent layout example and calls initExpandCollapse() when the page is ready.
initExpandCollapse() starts by creating an array of the module elements of interest, and then iterates through that array
to find all of the h2 elements. For each h2, we create a new anchor element that contains an img element (our little
expand/collapse icon), and then we apply some behavior to that anchor. By using an anchor element instead of a span or a
div, we make sure that the expand/collapse functionality is keyboard accessible. anchor elements are focusable via the keyboard
and will receive a click event when the user activates them by pressing the Enter key.
We’re capturing two events on the anchor tag: a mousedown and a click. The mousedown listener is required to counteract
the mousedown that we’ll use for dragging and dropping the content module. Essentially, we want to listen for clicks on the
anchor, but whenever someone clicks a mouse button, it’s also preceded by a mousedown. Because the anchor is inside the
h2, that will trigger the h2’s mousedown event, so we need to cancel the h2’s mousedown event when the anchor’s mousedown
event fires. This is done via mousedownExpandCollapse():
function mousedownExpandCollapse(event)
{
if (typeof event == "undefined")
{
event = window.event;
}
chapter 9 Creating Dynamic Interfaces Using JavaScript
227