Hiding empty web part zones using JQuery

In SharePoint, let´s say you have a page layout that looks somewhat like this:

The green boxes are supposed to be containers for web parts parts (ie web part zones in 2007). To get them to look like that I have surrounded each zone with two div elements to get the rounded effect (not going to show the css but you get the idea) .
The html might look like this:

<div class="webpart-area">
 <div class="webpart-area-inner">
 <sp:WebPartZone runat="server" FrameType="None" ID="Left" Title="Left" AllowPersonalization="false" />
 </div>
</div>

So, what I now want to accomplish is to hide each zone (container) that doesn´t have a web part inside. The layout might not look so great otherwise.

JQuery to the rescue!

As usual, I construct an extension to JQuery that has the following signature:

 $.fn.HideIfEmpty = function(options) {
 $.extend({}, options);
 this.closest(".webpart-area").hide();
 }

Invoke it like this:

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_pageLoaded(function(sender, args) {
 jQuery('.webpart-area-inner:empty').HideIfEmpty();
});

And now…the empty ones are hidden!

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: