I am bored watching the bad use of JavaScript detection. You can see that I tell you simply looking for "requires javascript" in Google. Normally, the programmer set a space in the web page for display the error message like "This web site requires JavaScript enabled", and, when with JavaScript the programmer hides this message.
The problem is that, if the page is a big size HTML code, or we have many pictures and execute our code on window load, probably, you can see this horrible warning before hide it, while the page is loading. This is a bad way for display this message.
Looking for the standars
Well, we can look in the HTML standars. We have the "noscript" tag. All the HTML code inside of this tag is interpreted by the browser if the JavaScript engine is not enabled. So we can make a top warning message for show that the page requires JavaScript:
Disable JavaScript in your browser for display the warning message. In Firefox Tools menu - Options - Content - Enable JavaScript unchecked.
Now in the #web layer we have our page, and #jswarning only is displayed if JavaScript is not enabled.
Making more beautiful
Also you can use CSS in the elements as allways. I copy the same style of Firefox warnings:
body{
margin: 0;
}
.jswarning{
font-family:Arial, Helvetica, sans-serif;
font-size: 9px;
height: 20px;
border: #d6d8d6 1px solid;
width: 100%;
padding-top: 10px;
padding-left: 30px;
background: #ffffe1 url(imgs/exclamation.gif) 4px 8px no-repeat;
}
#web{
font-weight: bold;
color: #666;
}
The final result is like this:
You can test yourself with this online example.
Labels: accessibility, css, programming