Tuesday, November 21, 2006

AJAX and noscript

One of the evil of AJAX sites is that if the user has javascript turned off, the site stops functioning all together. Since I use NoScript extension all the time on Firefox, I really hate sites which don't even tell you that javascript needs to be turned on for the site's functionality to work and when it takes just a <noscript> tag to display a message to the user about js bit:
<noscript>
<div>This site requires javascript to be turned on...blah blah blah.</div>
</noscript>

You can get a bit more enterprising with the noscript tag, for instance what if you don't want the user to even access the page w.o. javascript turned on? Well, in that case you can put noscript tag in the head section and do a meta refresh:
<head>
...
<noscript>
<meta equiv="Refresh" content="0; URL=nojs.html"></noscript>
...
</head>


Ok, what if you don't want to redirect the user but hide all the elements on the page except the no js error message? You can achieve that too by using CSS:
Step 1) Add this div within the body where you want the error message to show up in case the js is turned off:
<div class="ns">
Ouch! No JS
</div>
Step 2) Hide the "ns" div by default:
.ns{display:none;}
Step 3) Hide all the elements on the page and display ns div if js is turned off:
<noscript>
<style type="text/css">
* {visibility:hidden;}
.ns {visibility:visible;margin:0px auto;width:60%;display:block}
</style>
</noscript>