Ajax; The "Yellow Fade" Technique

Ajax; The “Yellow Fade” Technique

With the rise of Ajax applications on the internet, user interface designers suddenly found themselves wanting some kind of technique to let the user know that something had changed on a page. They needed this because users are used to pages reloading and then looking for their changes. However, since Ajax applications rarely reload pages (breaking the convention), some way to tip off the user that an element has changed was desired.

This technique was made widely popular by 37Signals’ use of it in their spiffy applications such as Basecamp. The way it works is when a user makes a change to an element on which the developer wants to cue them, the element is tagged with the function that essentially highlights it in a light yellow to call attention to it, and then slowly fades back to transparent. It’s a nice subtle effect that does the job nicely.

Of course like any effect like this, particularly an animation, care must be taken not to overuse and abuse. When every page has five yellow fading elements the effect loses its worth quite quickly.

The technique is surprisingly simple and easy to implement. So much so that this will be the shortest article I’ve written, but I think you will find the effect a worthwhile addition to your Ajax library. There’s really no way to show a screenshot of an animation, so go ahead and take a look at the html page and load it up in a browser. In the text field marked “Title of Project”, change the words in the text box and then tab out or click out of the text box, just as if you had made a change in an application.

You will see the box containing the text field change to yellow and slowly fade to white. And you thought your life lacked excitement!

$2.89
- OR -

Overview

The HTML

Setting this up is extremely easy. Our HTML looks like so:

<form name="job">
<div id="titlefield">
      <h3>Title of Project</h3><input type="text" name="title_fade" id="title_fade" value="Ajax Fun and Games" size="40" 'titlefield')" />
</div>
</form>

We’ve wrapped our text input with a div, which is the container that will show off the fade effect, so it’s a bit more dramatic. You could certainly run the fade effect on the text field itself. If you were to do it that way, you could easily then use unobtrusive JavaScript to access your inputs via the DOM, and then dynamically add the event handler to each input that had “_fade” in the ID string.

You can see the event is called with onBlur, so that when the text field loses focus, the effect is generated. The first parameter is going to be the number of steps (and colours) that are used in the fade. The second parameter is the ID of the element on which you wish to have the fade effect.

If you were to run the fade only on the input, you would change the handler to pass its own Id using the this keyword like so:

<input type="text" name="title_fade" id="title_fade" value="Ajax Fun and Games" size="40" this.id)" />

Reviews

Be the first to write a review

You must me logged in to write a review.