For JavaScript disabled visitors…

[GMB]

I’ve just redesigned my personal website and am using some basic jQuery animations, including one that fades the pages in on load. For this effect I’ve tried a number of solutions, including this:


$('body').css('display', 'none');
$('body').fadeIn(1000);
});

this:


$(function() {
$('body').hide().fadeIn(1000);
});

and this, used with display:none applied to the body tag in CSS:


$(function () {
$('body').fadeIn(1000);
});

Of the three, I prefer the last one because with the preceding two, you often get a brief glimpse of the content before jQuery hides then fades it in. (And yes, I have been reading the accessibility problems associated with display:none but am not sure how better to achieve this effect. As I understand it, my first two snippets above will have the same problem.)

My question is, since visitors with JS disabled will get a blank page, what can I do to eliminate the page fade in and other jQuery animations for those visitors and just serve them the straight data, but keep the animations for everyone else? You can see my site here if you’d like to.

LITTLE EDIT/ADDITION:
Maybe the way to go would be to detect if visitor has disabled JS and serve a different stylesheet w/out with display:none applied to the body?

[TheDoc]

You should start with your page having a .no-js class attached to the html tag. Then when your JS kicks in, it replaces that with ‘.js’. This is pretty common practice these days and will happen automagically if you are using modernizr.

Then in your CSS you can do this:

.no-js body { display: block; }

[GMB]

Thanks for your reply, TheDoc. I’ve been toying around a bit with solutions like the one you’re proposing, but don’t understand what you mean by it happening automagically with modernizr. Could you explain?

For the record, I’m using the HTML 5 boilerplate and there is an IE if statement in the head with “no-js”.

[TheDoc]

Okay, if you have that already, do this:

Use the Inspector to check if the class has changed to ‘js’. If it has, then it’s running properly and you can use the CSS I mentioned above.

If it hasn’t changed then you aren’t including Modernizr properly – it’s usually included with the HTML5 Boilerplate.

[GMB]

Nevermind, TheDoc. I looked into it a bit more and found that I am using modernizr. So, I added the “no-js” class you mentioned to my stylesheet, added:




beneath the opening HTML tag and it works like a charm.
I’ve learned something — thank you.

EDIT: Your comment came in just as I was typing mine…

[Senff]

(EDIT: nevermind)

[Author]

Posts