elepha.info

Many of webs with sticky „Web 2.0“ use JavaScript. During my voyage through it I met method how to make pages using JavaScript more accessible and usable even when its turned off. If you don't know about it, let me share it with you.

One of the well known JavaScript frameworks Scriptaculous offers you many ways how to make your website much more interesting with many effects. Fading, appearing, blinding and other of really nice effects are offered to you. But what is the main problem?

As we look on the documentation of one of the scriptaculous effects Effect.Appear what we see?

1: <a href="#" onclick="new Effect.Appear('apear-div');">Click to apear</a>
2: <div style="float: right">
3: <div id="apear-div" style="display: none;">
4:         Only this div has to apear!
5: </div>
6: </div>

Source code above comes from Scriptaculous wiki concretely documentation to mentioned effect. The problematic part is right in front of our eyes. Do you see it? Yes? If you saw style="display: none;" you're right!

If the user somehow by purpose or lets say by accident turn browser's javas­cript off. He won't be able to see any div with text „Only this div has to apear!“.

You have 2 choices how to make div visible with JavaScript turned off.

1. set display:none to the targeted div with javascript after the whole page loads
2. use powerful combination of JavaScript and CSS to do it for us

First choice is good but when the page is loading you see the div, after it's loaded it's gone! Where the hell is that box? Hidden. Making user confused by hiding previously visible elements. Or you can use choice two.

Combining JavaScript with CSS

The method itself is so easy that you will be thrilled. We add to header of document simple line (yes you see well, one line) of javascript and we are ready to go.

1: document.documentElement.className = 'js-on';

You may found out what this will do. If you don't let me explain. This simple line will add a class js-on to html tag. Simple right?

Then we use CSS to do the rest for us. Add to your stylesheet following lines:

1: .js-on .off{
2: display: none;
3: }

Using help of descendant selectors and one class our problem is gone. When JavaScript is turned on no blicking will disturb our visitor. html tag already exists when the JavaScript is compiled and executed so the class is added immediately. And as we know browsers read styles first then parse rest of markup.

In the other case we have JavaScript off, the definition .js-on .off does not apply (there is no class .js-on) and the user can have a pleasure and enjoy themself with unhidden text.

Reviling the text in JavaScript is then only matter of script itself. Whether you will do it with document.getElementById('apear-div').className = ""; or when using Prototype framework Element.removeClassName('apear-div', 'off'); is only your choice…

I would like to thank to Jakub Roztočil for sharing this wonderful way with me.