Hide content if Javascript is disabled

Forum Moderators: open

Message Too Old, No Replies

Hide content if Javascript is disabled

mdurrant

8:02 pm on Mar 13, 2008 (gmt 0)

I've spruced up a form of mine with Javascript quite a bit, up to the point where some features are really awesome, but they don't work if the user has disabled Javascript. I'd like to hide the form and display an error message if they don't have JS enabled, but I'm running into problems.

My attempt looked like

my form here

But that obviously didn't work (otherwise I wouldn't be here :P). Any suggestions? Thanks.

Fotiman

9:00 pm on Mar 13, 2008 (gmt 0)

Here's a quick example I cobbled together real quick. In this example, I'm using the Yahoo UI Library for it's Event and DOM handling utilities, but you could replace it with your own if you so desired. Essentially, the default is to hide the form and display the error message. But if JavaScript is enabled, then we attach a class to the body, and then our style rules can use that to determine when JavaScript is enabled.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset:utf-8"> 
  <title></title> 
  <style type="text/css"> 
  #myForm { 
    display: none; 
  } 
  .hasJs #jsRequired { 
    display: none; 
  } 
  .hasJs #myForm { 
    display: block; 
  } 
  </style> 
</head> 
<body> 
<div id="myForm"> 
  ... 
</div> 
<div id="jsRequired"> 
  error message here 
</div> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.0/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
<script type="text/javascript"> 
YAHOO.util.Event.onDOMReady(function () { 
  YAHOO.util.Dom.addClass(document.body, 'hasJs'); 
}); 
</script> 
</body> 
</html>

httpwebwitch

9:02 pm on Mar 13, 2008 (gmt 0)

Please don't put beginning and ending tags inside separate <noscript> tags. It makes your whole document not-well-formed, which is worse than being invalid IMHO. <noscript> is an HTML tag - you can't use it quite the same way you use a server-side conditional statement.


<?php if(false){ ?> 
content here!
<?php } ?>

You should take an opposite approach: show the error message by default. But use JS to replace the message with your form, by rewriting the innerHTML of its element container.

That way users who have JS disabled will see the error content, users with JS will see the form.

You could even go a step further to keep it tidy: put the form HTML in an external *.html file, and load it onto the page using a standard AJAX library like those found in Jquery or Mootools. This can be done with 3 lines of code, max!

mdurrant

9:04 pm on Mar 13, 2008 (gmt 0)

Thanks guys, I'll approach it a different way based on your advice.

httpwebwitch

9:05 pm on Mar 13, 2008 (gmt 0)

oooh, Fotiman beat me to the response by 2 minutes

His idea works too, toggling the visibility or display CSS with JS.
Nice job