The jQuery version of this (not that you really need it, but if you’re using it anyway) is:
$("body").addClass("js");
I always put it right up top, with anything else that’s generic. I also usually use the class “has-js” just because a two-letter class name makes me nervous (plugins or whatnot) and it’s an eensy bit more meaningful.
I idea of this code is to be as fast as possible. It should be placed just below your CSS files in the head element as a plain JavaScript snippet. You’ll want to load jQuery at the bottom of your document just before the closing body tag because downloading JavaScript files blocks the rendering of the page.
Realistically this won’t work as well as the other examples.
You have to download jQuery (and probably all the CSS and images) before it can add the class name.
That will cause the occasional flash of no-js content before the jQuery command kicks in and fires the CSS.
This method is better stated as a solo piece of JS straight after the page title and before and CSS:
I have an additional trick for you guys; Alongside this class being Added to the body, I Remove a class that was in the body tag. So a user withOut JS will get <body class="xhtml">
while a user With JS turned on will get <body class="js">
( … by removing the class ‘xhtml’ and adding ‘js’ )
= By having a default class in the body tag it makes things easier to do “flash on load” fixes like when replacing links with Flash-content f.i., plus I find that it simplifies and prettifies the CSS a whole lot ;)
I use the technique outlined in the article but recommend adding a space before the class like so: ” js”. This way if any classes exist already, it’s easily appended to the class string, otherwise, the space is simply ignored.
I have downloaded a theme which works perfect offline. but when I uploaded the same thing on web server , it doesn’t work. Page seems to be blank. theme is based on DOM
<script>
//* hide all elements & show preloader
document.documentElement.className += 'js';
</script>
<script>
$(document).ready(function() {
//* show all elements & remove preloader
setTimeout('$("html").removeClass("js")',1000);
});
</script>
This doesn’t add a class to the body; it adds a class to the root element (i.e. the “html” tag)…
fixed.
The jQuery version of this (not that you really need it, but if you’re using it anyway) is:
$("body").addClass("js");
I always put it right up top, with anything else that’s generic. I also usually use the class “has-js” just because a two-letter class name makes me nervous (plugins or whatnot) and it’s an eensy bit more meaningful.
I idea of this code is to be as fast as possible. It should be placed just below your CSS files in the head element as a plain JavaScript snippet. You’ll want to load jQuery at the bottom of your document just before the closing body tag because downloading JavaScript files blocks the rendering of the page.
Personally I use this snippet:
It will replace the class of “no-js” to “js” on the HTML element while preserving all other class names that may be there.
Realistically this won’t work as well as the other examples.
You have to download jQuery (and probably all the CSS and images) before it can add the class name.
That will cause the occasional flash of no-js content before the jQuery command kicks in and fires the CSS.
This method is better stated as a solo piece of JS straight after the page title and before and CSS:
<script type=”text/javascript”>/<![CDATA[/document.documentElement.className=”hasJS”;/]]>/</script>
Has worked incredibly well for me for the last 6+ years.
I have an additional trick for you guys; Alongside this class being Added to the body, I Remove a class that was in the body tag. So a user withOut JS will get
<body class="xhtml">
while a user With JS turned on will get
<body class="js">
( … by removing the class ‘xhtml’ and adding ‘js’ )
= By having a default class in the body tag it makes things easier to do “flash on load” fixes like when replacing links with Flash-content f.i., plus I find that it simplifies and prettifies the CSS a whole lot ;)
I use it often to open all hidden menus, and collapse when js is enabled.
I use the technique outlined in the article but recommend adding a space before the class like so: ” js”. This way if any classes exist already, it’s easily appended to the class string, otherwise, the space is simply ignored.
I have downloaded a theme which works perfect offline. but when I uploaded the same thing on web server , it doesn’t work. Page seems to be blank. theme is based on DOM
Can u help on this please??
document.documentElement.className += ‘ js ‘; // NOTE: ‘[space]js[space]’