Progressive Solution for Handling Browsers That Have Disabled JavaScript for Your Web Site

Anyone that uses Firefox as their default web browser and has the NoScript add-on enabled (if you don't I would highly recommend that you install it post-haste) can attest to the terrible implementations of web sites that do not gracefully (or progressively, whichever methodology your prescribe) handle our blocking of their web site. Usually you get a mess of a user interface, intertwined with garbled presentation and missing page elements. As I am a somewhat experienced netizen, it's an easy enough thing for me to enable the scriptability of the site with a simple "allow JavaScript" from the NoScript context menu.

Now consider average Joe web user that, more than likely, isn't quite as browser savvy. What is the experience when they hit your site with all your highly stylized, graphical, AJAX driven, DHTML (DOH!) based components? I'll tell you, crap.

So what can you do? Well, my solution is simple, create a global "no script" DIV layer that contains instructions for everyone visiting your site that instructs them on the requirements for your web site. My example uses the facebook-esque notification block. The important thing to realize is that this block with always appear, regardless of their browsers ability to parse your complex JavaScript. The beauty of the method, is that you allow those visitors that DO allow your site to run it's JavaScript to hide your global JavaScript notice, gracefully, without interruption to their browsing experience.

Here is the code I have as an example. Keep in mind, this hasn't been cross-browser tested nor printer optimized (hmmm, that's a good question.)

<!-- NeedScript Global Notice -->
<style type="text/css">
.ns-shown
{
 position:absolute;
 top:0;
 left:0;
 width:100%;
 border:solid 1px #FFFF00;
 background: #FFFFEC;
 text-align:center;
}
.ns-hidden
{
 display:none;
}
</style>
<div id="noscript" class="ns-shown">
 <p>This site requires JavaScript. Please try again.</p>
</div>
<script>
var $_ns = document.getElementById('noscript');
if($_ns != undefined)
{
 $_ns.className = 'ns-hidden';
}
</script>
<!-- NeedScript Global Notice -->