Content to the front with jQuery

Jan1st
2010
••

I have been asked numerous times how I accomplished the sidebar and main content fading on this site. It’s a pretty simple snippet of jQuery. I decided it’s about time to just make a post about it.

First off my reason for using the effect. Having a dark colored site with light colored text, and typically a lot of light colored text, the sidebar content seemed to distract from the main content area. As information in my sidebar is usually unrelated to the post being shown, I felt it a good idea to lessen the importance of the sidebar content until the user wanted it. A simple fading solution seems to do the trick.

There are only a few lines needed for this effect. One note is that IE6 doesn’t want to play along so I am using a browser sniff to detect that browser and feed it nothing.

if ($.browser.version = jQuery.browser.msie &&
    parseInt(jQuery.browser.version) == 6) {
     // IE6 doesn't like this so it doesn't get any effect
  } else {
$("#side").fadeTo('fast', 0.4);

$("#side").hover(function(){
	$(this).stop().fadeTo('fast', 1);
	$("#main").stop().fadeTo('fast', 0.4);
},function(){
	$(this).stop().fadeTo('fast', 0.4);
	$("#main").stop().fadeTo('fast', 1);
});
}

You will notice in that snippet that I am using divs with the ids of side and main respectively. Of course change these to be whatever your site requires.

That’s all there is. You can take a look at a simplified working example here.

P.S. 2010 is the year of the tiger.