Using jQuery to Wrap Web Parts and Achieve the Unachievable

This is a jQuery script I wrote that looks at each web part on the page and, based on each web part's chrome setting, adds containers around the web parts. I use this script to apply stylistic treatments like rounded corners to individual web parts, not just the web part zones they belong to.

function wrapWebParts() {
    //     Find all divs (div.ms-WPBody) with an ID beginning with "WebPart". All web parts have
            unique IDs assigned to them, and they begin with "WebPart". Then traverse up the
            HTML document 4 levels and add the class "wp".
    $("div[id^=WebPart]").parent().parent().parent().parent().addClass("wp");
   
    //     For web parts with the Title and Border chrome, add the class "wpTitleBorder" to the
            element with class "wp".
    $(".ms-WPBorder").parents(".wp").addClass("wpTitleBorder");

    //    For web parts with the Border Only chrome, add the class "wpBorderOnly" to the element
            with the class "wp".
    $(".ms-WPBorderBorderOnly").parents(".wp").addClass("wpBorderOnly");

    //    Find all table cells that have an ID beginning with "MSOZoneCell" and add the
            class "wpContainer".
    $("td[id^=MSOZoneCell]").addClass("wpContainer");

    //    For web parts with the chrome type Title and Border or Border Only, add containers that can             be used for rounded corners and other treatments
    $(".wpTitleBorder").before('<div class="wpCornersTop"><div></div></div>')
        .after('<div class="wpCornersBtm"><div></div></div>');
    $(".wpBorderOnly").before('<div class="wpCornersTop"><div></div></div>')
        .after('<div class="wpCornersBtm"><div></div></div>');
}

Using this script and CSS you can create a web part with rounded corners and a bottom drop shadow with transparency, like this one (note the web part title is the true, fully-functional web part title.

Prior to using jQuery I had to wrap a web part zone with a div and CSS class in the page layout; doing so, I could apply background colors and rounded corners to the web part zone's container but not to the individual web parts. Plus, stylistic differences between pages could require that different page layouts be applied, which complicates maintenance.

The jQuery approach is much cleaner and more flexible. What have you tried to do with web parts that has entirely too difficult or impossible to do? Have you tried using jQuery to do them?

Comments

[David Phillips]

Great post Brandon and a solution to something I've been looking to do for a while. Not being very technical though can you advise if your solution is implemented using SPD directly or can it be implemented in a Content Editor Web Part? If the later I'd love to see some code examples that combine the jQuery code with CSS calls.

Finally, sorry a lot of asks, is it possible to adapt your code to read a Web Part Title and then style the web part based on the title and if so could you give me some pointers.

Regards,

David

[Brandon Anderson]

David, regarding implementing via SPD or a Content Editor Web Part, you'll need to include the reference to jQuery in the tag of the master page (see http://fitandfinish.ironworks.com/2010/01/the-best-way-to-add-custom-javascript-and-jquery-to-sharepoint.html ). This can be done either in SPD or in a simple text editor. You can include scripts and introduce jQuery to a page in a content editor web part, but I'd recommend against it; I prefer to include the jQuery library properly in the [head] tag.

(The comments section won't let me include HTML, so replace [ and ] with HTML brackets.)

That doesn't mean, however, that you can't put your jQuery script (not the library) in a content editor web part. You would put something like the following inside the HTML editor (not WYSIWYG) of the content editor web part: [script type="text/javascript"]$(document).ready(function(){alert("Script goes here.");});[/script]

I think this answers your question...let me know if not.

As for your request for examples including CSS, below is the CSS I wrote to get the look of the Industry News web part you see in the screengrab in the post:

.wpContainer {
padding-bottom:24px !important;
}
.wpTitleBorder, .wpBorderOnly {
background-color:#fff !important;
border-left:1px solid #c6c6c5 !important;
border-right:1px solid #c6c6c5 !important;
}
.ms-WPHeader td {
background:#d5e3ee url('/Style%20Library/Images/standard_inner_wptitle_lightgrey_bg.gif') repeat-x 0 -12px !important;
border:0 !important;
padding:0 !important;
}
h3.ms-WPTitle {
color:#36424a !important;
font-size:15px !important;
font-weight:normal !important;
margin:-3px 0 0 10px !important;
padding:0 14px 4px 4px !important;
}
h3.ms-WPTitle a {
color:#36424a !important;
font-size:15px !important;
font-weight:normal !important;
}
h3.ms-WPTitle nobr {
white-space:normal !important;
}
.ms-WPHeader td div.ms-HoverCellInActive {
margin:0 !important;
*padding:0 0 2px 0 !important; /* IE <8 fix */
}
.ms-WPHeader td .ms-HoverCellInActive {
margin:0 !important;
*padding:0 0 2px 0 !important; /* IE <8 fix */
}
.ms-WPHeader td .ms-HoverCellInActive img {
margin:0 0 2px 0 !important;
*margin:0 !important; /* IE <8 fix */
}
.ms-WPHeader img.ms-HoverCellInActive { /* Firefox */
padding:0 0 2px 0 !important;
}
.ms-WPHeader td .ms-HoverCellActiveDark {
border:0 !important;
margin:0 !important;
padding:0 0 2px 0 !important;
}
td.ms-WPBorder, td.ms-WPBorderBorderOnly {
border:0 !important;
padding:10px 14px !important;
}
.ms-WPBody {
font-family:Tahoma, arial, sans-serif !important;
font-size:11px !important;
padding:0 !important;
}
.ms-WPBody td {
font-family:Tahoma, arial, sans-serif !important;
font-size:11px !important;
}
.wpCornersTop {
background:url('/Style%20Library/Images/wpcorners_f0f3f5_tr.png') top right no-repeat !important;
height:10px !important;
padding-right:10px !important;
}
.wpCornersTop div {
background:url('/Style%20Library/Images/wpcorners_f0f3f5_tl.png') 0 0 no-repeat !important;
height:10px !important;
}
.wpCornersBtm {
background:url('/Style%20Library/Images/wpcorners_ffffff_br.png') bottom right no-repeat !important;
height:20px !important;
padding-right:10px !important;
}
.wpCornersBtm div {
background:url('/Style%20Library/Images/wpcorners_ffffff_bl.png') 0 0 no-repeat !important;
height:20px !important;
}

As for your last question about using the web part title as the hook styling purposes...absolutely. The jQuery script would look something like this: if($("h3.ms-WPTitle span").text() == "Unique Web Part"){$(this).parents(".wp").addClass("wpUnique");}

This script assumes you have the jQuery library in place and are using the wrapWebParts() function from the post. It adds a class to the container of the web part with the title "Unique Web Part" so that you can style the web part HTML using the CSS prefix .wpUnique. There is a negative here, and that is that jQuery is going to be parsing the entire page as it loads looking for a web part with that title; doing so may result in the web part loading with some delay before the CSS specific to that web part is applied.

I hope I've answered your questions.

[David Phillips]

Brandon, thank you very much for such a comprehensive response. I'll work my way through it and see if I can understand enough of it to test it on my site. I'll let you know how I get on.

Regards,

David

[David Wallach]

Hi Brandon, this is exactly what I want to do in SP 2010 to a webpart. Can you give me idiot proof instuctions on how to do this?

[Bill Burke]

When using with a webpart on a web part page the borders stop about 3/4 of the way across. Can I modify the css to ensure it grows with the web part?