I got this question from Kelly who was putting together a website using a a funky Javascript menu and ran into an accessibility issue if the user’s browser doesn’t run Javascript (or if the user opts to run NoScript or some other blocking plugin)

The answer is really quite simple. Even piece of Javascript on a web page has the option of being following by a NOSCRIPT section that is executed by the browser if Javascript is not enabled. Here’s an example of how it works:


<script type="text/javascript">
document.write("Hello World! This was written using Javascript")
</script>
<noscript>Hello World! Your browser does not support JavaScript!</noscript>


So, the browser will actually execute one of the 2 sections, if you have Javascript enabled, it will perform the <script> section, otherwise it will execute the <noscript> section. But you get some sort of “Hello World” message regardless of whether you are using Javascript or not.

Hope this helps!

This was actually a question I had while working on WPAuctions, a plugin that lets you auctions stuff right off your WordPress blog. I had a couple of AJAX calls that populate the lightbox with auction and bid data, and I wanted to add some sort of indication to the user that something was happening in the background.

Finding the answer on the Web was a bit hairy, but the mechanism is really straight-forward. And I do have JarosÅ‚aw DobrzaÅ„ski to thank for the solution. It’s a 2-step solution that is so simple to implement, it’s almost painful. Here’s what you do:

1. Add this code to the header of your website (not forgetting to include prototype.js of course):
Ajax.Responders.register({
onCreate: function(){ Element.show('spinner')},
onComplete: function(){Element.hide('spinner')}
});

2. Add this tag where you would like the spinner image to appear:
<img alt="spinner" id="spinner" src="gfx/spinner.gif" style="display:none;" />

And you’re done! The code in the header registers a responder with the AJAX library that shows and hides the spinner image when an AJAX call is created and completed respectively. You can use the following indicators if you wish:

Spinner 1 :
Spinner 2 :

The spinners above are pretty generic, so you can use them whether you’re creating a site about web hosting, Chevy Tahoe accessories, shopping or a search directory.

Alternatively you can create your a custom spinner here.