Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Marking Changed Content
Perhaps your AJAX application loads large chunks of content based solely on user requests and places that content into obvious places. For example, after viewing the first answer, it’s clear that the Frequently Asked Questions application will put the next answers in the same place. In such cases, you may not need to worry about user confusion. But suppose your application performs small modifications to the web page, or modifies the page based on some background event? For example, in a chat or online forum application, the new entries might appear without user interaction. At such times, it’s very encouraging to the user if you subtly mark the changed content.
The indication might be as simple as a border around the last element that has been changed, or a slightly different background of the same element. You might also experiment with fading background that slowly changes back to the page background, or with more intrusive techniques (for example, a flash to indicate a really important change).
Implementing a fading background can be a complex task because you have to handle color values calculations as well as simple animation techniques. (The background has to be changed in small, nearly invisible steps.) Fortunately, the X library provides exactly what we need with the xAnimation.rgb routine (which is part of a larger animation framework). Our JavaScript code for fading is thus extremely simple: Once the target element has been changed, an animation engine object is attached to it (unless it already exists), and the color animation is started:
// start with white background target.style.backgroundColor = "#FFFFFF"; // create the animation engine if needed if (!e.xa) e.xa = new xAnimation(); // change the background-color to the target // value and back in a second e.xa.rgb(e,"background-color","#EDC226",1000,1,1);
You can view the results in the Frequently Asked Question application: Whenever an answer is loaded and displayed, its background slowly changes to yellow and back to white.