WEB STANDARDS CREATIVITY

252
Adding sliding behaviors
Now that we have used scripting to toggle between the exposed and the normal position for each of the navigation panes,
we can add in scripting that slides the navigation out from “under” the main navigation. We accomplish this by changing the
height of the pane to 0 when the exposed state is activated and writing a function that reveals the navigational pane by
changing its height.
As an alternative, when we activate the exposed state, we could put an appropriate padding-top on the
content div to allow the navigational pane to sit on top of the content. Using a negative value for the CSS
top property, we could hide the navigational pane under the navigation at the top and use JavaScript to slide
the div#inner-wrap down the appropriate distance. However, during early testing of this solution, some
testers reported a “choppy” sliding behavior. This was, in part, due to sliding a div that essentially contained
all the content on the page. As the size of the page grew, the sliding just wasn’t smooth.
Both this solution and the one used in the example require additional scripting, but neither have significant
impact on accessibility from a technical perspective. (Although there may or may not be issues with sliding
navigation in general, for people with cognitive disabilities, for example.)
The finished script includes several additional features that make it work well:
Simple error-checking to prevent the user from clicking twice on a tab. Once a navigational pane is “moving,” the
function simply returns rather than calling it again.
A basic reset function that can be used to reset the tabs to their original state.
A constant SLIDEINTERVAL, which lets us define the speed at which the Reveal function will be called repeatedly. In
this case, we call it every 65 milliseconds.
We could take an extensive tour through this script, looking at the changes that we’ve made in a step-by-step manner. For
example, we could look in detail at the animation strategy. However, I want to focus specifically on the accessibility side of
things in detail and leave most of the core script to speak for itself. You’ll find comments throughout the script to detail
what is happening. Here is the listing for the final core script, wscslide.js:
var slideready = false;
var SLIDEINTERVAL = 65;
var revealTimer = null;
var moving = false;
window.onload = function() {
slideready = true;
}
function toggle(element) {
if (!slideready || moving) return false;
reset(element);
if (!document.getElementById) return true;
var elt = document.getElementById(element);
var initialheight= elt.offsetHeight;
Reveal(element, initialheight);
//return false;
}