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:

after:

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

Wow… long time since i blogged. Thank god I'm going to the Dutch DevDays to see Scott Hanselman’s session called “How to make your blog suck less” :)

So here is an update of mine about how to use JQuery in SharePoint to do some fancy tricks. I’ll post some more of these tricks later on and I’ll try to be more active as a blogger again. (In which I’ll probably fail)

Have you ever tried to change some of SharePoint's default controls like the image picker?

Well I have. My customer wanted a image picker that worked exactly like the normal one except for 1 change. It shouldn’t show the selected image as an image but it should only show the URL of the selected image. I tried to change this at server side first by inheriting from the default SharePoint image picker control. This was a rather annoying job as i didn’t seem to get the right result this way. you cannot extend the rich image picker from sharepoint but only the default image picker that doesn’t have the image library function behind it.

When i was looking at the html that was rendered by SharePoint i thought it would be easier to change the html with jquery as with serverside code and this is the result. just save this source to a .js file and include it into your masterpage or aspx page and all selected images in the image picker will be changed to only show the url of the image.

///<reference path="jquery-1.3.2.min-vsdoc.js" />

$(document).ready(function() {

    HideImages();

});

function HideImages() {

    $("span[id $= '_RichImageField_ImageFieldDisplay']").each(function() {

        var url = $(this).find("img").attr("src");

        $(this).find("a").hide();

        $(this).append("<span class='imgurl'>" + url + "</span>");

        $(this).find("a").each(function() {

            $(this).find("img").each(function() {

                $(this).load(function() {

                    $(this).parent().hide();

                    var imgurl = $(this).attr("src");

                    $(this).parent().parent().find(".imgurl").text(imgurl);

                });

            });

        });

    });

}

It’s as easy as that.

More JQuery fun to post in the future.

Geert van der Cruijsen