Web Tips: Javascript Detection -- Sperling Corporation

[web-tips > javascript detection]

How to detect Javascript

One of the common problems many web site have is providing javascript routines to users without considering what happens when the user has javascript turned off in their browser. The solution to this problem is commonly described as "Progressive Enhancement".

The following is a simple technique for developers to use. If the user has javascript turned off, then you simply provide the html necessary to convey whatever information you want. In the event that javascript is turned on, then you can provide the javascript enhancement.

>>> JAVASCRIPT is OFF <<<

>>> JAVASCRIPT is ON <<<

To see differences, please change the status of javascript in your browser and refresh the page.

Here's the css:

#js-on
   {
   display: none;
   }

#js-off
   {
   display: block;
   }

Here's the javascript:

function startup()
   {
   document.getElementById('js-off').style.display = "none";
   document.getElementById('js-on').style.display = "block";
   }

Here's the html


<div id="js-off">
   <p>
      Javascript is OFF.
      This is where you would place code if Javascript was turned off.
   </p>
</div>

<div id="js-on">	
   <p>
      Javascript is ON.
      This is where you would place Javascript Progressive Enhancement code.
   </p>			
</div>

Be sure to call the javascript routine during startup, such as:


   <script type="text/javascript" src="a.js"></script>
<head>
	
<body onload="startup();">

Please donate $5 below for my development effort -- thank you.

This technique W3C validates under both HTML 4.01 Strict and CSS guidlines.

Enjoy.

Tedd...