Combined power of SharePoint and JQuery part 2: Changing the SharePoint webpart edit menu position

By Geert van der Cruijsen at May 20, 2010 22:55
Filed Under: Asp.net, SharePoint, JQuery

Have you ever had the problem using SharePoint 2007 that when you create small webpart zones that the edit button disappeared because the title of the webpart was to long? I ran into this problem at my current project and instead of shortening down the titles i came up with the idea of changing the position of the edit button to be on the left of the title. when the button is on the left and the title is on the right the title will be trimmed automatically since the webpart zones have a fixed length.

In your server side code it’s really hard to change these kinds of things because this is standard SharePoint functionality and you can’t change it server side. So the solution is to fix it using javascript and to make that easier I’m using JQuery.

first I’ll show you the results below and then how I did it using a small JQuery script.

before:

sharepointjquery1

after:

sharepointjquery2

Below is the JQuery script to change the position of the edit menu to the left. the only thing you have to do is save this code to a js file, include the reference to the js file and a reference to the JQuery library js file on your masterpage and you’re done.

   1: $(document).ready(function() {
   2:     SPEditMenuFix();
   3: });
   4:  
   5: function SPEditMenuFix() {
   6:     $(".ms-WPHeader").each(function() {
   7:         var first = $(this).children("td:first").clone(true);
   8:         var last = $(this).children("td:last").clone(true);
   9:         $(this).children("td:first").replaceWith(last);
  10:         $(this).children("td:last").replaceWith(first);
  11:     });
  12: }

Enjoy!

Geert van der Cruijsen