Smashing Book.

@media 2008

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.

For example you cannot install software like Adobe Photoshop CS3 or Age of Empires III on a case-sensitive filesystem. (I know only about that two) Adobe and Microsoft don’t write anything about filesystem requirement in software requirements at the box or even documentation. Why?!

Age of Empires III cannot be played on a Case-sensitive formatted volume. For more information, please consult the game’s Read Me file.

On Adobe support page I found solution, but it doesn’t work… The solution is to install software on a case-insensitive volume. When you create second partition with a case-insensitive volume and try to install software there, nothing will happen. You cannot install still.

This is not the first time when I get lesson from OS X that only its defaults are right…

Say NO to the Microsoft Office format as an ISO standard (Français, German).

The home page of <NO>OOXML project.

I found accessibility statement on bbc.co.uk page. I think it is good example, what such page should contained. I talk about content only, code looks like…

So, what do you think about it?

Design looks something like this:

Related articles (blue one on image) are exactly the same as related article again from right on the article content. Similarly useful external links under the article content are repeated on the right of article content.

So, What is the best way to do this? I see two solutions:

1. Generate twice each of the section in XHTML code (by back-end code)
2. Generate only once time section which will be repeat and copy them via JavaScript

Both solutions are not so good, but if we have got bad design and we don’t have any possibilities to change it (for example client is to decide on), we must choose solutions.

Why the first is bad?

1. Double content in XHTML code
2. Accessibility (obstruct browsing from mobile, screen reader has to read the same content again)
3. SEO (to much the same words in code or something other reason to worse SEO)
4. We don’t have possibilities to add any semantic relations between section in code (XHTML is restricted in this case)

Why the second is bad?

1. Client has to rendering scripts (performance)

I think, the second is better than the first. If you have any ideas leave a comment.

Quick Important Fact About Windows Vista

1. Vista is designed to restrict what you can do (DRM)
2. Even when you legally buy Vista, you don’t own it
3. If your copy of Vista came with the purchase of a new computer, that copy of Vista may only be legally used on that machine, forever
4. If you bought Vista in a retail store and installed it on a machine you have already owned, you have to completely delete it on that machine before you can install it on another machine
5. You give Microsoft the right, through programs like Windows Defender, to delete programs from your system that it decides are spyware

Project target is to inform as many people as possible about Windows Vista restrictions for freedoms of computer users.

So, I have made a leaflet which you may download, print and stick in some visible place. For example, dashboard at your school, work or so on…

Download the bill Bad Vista!

At present you may watch my design here.

I called this design Our House, because everything getting started from the picture named that same. Thanks Arnie Mateo for great picture and inspiration.