Quick tip: Making jQuery tabbed content available for users without JavaScript

Posted in on 29 August 2011

Most users have JavaScript enabled these days but there may be a small fraction of your website visitors that have JavaScript turned off. In these circumstances, it’s generally accepted good practice to make sure that your website content is available to those users without JavaScript.

I came across this problem recently when I decided to implement a tabbed content area on the portfolio page of the restyled CVW Web Design site. The jQuery tabs effect works really well in this case because it allows a large amount of content to be effectively filtered and the page’s usability increases as a result.

The tabbed content areas are ‘hidden’ with CSS and jQuery reveals each tab with a nice animated effect. However, my initial testing of the page with JavaScript turned off was not so good because only the first tab’s content is shown. The other tabbed content areas were not visible.

Therefore, I need the CSS selector/rule that ‘hides’ the content to apply only for users with JavaScript enabled. For users without JavaScript, the CSS hide effect should not be apparent and they will be able to see all the tabbed content on the page as a result.

After some Googling, I found this article by Karl Swedberg which showed one way of doing this by dynamically adding a “js” class to your <html> tag using jQuery. Like this:

<script type="text/javascript">
      $('html').addClass('js');
  ....
  </script>

Then, use a CSS declaration similar to this in your style sheet. This positions the content off the page but display: none might also be used in other cases.

 .js .myclass {
    position: absolute;
	top: -9999px;
	left: -9999px;
    }

The .js .myclass selector is applicable for JavaScript enabled users. However, it will not be applied to users without JavaScript and they will simply see all the tabbed content areas but without the jQuery tabs/animation.

There’s at least one other way of doing this but I thought this method was a good one.

Update: Gary Jones pointed out on Twitter that adding a class to the <html> tag is, strictly speaking, only valid in HTML5 (although browsers do support it with HTML4 or XHTML). He also suggested using a .no-js class on <body>, and getting the script to remove it and adding .js instead. This means that you can style explicitly for no JavaScript. That’s a smart idea.

Info: My portfolio page is a modified version of organic tabs. It’s a real nice example.

Related Posts

Comments

  1. Prodyot 20 February 2012, 00:46 1

    Thanks for the article and the referred information.
    This is a great override.
    Thanks again.

Textile Help
Stop looking at my bottom