With AJAX becoming more and more prevalent, we, as developers, sometimes forget that the average user might not realize parts of the page have changed after an AJAX event has fired. This becomes especially problematic when the changes are occurring outside of the current viewport (which is highly likely if you have a large percentage of visitors using an 800×600 or even a 1024×768 screen resolution).
By adding a few simple lines of javascript to your AJAX event handler, you can make your visitors aware each time the AJAX event changes the content of the page.
For the purposes of this tutorial, I am utilizing MooTools and the MooTools More extensions (I’m not 100% certain which extensions are actually used by the code, as I have the entire set compiled together for use throughout my site).
Following is some example code you can use to alert your users that the page has changed. Again, this should go immediately after the code that inserts the new content into your page:
var al = document.createElement('div');
al.id = 'search-loaded';
al.appendChild(document.createTextNode('The content of this page has been updated based on your selections.'));
document.getElementsByTagName('body').item(0).appendChild(al);
var myFx = new Fx.Tween(al);
al.onmouseover = function() { myFx.pause();myFx.set('opacity',1); };
al.onmouseout = function() { myFx.start(0); };
myFx.start('top','0').chain(function(){myFx = new Fx.Tween(al,{duration:4000,property:'opacity'});myFx.start.pass([1,0],myFx).delay(2500);});
The code above will create a new div with the ID of “search-loaded” (which should be styled in your CSS). I would recommend using at least the following CSS to style “search-loaded,” otherwise the javascript above might not act quite the way you’d expect.
position: fixed; top: -56px; height: 56px; left: 0; width: 100%;
The “top” property should be equal to zero minus the height of the element (so that the element sits just above the top of the viewport, out of sight when it first loads). I have highlighted that code in red above so that you can see what needs to be changed.
Once the javascript and styling are set, whenever AJAX changes load on the page, the new div will slide in from the top of the page, then fade slowly out. I would also recommend using some AJAX to remove the “search-loaded” div from the DOM whenever another new AJAX event fires, so that it can be successfully recreated once the changes load again (you could also potentially use different text in the new div depending on what type of event has fired).