352 Part II: Developing an Ajax Library^
A complete example demonstrating simple <div> based dialogs can be found at
http://ajaxref.com/ch8/dialogs.html and is previewed here.We’ll revisit the special use of <div> tags to present content later in the chapter when
we implement tooltips or load images or snippets of content without full page reload.Communicating Change
While a traditional Web application may not always be the speediest, it is highly unlikely
that users would not notice a state change with full page refreshes. Given that the whole
screen doesn’t repaint, an Ajax application lacks the “big slap” that lets the user know that
new information is available or another step in a process is required. If a change within a
page is too subtle, the user simply may not notice any new or removed data; thus Ajax
developers are encouraged to provide update indications visually often with a color or style
change or even a simple animation.
If you consider the types of activities that may happen, it becomes a bit easier to
categorize the type of change indicator that could be employed. In general, data or a task is
made available, removed, or modified. For example, when content is added to a page, we
may want to fade it in. The fade-in animation will hopefully draw the user’s attention. If the
content was removed from the page, it might be desirable to reverse the idea and fade it out.
To create a fade, CSS is used to set the opacity of the content to fade. Depending on whether
the effect is fading in or out, the opacity would increase or decrease using a timer until the
object is fully showing or removed. The code fragment here, with two calls to demonstrate
its use, provides the basics of how a simple fade transition can be created.function changeOpacity(obj, opacity, decrease)
{
obj.style.opacity = (opacity / 100);
obj.style.filter = "alpha(opacity:" + opacity + ")";
if (decrease)
opacity--;
else
opacity++;