Tuesday, March 10, 2009

Minimize WebParts with jQuery


Recently I had to implement a quick way for the users to minimize and restore webparts with a single click, rather than having to use the default webpart verb to Minimize / Restore: it involves two clicks and it’s not very intuitive for the users.
My solution is the following  jQuery script:
$(document).ready(function()
{
    //display the hand cursor over the title table rows for each webpart and hook to the "onclick" event
    $("tr.ms-WPHeader").css("cursor", "pointer").css("cursor", "hand").bind("click", function ()
    {
        //get the div element nesting the webpart contents: the navigation is based on standard webpart rendering behaviour
        var divElement = $(this).parents('tr:first').siblings('tr:first').children('td:first').children('div:first');     
        //and togle its visibility status 
        divElement.toggle();
    }
    );
}
);
When triggered in the master page, a page layout or even from within the default Content Editor WebPart, this script will enable toggling the visibility of the webparts on the page with a single click on their title. It also works when the default chrome state is minimized, bypassing the default behaviour.
On a side note, I think it would be great to see more out-of-the-box jQuery action in the next version of SharePoint, now that it officially supported in Visual Studio 2010.

6 comments:

Anonymous said...

This is exactly what I am looking for to restore and minimize a content editor web part. But where do I put that code? (I'm a power user, not a developer.)

Tudor said...

The code should be added as a javascript code inside the page. Therefore, you could add another content editor webpart, edit it's html source (the second button, just below the one you use to edit it's content) and embed the code above like this:



<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>

<script type="text/javascript">
//insert the code here
</script>



The first <script> tag is a reference to the jquery source code, while the second one contains our code. The content editor webpart holding the code above will be invisibile because it doesn't output anything visible in the browser.

You could also download a copy of the jquery script from jquery.com and store it locally, to avoid accessing external resources.


Hope it helps!
Tudor

Anonymous said...

That worked perfectly. Thank you very much!

Anonymous said...

Tudor, me again (Anonymous from 25 April, but actually Scott). The function suddenly stopped working today. I am using it as written, accessing http://jqueryui.com/latest/jquery-1.2.3.js. If I can't navigate my browser to that link (website unavailable), could that be the problem?
Scott

Tudor said...

Hi Scott,

Yes, it seems that jqueryui.com is down. You could download the files from here and reference them locally to avoid relying on jqueryui.com, or you could reference the js file directly from googlecode, as there can be a pretty good chance the browse has already cached the script from a previous page request.

Anonymous said...

Thanks Tudor. jqueryui.com is up again today and my script is working again, but I'll ask our IT team to install it locally.
Scott