Skip to content Skip to sidebar Skip to footer
Home / Css / Javascript / Jquery / Seo / Unobtrusive Javascript

Hide Html Only When Javascript Is Available

Post a Comment
I guess this is more about SEO than wanting to support browsers with Javascript disabled. I have Javascript/jQuery code that reads in some html and basically displays it much nice

Solution 1:

I think using noscript html tag will do the job. The tag displays the content inside if the script is disabled in users browser.

Solution 2:

Any JavaScript will only work if JavaScript is enabled so no matter how you do it using JavaScript it will always work only if JavaScript is enabled so you never have to test for that.

That having been said, you can see how it is done in the HTML5 Boilerplate:

<htmlclass="no-js"lang="en">
... the rest of the page
</html>

using a no-js class applied to the <html> tag. The class is later removed using JavaScript and a js class is added, both of which you can use in your CSS and HTML:

<p class="js">This is displayed if JavaScript is enabled</p>
<p class="no-js">This is displayed if JavaScript is disabled</p>

Or in CSS:

.no-js#someWidget { display: none; }
.js#someFallback { display: none; }

If you're using Modernizr then it will already change those classes for you, but even if you don't then all you have to do is something like:

document.documentElement.className =
     document.documentElement.className.replace(/\bno-js\b/,'js');

It's a simple and elegant solution and all you have to worry about is CSS classes in your styles and markup.

Solution 3:

I'd probably use a single bit of script that sets a class on body you can then reference in your CSS, but basically, you're on the right track.

E.g.:

<body><script>document.body.className = "jsenabled";</script>

Then your CSS rule:

body.jsenabled selector_for_your_initially_hidden_content {
    display: none;
}

The rule will only kick in if the body has the class.

Complete example:

HTML (and inline script):

<body><script>document.body.className = "jsenabled";</script><divclass='foo'>I'm foo, I'm hidden on load</div><div>I'm not foo, I'm not hidden on load</div><divclass='foo'>Another foo</div><div>Another bit not hidden on load.</div></body>

CSS:

body.jsenableddiv.foo {
  display: none;
}

Live copy I've only used the "foo" class for an example. It could just as easily be a structural selector.

Solution 4:

Add the class hiddenblock to each div (or block) you want to hide, and add this JS code in the header: 

$(document).ready(function() {
    $(body).addClass('jsenable');
    $('.hiddenblock').hide();
}

You can also use the class jsenable to mask or modify some other block, like this:

.jsenable#myblock { position: absolute; right: 10000px; }

Post a Comment for "Hide Html Only When Javascript Is Available"