We’re information architects, web analysts, designers, and developers on a mission to engage our digital audience by applying design, information architecture, analytics and strategy to build an all-around solid user experience. Think of our work as the “fit and finish” bodywork and detailing to a car – but instead of a car, we’re implementing final touches to a web project. We welcome you to follow along with us, as we share our insights, best practices, and solutions in web strategy and design, usability and information architecture, research and measurement, mobile and social media!

02/01/2010

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

You can follow this conversation by subscribing to the comment feed for this post.

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.

(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:

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.

Bill, you are welcome to modify anything as you see fit. It sounds like the images you created for the top and bottom borders are not as wide as the web part to which they belong, likely because the web part is inside a wide web part zone. You'll want to either modify the top and bottom images to be wider or set the background-repeat property on .wpCornersTop and .wpCornerBtm to repeat-x so that the background image repeats to fill the horizontal space. Which you choose depends on what your images look like (whether they are repeatable). I hope this helps. Good luck.

About This Blog

Welcome to "Fit & Finish", the Ironworks User Experience blog. We are very proud of the talented team (led by Bill Buell) of information architects, designers, developers and strategists that we have at Ironworks. You can look forward to us sharing our ideas, best practices, creativity, humor and useful resources on this blog. We welcome your active participation with comments and questions.

Contact ICF Ironworks

ICF Ironworks combines strategy, technology and design services to assist clients in the development of large-scale, complex technology projects. Ironworks offers three core services: Business & IT Alignment, Portal and Content Management, and Interactive.