WEB STANDARDS CREATIVITY

250
Switching between CSS states with JavaScript
In the days when JavaScript was vilified for the way it was used on the Web, in-line scripting, event handlers, and modification
of style properties were simply how things were done. These ad hoc changes usually had something to do with modifying and
defining absolutely everything on the fly—height, width, background color, and various other style properties.
We have progressed significantly from those dark days and work hard to separate our HTML from our
CSS and our JavaScript. Modern techniques strive to ensure that our pages work with JavaScript both on
and off. This is referred to as “unobtrusive scripting” and is the standard you’ll find elsewhere in this book,
as well as in other modern scripting books, such as Jeremy Keith’s book DOM Scripting (friends of ED,
ISBN: 1-59059-533-5).
In our current crop of web browsers, we have a much more predictable environment in which to work. This predictability
provides us with the ability to change properties beyond height and width, and get creative with things like switching
between predefined states that include CSS positioning. With all the changes to CSS that are needed stored in a series of CSS
rules, we can simply use some JavaScript to change the class of the appropriate containing element as required.
For the purposes of our sliding navigation we have two core states:
On initial page load, our navigational panes appear at the bottom of the page (see Figure 10-3).
When a navigational item is activated (either with the keyboard or the mouse), the navigational pane moves to the
top of the page (see Figure 10-4).
We use JavaScript to change the class of the navigational pane to be “exposed,” which gives it the proper positioning at the
top of the page just below the navigation. We create a style rule that positions any of the panes in the correct place (from
the style sheet, wscslide.css):
/* apply to any div with class="exposed"
that is in the */
div#drops div.exposed {
position: absolute;
top: 0;
left: 0;
padding: 0; /* added to remove doubled-up padding when positioned */
}
Note that this works because we are positioning these panes within the nearest relatively positioned parent,
div#inner-wrap:
div#inner-wrap {
background-color: #ccc;
color: #000;
position: relative;
margin: 0;
padding: 0.5em 0;
}
We also use JavaScript to remove the class exposed to return the pane to the bottom of the page.