Getting Attention with Interactive Effects - Color Fades for Success or Failure (
Page 2 of 5 )
One of the more popular Ajax effects is the color flash or fade (to differentiate the effect from the Adobe functionality) that signals some form of successful (or not) update. Usually these are associated with data updates, but they can be used for any activity where you want to signal to the application user to pay attention that something is happening.
A fade changes the background color of an element or group of elements, moving from a darker shade to a lighter, and typically back again. The fade can consist of variations of one color, such as flashing red to signal a deletion, or a yellow fade to create a highlight. Multiple colors can also be used, for instance, a blue to yellow fade to signal a positive outcome.
Regardless of the exact effect used, one thing all color fades require is the use of timers to create the necessary animation. Before getting into the code necessary to implement a fade, we'll do a quick refresher on timers and animation.
If you're comfortable with your understanding of timers and animations, feel free to skip the next section.
Timers and Animations
JavaScript includes a couple of different ways of controlling animations. One is to use the setTimeout method, which is invoked once and has to be reset if multiple timer events are needed. The other is setInterval, which refires in consecutive intervals until canceled. However, setTimeout is used when different parameters are being passed to the timer function with each iteration, and as such, is the one most popularly used with animations such as a color fade.
The setTimetout method takes two parameters: a function or expression as the first, and the number of milliseconds before the timer function/expression is invoked for the second. The last parameter is relatively simple, but the first has undergone a significant metamorphosis through the generations of JavaScript, from simple uses in early DHTML applications to the more esoteric uses in Ajax.
Example 4-11 demonstrates one way that setTimeout was used in earlier iterations of JavaScript applications. The timer function does a countdown starting at 10 and ending when the count is set to zero. An element, item, is accessed with each iteration, and its innerHTML property is used to rewrite the page section. In the setTimeout call, the timer function and the count argument are given in the first parameter, the time interval, before next firing in the second. Straight, simple, and uncomplicated.
Example 4-11. Straight, simple, and uncomplicated timer function
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"
xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-
8" />
<title>Old Timers</title>
<style type="text/css">
#item
{
font-size: 72px;
margin: 70px auto;
width: 100px;
}
</style>
<script type="text/javascript" src="addingajax.js">
</script>
<script type="text/javascript">
//<![CDATA[
aaManageEvent(window,"load",function() {
setTimeout('runTimer(10)',100);
});
function runTimer(count) {
if (count == 0) return;
document.getElementById('item').innerHTML=count;
count--;
setTimeout('runTimer(' + count + ')',1000);
}
//]]>
</script>
</head>
<body>
<div id="item">
10
</div>
</body>
</html>
The approach is simple, but an issue with it is that using object methods rather than discrete functions means the timer doesn't have a way of passing the objects context along with the method, as the parameter to setTimeout.
With the increased interest in Ajax, and especially through the development of libraries such as Prototype, the look of setTimeout has changed significantly--enough to make it difficult to understand exactly what's happening. The next section looks at Prototype's use of setTimeout, and then implements the same functionality separate from the library to demonstrate the Ajaxian influence on timers and timer event handlers.
/ 9 
