Drale

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

JSChecker disabled


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

JSChecker enabled


Categorised as: scripts


One Comment

  1. Brian Moy says:

    That’s a really good idea! I’m going to play with it.

    To get around the possiblity of a visitor w/ JS enabled or not, (my friend Rick only this year upgraded from using WebTV as his browser, hah hah!) I just tried to put in alternate noscript code that degrades cleanly so if you don’t have JS, everything is still accessible. But this is a nice way to selectively let JUST those people know they aren’t fully seeing everything on that page w/o JS. I’d had disclaimers put up too (this site looks best…) but to me that looks sloppy.

    Btw, thanks for visiting my site and the friendly tips! Since you added my site as a link, feel free to email me if you have a banner and I’ll add it to my Friends of Specialty Gamer page. 🙂

Leave a Reply

Your email address will not be published.