1,463 articles and 9,955 comments as of Thursday, March 25th, 2010

News Feed Comments

You are here: Home / Author / Guest Post / Brandon Anderson / SharePoint: Using jQuery to Wrap Web Parts and Achieve the Unachievable
Wednesday, March 17, 2010

SharePoint: Using jQuery to Wrap Web Parts and Achieve the Unachievable

Comments: 32

Guest Author: Brandon Anderson

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?

This article was originally published on the Ironworks Consulting blog Fit & Finish.

Guest Author: Brandon Anderson

Brandon Anderson is a SharePoint user interface and look-and-feel specialist.  He brings over 10 years experience with front-end web development to SharePoint implementations requiring customized branding. For the past 3 years, Brandon has worked extensively with the UI customization of SharePoint properties, both public and restricted-access, for clients of various sizes and industries.  Brandon is the lead Microsoft SharePoint front-end developer for Ironworks Consulting (www.ironworks.com) and hosts the blog SharePoint Putty (sharepointputty.com), where he writes about the user interface customization of SharePoint.

View all entries in this series: Using jQuery and Web Parts»
I recommend SharePoint resources daily on my twitter account here.

Posted by Brandon Anderson on Wednesday, March 17, 2010 at 9:00 am 
Filed under jquery · Tagged with , , , , , , , ,

 

Please Join the Discussion

32 Responses to “SharePoint: Using jQuery to Wrap Web Parts and Achieve the Unachievable”
  1. Marc D Anderson says:
    March 17, 2010 at 9:48 am

    Very nice, Brandon! One thought would be to use your own unique prefix for your custom CSS classes, like Microsoft does with the ‘ms-’ prefix. It might make working with Firebug and the like a little easier.

    M.

    Reply
  2. Greg says:
    March 17, 2010 at 9:51 am

    Hi Brandon,
    Really nice.
    Got a couple of questions thought:
    #1 – could you post the corresponding CSS file?
    #2 – guessing you are storing both the JQuery script & the CSS file in a separate library?
    #3 – what are the pros/ cons of adding those classes via JQuery vs. modifying your Master page?
    (I know it is an old and rehashed topic, just would like to know your personal thought process on your specific issue & solution).
    Thanks,
    Greg

    PS: You have a nice ‘More>>>’, just curious about what the webpart types you are using and which solution you used to achieve the more>>> feature

    Reply
  3. Greg says:
    March 17, 2010 at 9:58 am

    Opps, Talked too soon on the CSS!:
    http://fitandfinish.ironworks.com/2010/02/using-jquery-to-wrap-web-parts-and-achieve-the-unachievable.html

    Reply
  4. Christina Wheeler says:
    March 17, 2010 at 10:01 am

    Brandon,

    Nice solution! This is a great alternative to avoid wrapping the web part zone with a div.

    ~ Christina

    Reply
  5. Brandon Anderson says:
    March 17, 2010 at 10:48 am

    Marc,

    Thanks for the prefix tip. I’ll consider that for the next post.

    Reply
  6. Brandon Anderson says:
    March 17, 2010 at 11:16 am

    Greg,

    Q#1) could you post the corresponding CSS file?
    A#1) Yes, it’s in the comments at http://fitandfinish.ironworks.com/2010/02/using-jquery-to-wrap-web-parts-and-achieve-the-unachievable.html. Based on demand I should have included it.

    Q#2) guessing you are storing both the JQuery script & the CSS file in a separate library?
    A#2) The approach I take is to create a custom master page, on which I include the reference to the jQuery library, a JavaScript file that contains my jQuery functions, and a link to a custom CSS file. The projects I work on require extensive customization and branding, so they require a custom master page file anyways. See http://fitandfinish.ironworks.com/microsoft-sharepoint/ for more on how to go about that (you’re looking for the 2nd, 3rd, and 4th posts from the bottom of that page). You can always pull the contents of that function out of function form and instead add it a CEWP in a script so that it executes on load; you’ll just need to add that CEWP to each page.

    Q#3) what are the pros/ cons of adding those classes via JQuery vs. modifying your Master page?
    (I know it is an old and rehashed topic, just would like to know your personal thought process on your specific issue & solution).
    A#3) I went this route because I wanted to style the web part in a way Microsoft’s markup for web parts does not allow…not enough CSS hooks. So I needed to add the HTML to the web part; however, you cannot modify the outer markup of a web part, nor can you add HTML inside a web part zone. The only option in that case is to wrap your needed HTML around the web part zone. But doing this limits your stylistic treatment to only the web part zone, not the individual web parts inside the zone. Using this jQuery, you can add the necessary HTML to the outer structure of the web parts so that they can be styled appropriately independent of the web part zone.

    PS) You have a nice ‘More>>>’, just curious about what the webpart types you are using and which solution you used to achieve the more>>> feature
    PS Answer) The web part shown is either a content query web part or Ontolica search results web part. I’m sorry I don’t remember which. The content query web part allows you to modify the XSLT for results and result groups, so you can add in the “More >>” link. Ontolica is a third-party provider of search functionality for SharePoint, which we used for this project. You can modify XSLT for Ontolica results as well. Unfortunately, to achieve the particular unified, one web part look, you cannot add a CEWP underneath with a styled “More >>” link. Did this answer your question?

    Reply
  7. Dave says:
    March 17, 2010 at 11:44 am

    Can you please post the CSS – I am at DoD and some Blog Sites (not EUSP) are Blocked!

    Cheers!

    Dave

    Reply
  8. Ron says:
    March 17, 2010 at 11:52 am

    Brandon,
    Nice Article
    You can also put round corner around Webparts using Round corner plugin from here
    http://www.malsup.com/jquery/corner/
    with following piece of Jquery
    $(”.ms-WPHeader”).parent().parent().parent().css(”background-color”,”palegreen”).corner(”top”);
    if u want to do for particular webpart then use
    $(”td[title='Title for webpart']“).parent().parent().parent().parent().css(”background-color”,”#DDE0E3″).corner(”top”);

    dont know may there is some disadvantage of this Approach but its works in my case.

    again thanks for sharing

    Ron

    Reply
  9. Brandon Anderson says:
    March 17, 2010 at 12:07 pm

    Ron,
    Thank you. Thanks for referencing the jQuery corner script. I did not use this script because a requirement I work with in almost all cases is to allow for graceful degradation when users use the browsers zoom feature. Something about the way jQuery rounded corners working on web parts the way I had it degrade well…I’m thinking it had something to do with the web part title text appearing in the same row as the rounded corners…I’m not sure. So I started down that road but had to change routes for the rounding.

    Also, we needed to add the dropshadow underneath the web parts, which you can see (faintly) in the screengrab in the post.

    I’ll try this particular rounding corners script on my next implementation. Maybe things will go better. Thanks, Ron.

    Reply
  10. Brandon Anderson says:
    March 17, 2010 at 12:10 pm

    Dave,

    At your request, the CSS is below. Note that I use “!important” to force overrides of SharePoint’s default styles. Sometimes !important is not necessary, but for SP2007 sites I include it anyways for consistency. Feel free to leave !important off if you’d like.

    .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 &lt;8 fix */
}
.ms-WPHeader td .ms-HoverCellInActive {
margin:0 !important;
*padding:0 0 2px 0 !important; /* IE &lt;8 fix */
}
.ms-WPHeader td .ms-HoverCellInActive img {
margin:0 0 2px 0 !important;
*margin:0 !important; /* IE &lt;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(&#039;/Style%20Library/Images/wpcorners_f0f3f5_tr.png&#039;) top right no-repeat !important;
height:10px !important;
padding-right:10px !important;
}
.wpCornersTop div {
background:url(&#039;/Style%20Library/Images/wpcorners_f0f3f5_tl.png&#039;) 0 0 no-repeat !important;
height:10px !important;
}
.wpCornersBtm {
background:url(&#039;/Style%20Library/Images/wpcorners_ffffff_br.png&#039;) bottom right no-repeat !important;
height:20px !important;
padding-right:10px !important;
}
.wpCornersBtm div {
background:url(&#039;/Style%20Library/Images/wpcorners_ffffff_bl.png&#039;) 0 0 no-repeat !important;
height:20px !important;
}
    Reply
  11. Charlie Epes says:
    March 17, 2010 at 2:35 pm

    Hi Brandon:
    May I have some more guidance on this? I installed your script into my CEWP at the bottom of my page, and referenced my JQuery library. Do I add the CSS to the page as well?

    thanks-

    Charlie Epes

    Reply
  12. Greg says:
    March 17, 2010 at 2:43 pm

    Hi Charlie,
    Brandon’s approach involves a custom Master page.
    Another way of implementing the CSS & JQuery would be similar to what Christina
    set up in http://www.endusersharepoint.com/2010/03/12/transparent-overlays-for-sharepoint-interface-enhancement/
    You would have to add the ‘Javasript setup’ (ref Christina’s post)
    ….I think…?
    Greg

    Reply
  13. Jay says:
    March 17, 2010 at 2:43 pm

    I also need a little help using this with a CEWP. Charlie, I added the CSS to the same CEWP that has the jquery function. The color of the title of the web parts on the page change, but I get no rounded corners. I’ve checked to make sure my quotation marks are correct. I’ve taken out the code and just put a simple alert message and that works. Just not sure what I’m missing.

    Reply
  14. Brandon Anderson says:
    March 17, 2010 at 2:50 pm

    Charlie,
    If you want to use this by including it on the page via a CEWP you’ll want change a few things. As posted the script is meant to be included to the page via the page layout or master page. However, that is not to say that it can’t be done via a CEWP. Here’s what you want to do:

    1) Use the script below instead of the one in the post. The difference between the two is that this one will execute when the page is opened. Paste the below script into your CEWP.

    2) Include the CSS in the CEWP also. Paste the below CSS into your CEWP after the . Of course, you don’t have my background images, so you should replace the background url paths to meet your needs.

    $(document).ready(function(){

// 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(")
.after(");
$(".wpBorderOnly").before(")
.after(");
} );

.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;
}

    Let me know how it goes.

    Reply
  15. Greg says:
    March 17, 2010 at 2:51 pm

    Brandon,
    Thanks a lot for the detailed response!
    A lot of good stuff on your blog too.
    Greg

    Reply
  16. Brandon Anderson says:
    March 17, 2010 at 3:31 pm

    Jay, you’re not seeing the rounded corners because you don’t have the images containing those rounded corners.

    Greg, Charlie, and Jay:

    I just uploaded the images you need as referenced in the CSS to my blog. See http://spuiguy.wordpress.com/2010/03/17/resources-for-sharepoint-using-jquery-to-wrap-web-parts-and-achieve-the-unachievable/. You can save them from there and upload to your site collection’s Style Library.

    Reply
  17. Brandon Anderson says:
    March 17, 2010 at 3:34 pm

    Also, a note on the CSS I pasted into the comments…You’ll need to replace the 8 instances of “&#039″ with a single quote ‘. The comment engine here parsed the original double quotes into the unicode equivalent.

    Reply
  18. Greg says:
    March 17, 2010 at 4:34 pm

    Thanks for the posting the images on your blog!
    Was scratching my head trying to find alternate pic files ;-)

    Reply
  19. Charlie Epes says:
    March 17, 2010 at 4:42 pm

    A little more clarity, please.

    Greg says this applies to a Custom Master Page, yes?

    Is this SP2007 only? or also WSS?

    Do we start with Christina’s Javascript setup?

    Thanks-

    Reply
  20. Greg says:
    March 17, 2010 at 5:16 pm

    Charlie,
    I will try the full solution tonight and see if I am missing pieces or not.
    Brandon’s approach is to ‘create a custom master page, on which I include the reference to the jQuery library, a JavaScript file that contains my jQuery functions, and a link to a custom CSS file. The projects I work on require extensive customization and branding, so they require a custom master page file anyways.’

    Instead of having the Javascript in the master page itself, you could reference an HTML page via a CEWP on your Sharepoint page (see step 6 in Christina’s post)

    Not sure which approach is considered best practice in this specific case? Christina? Brandon?

    Reply
  21. Charlie Epes says:
    March 17, 2010 at 5:21 pm

    Thanks Greg.

    I think this post slipped through the editor’s hands without asking for details.

    None of what you say is mentioned and while it’s a fantastic solution which I can’t wait to utlize (all my thanks to Brandon) it reads like a code-only solution that doesn’t belong on EUSP without greater clarity for end users.

    Thanks for your help.

    Reply
  22. Brandon Anderson says:
    March 17, 2010 at 5:44 pm

    Charlie,

    There have been a number of comments about using this script inside a Content Editor Web Part. I will work on packing up my script from the original post’s code–which was meant for a custom master page implementation–in a format for use in a Content Editor Web Part.

    This script can be used in SharePoint MOSS 2007 and SharePoint WSS 2007.

    If I were to try using inside of a CEWP, I would use the JavaScript setup Greg pointed to by Christina.

    Like I said, I’ll work on putting it in Content Editor Web Part form and post here.

    Reply
    • EndUserSharePoint says:
      March 17, 2010 at 8:54 pm

      Brandon,

      I don’t think your solution belongs in a CEWP. The scripts, resources and css should reside in a centralized location, such as a SharePoint Scripting Center, and then those files can be referenced from the CEWP. If you are looking to expand on your concept for a new article, this might be the way to go.

      Mark

      Reply
  23. Charlie Epes says:
    March 17, 2010 at 5:57 pm

    Thanks Brandon.
    I’m sorry be feisty but this is really good stuff and I, pehaps like many plug-n-play JQuery-ites, are anxious to try this. Great job; casn’t wait.

    Thanks again-

    Charlie Epes

    Reply
  24. Brandon Anderson says:
    March 18, 2010 at 10:15 am

    You’ve got it, Mark. You read my mind. I just submitted the expanded article for posting. I hope you all find it much improved, as it is a plug-and-play solution all packaged up and ready to go.

    Reply
  25. Brandon Anderson says:
    March 18, 2010 at 10:44 am

    Mark, I think Marc was trying to help me with fixing the parsing of double quotes in my CSS that I posted in comments. The doubles quotes lines 63-77 were parsed by the comment engine into “'”. If we can replace the 8 instances of these with single quotes like in line 10, that should work.

    Reply
  26. Brandon Anderson says:
    March 18, 2010 at 10:59 am

    All,

    The follow up to this article has been posted on EUSP: http://www.endusersharepoint.com/2010/03/18/using-jquery-to-wrap-web-parts-and-achieve-the-unachievable-the-packaged-solution/

    Reply
  27. EndUserSharePoint says:
    March 18, 2010 at 11:15 am

    OK, should be displaying properly now. — Mark

    Reply

Trackbacks

Check out what others are saying about this post...
  1. Resources for “SharePoint: Using jQuery to Wrap Web Parts and Achieve the Unachievable” « SharePoint Putty says:
    March 17, 2010 at 3:23 pm

    [...] Resources for “SharePoint: Using jQuery to Wrap Web Parts and Achieve the Unachievable” March 17, 2010 spuiguy Leave a comment Go to comments Here you can find the images referenced by my CSS as posted in my article on EndUserSharePoint.com entitled “SharePoint: Using jQuery to Wrap Web Parts and Achieve the Unachievable.” [...]

    Reply
  2. Using jQuery to Wrap Web Parts and Achieve the Unachievable: The Packaged Solution | EndUserSharePoint.com says:
    March 18, 2010 at 10:47 am

    [...] March 17, 2010, EndUserSharePoint.com published a post I wrote about wrapping web parts with jQuery that included the necessary JavaScript function, but not much else.  I apologize my post did [...]

    Reply
  3. Using jQuery to Wrap Web Parts and Achieve the Unachievable: The Packaged Solution « SPUIGuy says:
    March 21, 2010 at 12:10 am

    [...] March 17, 2010, EndUserSharePoint.com published a post I wrote about wrapping web parts with jQuery that included the necessary JavaScript function, but not much else.  I apologize my post did not [...]

    Reply


Notify me of comments to this article:

Speak and you will be heard.

We check comments hourly.
If you want a pic to show with your comment, go get a gravatar!