Home arrow JavaScript arrow Page 4 - Getting Attention with Interactive Effects

Creating a Flashing Notice - JavaScript

If you're looking for a quick way to delight your visitors with the addition of Ajax to your site, look no further. This article, the fourth of a four-part series, will show you how to do color fades, timers, and more. It is excerpted from chapter four of Adding Ajax, written by Shelley Powers (O'Reilly, 2007; ISBN: 0596529368). Copyright 2007 O'Reilly Media, Inc. All rights reserved. Used with permission from the publisher. Available from booksellers or direct from O'Reilly Media.

TABLE OF CONTENTS:
  1. Getting Attention with Interactive Effects
  2. Color Fades for Success or Failure
  3. Ajaxian Timers
  4. Creating a Flashing Notice
  5. Creating a Flashing Notice concluded
By: O'Reilly Media
Rating: starstarstarstarstar / 9
October 11, 2007

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

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>



 
 
>>> More JavaScript Articles          >>> More By O'Reilly Media
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

JAVASCRIPT ARTICLES

- Javascript for Beginners: An Introduction
- Introduction to JavaScript
- Adding Elements to a Tree with TreeView jQue...
- Using the Persist Argument in a TreeView jQu...
- Using Unique and Toggle in a TreeView jQuery...
- Using Event Delegation for Mouseover Events ...
- Using the Animate Option in a Treeview jQuer...
- Using HTML Lists with Event Delegation in Ja...
- Opened and Closed Branches on a TreeView jQu...
- Mouseover Events and Event Delegation in Jav...
- Creating a TreeView JQuery Hierarchical Navi...
- Event Delegation in JavaScript
- A Look at the New YUI Carousel Control
- Working with Draggable Elements and Transpar...
- Displaying Pinned Handles with Resizable Con...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: