CSS Javascript Checker

I wrote this little script to disable a login or hide any feature of a site that requires javascript to work properly. It also gives a message that javascript should be enabled. Since you can’t do anything with javascript to check for javascript if it is disabled, it does something when it is enabled. Sure you COULD just use NOSCRIPT but this way makes it more complicated and thus fun. Plus you can get a little more fancy with it.
download it

So it works backwards.

First the error message is displayed by default within the ‘javascriptcheck-failed’ div.

<div id=”javascriptcheck-failed”>
Please enable javascript to fully use this site.
</div>

The content you want to hide is put inside of ‘javascriptcheck-success’ div. You hide it by defaulting the CSS to have ‘javascriptcheck-success’ display property to none. It can also be shown by default if you wish to have a visable login, but disabled. Give it a low opacity for a better effect. Place disabled=”disabled” into your submit button at least.

<div id=”javascriptcheck-success”>
<form>
Login:<br />
<input type=”text” id=”username” disabled=”disabled” /><br />
<input type=”password” id=”password” disabled=”disabled” /><br />
<input type=”submit” id=”login” value=”login” disabled=”disabled” />
</form>
</div>

You may have your error message right above your content and need a space. This is where an empty div (javascriptcheck-failed-linebreak) with a line break can be used between. This way the div can be hidden during a javascript success so there isn’t a line break when it is not needed.

Next is the javascript.

The javascript is a single function that is called during body onload. Hide the error by setting the display to none and restore the form by setting the display to block or inline (whatever you need).

document.getElementById(‘javascriptcheck-failed’).style.display=’none’;

var success = document.getElementById(‘javascriptcheck-success’);
success.style.display=’block’;

If you have a form that is disabled, then reenable it by setting disabled property back to false.

var login = document.getElementById(‘login’);
login.disabled=false;

Clean up any opacity or other styling/functions you have set in the case of a failure.

success.style.opacity=’1′;
success.style.filter=’alpha(opacity=100)’;

When the page loads, if the browser has javascript enabled, the function will work. Otherwise you get the errors. It’s pretty simple. download it