Wojciech Bednarski

In my daily work I take care of front-end part of quite big factory portal. In small websites I have never seen flickering problem those parts of content which are hiding by JavaScript while page is loading. On enterprise is different. Some pages are incredible big, their parts load from many different sources and I see which parts of content are hiding one by one.

I tried to find the best solution, on the Google there isn’t a lot of information about good practice in JavaScript, however I think that I know how to do this best. I show you few solutions; unaccessible, bugged and accessible solutions.

The Goal

On the page div #book must be visible with JavaScript turned off and not hiding with flickering (blinking) when JavaScript is turned on. After clicked on the headline #book must be showed by JavaScript.

The page without any scripts and hiding CSS – example 0.

Really bad, however not flickering

The part of the page, that should be showed by JavaScript is hiding by CSS.

CSS code:

#book {
 display: none
}

When JavaScript is on we can show hidden part by mouse click.

JavaScript code:

$(function() {
$('h2').click(function() {
 $('#book').show();
 });
});

When JavaScript is off, the #book is never visible. That solution is not acceptable. Example 1.

Accessible but flickering

Second solution is really simple and accessible, but during hiding parts of content then blinking is appreciable.

Just add hiding class by JavaScript, that you have guaranty when JavaScript is off anyone can see content.

JavaScript code:

$(function() {
 $('#book').addClass('javascript);
  $('h2').click(function() {
   $('#book').show();
  });
});

CSS code:

.javascript {
 display:none
}

View example 2.

Accessible but document.write

Yes, that example is accessible but… Always is but. The problem is in document.write. I think you know what’s going on with it. Maybe in this case we can use document.write? I’m really confused at this point. Unfortunately, when we write something with document.write it will not work when we serve it as application/xhtml+xml.

JavaScript code:

$(function() {
 $('h2').click(function() {
  $('#book').show();
 });
});
		
document.write('<style type=\"text/css\" media=\"screen\">
 #book{display:none}
</style>');

View example 3.

Accessible, better than previous, but…

I hate buts! That example is accessible but to valid this page with any version of HTML or XHTML you have to extend DTD, really.

JavaScript code:

$(function() {
 $('h2').click(function() {
  $('#book').show();
 });
});

CSS code:

#book {
 display:none
}

CSS code:

<noscript>
 <style type="text/css" media="screen">
 #book {
  display:block
 }
</style>
</noscript>

The problem of that case: We need to put style inside the noscript tag to show the content when JavaScript is off. We cannot put style tag inside body and we can put noscript tag only inside body tag, disaster…

View example 4.

The winner!

documentElement.className If it is a holy grail of my search? It looks like.

I did not observe any delay during hiding content using this method. Even of a huge page.

How it works? We added class to html tag by JavaScript. Next, each element that should be hidden when JavaScript is turned on, preceded by the class and add to it display:none or something like this. That’s all.

JavaScript code:

document.documentElement.className += " js";

$(function() {
 $('h2').click(function() {
  $('#book').show();
 });
});

CSS code:

.js #book {
 display:none;
}

View example 5.

To test these examples you can reload it few times to see flickering effect. To show the hidden content, click at headline Wojciech Bednarski’s favorite book.