Content to the front with jQuery


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);

	$(this).stop().fadeTo('fast', 1);
	$("#main").stop().fadeTo('fast', 0.4);
	$(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.

Posted in HTML & CSS, jQuery

More Recent Posts

Wordpress plugin: Multi-column Tag Map

I’ve never been one for tag maps. I’ve never liked non-alphabetical listings of tags in sidebars. I never like lists of tags ordered by the “popularity” of the tag in question. All these make it extremely difficult scan and find the topics that interest me. In large sites with hundreds …
Read the rest of this entry »

Tags: ,
Posted in Wordpress

jQuery first-letter hijinks

This morning I was flipping through Memphis Magazine and noticed a pretty simple yet nice text treatment. They were over laying the first paragraph over a faint colored square that had the first letter of said paragraph in it. Nice way of adding a little ‘pop’ to the page. Of …
Read the rest of this entry »

Tags: ,
Posted in jQuery

Three column posts in Wordpress

Here is a working example of this. Following up on my two column post hack for Wordpress, here is a method to doing it for three columns. There isn’t really too much different except a few small shanges in the CSS and PHP. Biggest change is using PHPs ceil() …
Read the rest of this entry »

Posted in Wordpress