Greg's Blog

helping me remember what I figure out

JavaScript Detection

| Comments

Here is a little script that I adapted to use CSS to hide parts of a document if JavaScript was disabled, for example a login box. Might come in handy one day.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1” />
<title>Untitled Document</title>
</head>
<script language=”JavaScript1.2” type=”text/javascript”>
<!–
function show(id) {
if (document.getElementById) {
document.getElementById(id).style.display=”block”;
} else if (document.all) {
document.all[id].style.display=”block”;
} else if (document.layers) {
document.layers[id].display=”block”;
}
}

function hide(id) {
if (document.getElementById) {
document.getElementById(id).style.display=”none”;
} else if (document.all) {
document.all[id].style.display=”none”;
} else if (document.layers) {
document.layers[id].display=”none”;
}
}
//–>
</script>
<style>
#login {
display: none;
}
#noJS {
display: show;
}
</style>
<body onload=”show(‘login’); return hide(‘noJS’);”>
<div id=”login”>
I am a login box
<ul>
<li>I am bullet point</li>
<li>I am bullet point 2</li>
</ul>
</div>
<div id=”noJS”>
<p>If you can’t see anything this is because you have disabled JavaScript</p> </div>
</body>
</html>