@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.

About new cool features, like CSS animation, SVG, Styleable Form Controls and so on, you can read on the Safari’s Blog - Ten New Things in WebKit 3

For testing web sites under Safari 2.0, you can keep Safari.app before update to 10.4.11 in different directory or download any version from repository.

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!

So… My blog is powered by WordPress, but the design isn’t WordPress theme.

This design is my intellectual property. Unique combination of images, colors, sizes, typography and positioning is copyright by me - Wojciech Bednarski and may not be reproduced.

However you may study the CSS and use techniques for learn and use some part of my CSS files in your projects, but not like a part of design.

All graphics are copyright by Wojciech Bednarski and you may not reproduce it elsewhere without my written permission.

If you steal my design, you can be sure I will find you.

Yeah. Finally I’ve made my own CSS design for Zen Garden and I’ve submitted it. Unfortunately current processing work submitted is between 1 November 2005 and 1 December 2005. Apparently Dave has many other projects to watch. It takes a few months when my project will be accepted and published.

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.