Tuesday, August 31, 2010

Hide Empty Web Parts with jQuery

Every once in a while I happen to be in a situation where I have created a basic Web Part page with multiple Web Parts. Some of these Web Parts displays/shows content at all time, while others only has content whenever an action is performed. (i.e. connected Web Parts, Search Web Parts etc)

One of SharePoint's (many) annoying drawbacks is the fact that "empty" Web Parts not actually appear empty, now matter how much you fiddle with the chrome-settings....

Setting the chrome to "none" doesn't help much either :-(

All in all, you end up with a lot of empty areas on the page, depending on how you organize your Web parts of course... :-)

So what can you do to overcome this "major" issue:

Well, I have been playing around a little with jQuery scripts and have accomplished to write a code snippet which actually hides all the empty Web parts, as long as the page is display in normal mode (not design/edit mode)

The package consists of a fairly simple Content Editor Web Part (.dwp file), with some lines of jQuery code, and a reference to the jQuery.js library. (located in the /_layouts/ catalogue by default)

If you're in the same situation, feel free to give it a try :-)

The Web Part can be downloaded here:
Hide Empty Web Parts (jQuery)

The jQuery Library can be downloaded here:
jQuery: The Write Less, Do More, JavaScript Library

Instructions:
- Download the jQuery Library (rename to jquery.js), and copy the file to the layouts catalogue within the 12-hive.
- Download the Web Part file and simply import the Web Part to any page you would like to run the script on.

1 comment:

Unknown said...

I can not seem to get this to work on SharePoint 2010. I am not putting the jquery library in the layouts folder, but I am referencing google's library. [script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script]. Do you think this this the source of my problems?

Business Card