Getting Attention with Interactive Effects - Creating a Flashing Notice (
Page 4 of 5 )
I'm not sure why yellow became the color of choice for the Ajax fade technique. Come to think of it, I'm not sure why it's called a fade, other than because the color fades once flashed. The yellow fade was first pioneered at the 37signals site (at http://www.37signals.com/svn/archives/000558.php), and perhaps the color and the name were kept out of habit.
Yellow is a good choice, though, because yellow/blue color blindness is rare compared to red/green, which impacts up to eight percent of men (exact percentages are not known). Even with total color blindness, though, a fade is noticeable as a flash changing saturation rather than color.
The fade technique uses a timer and loops through a set of color variations, from bright to light shades of the same hue, changing the background color of an element with each iteration. There are now many variations, including ones that fade from one color to another rather than remaining limited to the yellow.
A fade technique is most likely not the most complex Ajax application you'll create, but it isn't trivial to implement unless you use a fixed array of color values. For a more generic fade, for each iteration of color shade, the application accesses the background color, parses out the two-character string for the hexadecimal value for the reds, the blues, and the greens, converts it to a numeric value, adjusts it for the next step, and then converts back to a string. Given beginning and ending values, the application has to calculate the change in each of the color tones between each step, maintain these values separately, and use them to adjust the value.
There is no real method to make a fade unobtrusive or accessible because it is a visual cue. However, a fade is more of a nicety than a necessity--other page effects should denote that some action has happened.
Unfortunately, these secondary clues also don't tend to show up in screen readers. Chapter 7 covers some ways of working with screen readers for visual and dynamic effects.
Were going to combine examples from earlier in this chapter for our last application. The page has a comment form, with a textarea for a comment and two buttons, one for previewing and one for saving. If scripting is enabled, when the comment form is saved, rather than sending the contents through using the traditional post, an Ajax method is called to save the effects.
For this example, the called program doesn't do anything with the data except echo the comment if scripting is enabled and the Save button is clicked. If scripting is disabled or if the Preview button is clicked, the application prints the comment to the browser:
?php
$comment = $_POST['comment'];
$submit = $_POST['submitbutton'];
if (empty($submit)) {
echo $comment;
} else {
echo $submit . ':' . $comment;
}
?>
This example is simplified, but in your systems, you'll want to escape the content to ensure it's safe before updating your databases. Otherwise, you risk SQL injection errors.
The stylesheet isn't too complicated, but it does add some design and color to spice things up a bit:
#list
{
border: 1px solid #ccc;
margin: 20px;
padding: 10px;
width: 600px;
}
.comment
{
margin: 10px 0;
width: 400px;
}
form, #preview
{
border: 1px solid #cc0;
margin: 20px;
padding: 10px;
width: 600px;
}
It's amazing how small a web page is when you split out the stylesheet and JavaScript:
<!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>Timers, Ajax, and Fade, oh my</title>
<link rel="stylesheet" href="events.css" type="text/css"
media="screen" />
<script type="text/javascript" src="addingajax.js">
</script>
<script type="text/javascript" src="comments.js">
</script>
</head>
<body>
<div id="list">
<h1>Current Comments:</h1>
</div>
<form action="addcomment.php" id="commentform" method="post">
<fieldset>
<legend>Comments</legend>
<label for="comment">Comment:</label>
<textarea id="comment" name="comment" cols="65"
rows="10"></textarea>
<br /><br />
<input type="submit" id="previewbutton" value="Preview"
name="submitbutton" />
<input type="submit" id="save" value="Save"
name="submitbutton" />
</fieldset>
</form>
<div id="preview">
</div>
</body>
</html>
/ 9 
