15. Add a JS class to your HTML attribute
Firstly, as soon as jQuery has loaded you use it to add a “JS” class to your HTML tag.
1
$('HTML').addClass('JS');
Because that only happens when javascript is enabled, you can use it to add CSS styles which only work if the user has JavaScript switched on, like this…
1
/* In your css */
2
.JS #myDiv{display:none;}
So, what this means is that we can hide content when JavaScript is switched on and then use jQuery to show it when necessary (e.g. by collapsing some panels and expanding them when the user clicks on them), while those with JavaScript off (and search engine spiders) see all of the content, as it’s not hidden. I’ll be using this one a lot in the future.
It is good advice, but not optimal. If you want to go for ultra-fast page loads then you're putting the jQuery JS file at the bottom of your page. If you do that, the user will see an ugly flicker when content appears and disappears.
The solution is to just not use jQuery for that. It's such a simple operation anyway. I do something like:
15. Add a JS class to your HTML attribute Firstly, as soon as jQuery has loaded you use it to add a “JS” class to your HTML tag.
1 $('HTML').addClass('JS'); Because that only happens when javascript is enabled, you can use it to add CSS styles which only work if the user has JavaScript switched on, like this…
1 /* In your css */ 2 .JS #myDiv{display:none;} So, what this means is that we can hide content when JavaScript is switched on and then use jQuery to show it when necessary (e.g. by collapsing some panels and expanding them when the user clicks on them), while those with JavaScript off (and search engine spiders) see all of the content, as it’s not hidden. I’ll be using this one a lot in the future.
http://www.learningjquery.com/2008/10/1-way-to-avoid-the-fla...