View Full Version : correct way to design assuming rare chance of javascript being turned off

03-04-2011, 08:33 PM
With JQuery, It seems that a lot of times, in order to get the proper effects to work, you need a div to be set to display: none as its default.

With that said, if a visitor for some reason has JS turned off, your website while be pretty much dead. Unless 2 things are done in preparation. I'm not sure which is the best way to do thing:

1: Add some kind of script to detect if JS is turned off or on. If off, tell the page to use an alternate CSS file?


2: Use the Jquery itself to first change the div to display: none as a callback to execute the next functions. That way, if JS is turned off, the website content divs will at least display, just without any animation/JQuery functions.

Any insight on this? *To be honest, I see a lot of high end websites that use jQuery and they don't seem to prepare for the rare scenario of JS turned off.

Any input would be great. I'm working on a site right now that relies heavily on JQuery for the elegance of switching pages ( fades in, etc) and curious what precautions are suggested, if any.

I'm not sure what the "right thing" to do is.


03-04-2011, 11:02 PM
Personally, I’m using the NoScript addon (https://addons.mozilla.org/af/firefox/addon/noscript/) for Firefox and I’m permanently annoyed when websites don’t even care to get the most basic things right. So, I appreciate that you do care and I’m gonna tell you how I’m doing it and what I think the best way would be: I usually add a class to the body element with jQuery and then I use that class in my stylesheet to address the elements.

For example these are usually the first lines in my script:

if(typeof jQuery != 'undefined') {
$(function() {
// more JS comes here

So, this way I can have my content and then in the stylesheet I tell the element to look a certain way, and if the .jsenabled class is there hide the element (or make it look differently, or whatever):

#whatever {

.jsenabled #whatever {display: none;}

There is one drawback, though: If you have your script in the head of the document and a document with a lot of content (HTML wise) there may be a short time (depending on the speed of the internet connection) where you see the unhidden content since jQuery waits for the DOM to be ready before it applies the special class to the body. You can circumvent that by putting that certain part directly into the HTML (e. g. after the start tag of the body) so it applies the class right after the body element is present (and before the entire DOM has to be loaded). But often this won’t even be necessary, that’s just in some cases where it would be obvious.

You can see this in perfection on http://klett-cotta.de/home/

03-04-2011, 11:18 PM
Thanks a lot for that detailed explanation and that website that demo's the function. I had an Idea it was going to be something like that but now, at least I know a good way to do it.

Thanks a lot!