I know what you are thinking, that JavaScript sniffers are outdated and go against all that is web standards. I agree. However, as IE6 fades into the past, isn’t it time we started ignoring instead of bending over backwards for its lack of standards support? This is where a JavaScript browser sniffer comes in!

Others have probably used this technique and expanded it to other versions of Internet Explorer as well. For this post, I am just going to discuss the IE6 version since it is very simple to expand it to all other versions of IE.

Drop this javascript snippet in a script tag in the head of your document:

var browserSniffer = {isIE6 : false}

Then, inside an IE conditional comment targeted at IE6, change the value of isIE6 to “true”. Like this:

browserSniffer = {isIE6 : true}

What you end up with is a non-global variable that is always equal to false unless the browser is IE6, then it is true. You can then easily dis-invite IE6 to the web standards party!

if (browserSniffer.isIE6 == true) {
	// fix some bug in IE6
}
else {
	// Do something sweet in other browsers
}

Standalone example – IE6 conditional comment javascript browser sniffer

Check out this hiding non-vital content example.

The method for the example is very simple and can be accomplished with a small jQuery function and a single class assigned to each element we want to hide. This can of course be done with plain old javascript as well but I’ll use jQuery because it’s so darn easy.

Here is the jQuery code:

1
2
3
4
5
6
7
8
9
10
11

$(document).ready(function() {
//hide secondary content
$(".secondaryContent").css("visibility","hidden");
 
// toggle secondary content items on hover
$("#p110_showHideExample li").hover(function() {
	$(this).find(".secondaryContent").css("visibility","visible");
},function(){
	$(this).find(".secondaryContent").css("visibility","hidden");
});
});

Now all we need to do is add the class “secondaryContent” to any element we want to be visible only when the user mouses over the containing element.

For example, here is the remove link html from the upper right corner of the example:

1

<div class="delete secondaryContent"><a href="#">X</a></div>