Monday, July 10th, 2006
Ajax Activity Indicators Examples
Category: Component, Examples
, Prototype
Ian Selby has written a thorough article on ajax activity indicators – make them globel and unobtrusive.
Ian details his solution:
So, what can we do about these problems? Well, if you’re using prototype as a part of your framework, you can register global indicator functions. These get executed when there are active requests, and when the requests complete. However, there’s another dilemma with this method too: Where do you place a indicator that can potentially appear often and keep it from being obtrusive, or, even worse, not being seen as it’s placed outside of the content that’s currently in view? I had to tackle that issue this week while starting development on a new project at work. I wanted to create an indicator that would be in the same place on every page, and that I never had to write extra code to use.
Code Example
- Ajax.Responders.register({
- onCreate: function() {
- if($('notification') && Ajax.activeRequestCount > 0)
- Effect.Appear('notification',{duration: 0.25, queue: 'end'});
- },
- onComplete: function() {
- if($('notification') && Ajax.activeRequestCount == 0)
- Effect.Fade('notification',{duration: 0.25, queue: 'end'});
- }
- });
IMHO, dedicating a portion of the screen to an actiivity indicator just doesn’t seem right. I like the idea & code, but the implemention shown here seems awkward.
great idea!
i did one web site using a custom activity indicator and then cannot use it cleanly on two other projects. this would have solved the problem and saved a lot of coding time :-)
michael,
this is the analogy to the browser status bar :-)
-nick
It’s broken on FF 1.5 and creates a frameset effect in IE 6 that doesn’t go away when the indicator leaves. Not very efficient.
This is a useful idea. Thanks for the tip.
I think the bigger issue with placing the activity indicator in a dedicated portion of the screen is that the activity location isn’t tied to the area being updated/processed, and that makes it more likely to be missed. For example, I have my monitor set at 1920×1200 and I had the browser maximized (don’t usually, but did at this time), so the activity indicator was something like 900+ pixels away from the item being clicked. Of course, that is an exterme example, but not tying the indicator location to (or near) the item(s) being updated, makes the intended benefit of the indicator pretty much disappear.
I have mine following the mouse… it could get a little ugly when using iframes (still doable, though). Another idea is to set
cursor: progressThe general idea is very cool, but relying on a portion of the screen that requires the notification element to make use of position:fixed (or any of its associated similar hacks) presents a number of x-browser issues. Fixable, admittedly, but still quite an annoyance.
Not working on Win2003… :(
So we are going to revert to tried-and-failed UI tricks ?
This is analogus to the old Netscape and IE activity indicators in the upper right corner. Never worked as intended… just annoying.
After much feedback, both on this site and mine, I feel that I failed to properly explain where this implementation would be useful. If you have a page with a single action, say a live search for example, separating the indicator from the action is poor form from a usability standpoint. However, a dashboard page with a couple widgets and some live updating data, or some other instance where a lot of ajax may be happening on a page at once would be a perfect use for what I write about. Thanks to everyone for their comments, feedback, and advice.
[…] Having read about the article on Ajaxian, I was about to say that I disagreed completely; using up screen real estate just for an activity indicator is a waste. However, I went and read the full article and the following update has been added: EDIT (7/10/2006): After much feedback, both on this site and ajaxian, I feel that I failed to properly explain where this implementation would be useful. If you have a page with a single action, say a live search for example, separating the indicator from the action is poor form from a usability standpoint. However, a dashboard page with a couple widgets and some live updating data, or some other instance where a lot of ajax may be happening on a page at once would be a perfect use for what I write about. Thanks to everyone for their comments, feedback, and advice. […]
This is the same kind of approach seen on Gmail and such and as has been mentioned has its pros/cons.
I like the idea of giving the user a coherent visual so they always know whats going on but I think it should be used in conjunction with something like the YFT to highlight to the user exactly what has changed.
Prototype Makes Javascript Painless
Prototype is an excellent tool but lacking in documentation, causing me to fumble around and *gasp* look at the source code.
The comparison to gmail which Aaron points to is a good one I think. In gmail you’ll often repeat several actions. For each you’ll see the indicator running in the top right corner. Unobtrusive, but enough to check what’s going on. For example if sending a mail takes long you will see the activity going on. In the meantime you can keep doing other stuff.
So in a case like this you wouldn’t want an activity indicator getting in the way of what you are doing after the first action. That was the whole reason for AJAX wasn’t it? Otherwise we could just as well use a normal page refresh.
Seems to be using scriptaculous and prototype. I never seen so many complaints about not working for this or that browser… could this really be a case of that many user errors or is something horribly wrong in the code???
Mario, the browser errors people are encountering are mostly user-specific, and some other the other comments are addressed in the sitepoint article that I reference in mine. It addresses the need for certain things in order to get the notification area to stick to the bottom of the window in IE. In most cases, a simple change to the css could address some issues, but could result in the notification being positioned off the screen. I would encourage everyone to read the sitepoint article to get a better explanation of the how/why some of the things are done to stick the notification area to the bottom of the screen.
Isn’t this also called a ‘throbber’ ?
[…] JSON.NETuniAjax: an ajax framework focused on browser supportAtlas June CTPRelay: Ajax File ManagerDojo Available in Ning ApplicationsTuesday Morning RoundupWeb API authentication for mashupsExplaining AJAXEcho2 Widget PanelSlightly ThickerBoxJson.NET: Library to help with .NET – JS communicationIntelliJ IDEA Google Web Toolkit SupportPrivate and Public Members in JavaScriptSafari gets a Javascript debuggerInterview with ZK Creator Tom YehGo forth and APIMODx CMS – An Ajax/PHP Content SystemOPML IconPayPerPost: Right or Wrong?Google CheckoutJavaRef: Ajaxified JavaDocSpeeding up Prototype’s $$ SelectorLondon Tube Route Finder Ajax Activity Indicators – Make them Global and Unobtrusive One of the coolest things about developing ajax-enabled applications and sites is the level of interactivity that you can bring to your users. And perhaps one of the most crucial aspects of this process is adding activity indicators to your site. While a lot of ajax requests can be very fast, it’s still important to let your users know that something is happening. All too often I see people forgetting to add these indicators, purposefully omitting them because there wasn’t a good place to include them in the design, or implementing them poorly. One of the biggest omissions that I see is with live searches and auto-completion widgets, but not without good reason. Activity indicators can break up a good layout, as they can require a fair amount of page real estate. They’re also a major pain to incorporate into your apps, as you often end up writing a lot of redundant code to display and hide different indicators on different pages or parts of a page. Having read about the article on Ajaxian, I was about to say that I disagreed completely; using up screen real estate just for an activity indicator is a waste. However, I went and read the full article and the following update has been added: EDIT (7/10/2006): After much feedback, both on this site and ajaxian, I feel that I failed to properly explain where this implementation would be useful. If you have a page with a single action, say a live search for example, separating the indicator from the action is poor form from a usability standpoint. However, a dashboard page with a couple widgets and some live updating data, or some other instance where a lot of ajax may be happening on a page at once would be a perfect use for what I write about. Thanks to everyone for their comments, feedback, and advice. This makes a lot more sense :-) July 11th, 2006 […]
I’m looking to integrate this with a website I am using for a photographer. What I want to do is is the “loading” indicator after the user clicks on the thumbnail and the larger image is being loaded.
Currently I am using the standard OnClick event to change the src of a placeholder image. I would like to figure out how to work the “change” into this example.
Thanks!
I still like the in-place notification best. This is a good pitch tho but as mentioned above you will have trouble x-browser wise. I would extend this method to target the source of action (form or whatever) and append a img element + loading text wherever necessary
Thanks!
maybe this is useful for ajax coders.
Make your own Ajax loading indicators with www. webscriptlab.com
Cool stuff! But I still prefer a plain text one. :)