Archive for August 2009

jQuery Hover for Multiple Buttons/Images

August 13, 2009

It’s been awhile since I have posted something with code up here. I figured a small post on a simple jQuery exercise that might help someone out.

The goal of this exercise is simple:
We want to have a hover effect to make ‘grey’ images become ‘colored’ when the mouse hovers over them.

The tools we will need:
jQuery library (http://jquery.com/), a webpage and some -grey and -clr (color) images.
Here are a few we will use in this exercise.

Here are some fun additional challenges I am going to toss in:
We will be doing this on a SharePoint welcome page which has the content (images etc) in a rich text field control. That means you can’t add any JavaScript where the images are being shown.

Solution Steps:
Here’s where I will go through how you can do this (pretty darned easily) and some simple recommendations.

  1. First you need to have a welcome page in SharePoint (or a generic html page). Then you are going to add image references. Each image should be named CONSISTENTLY. That way our code can be really simple and generic (which all developers love). As an example the ‘greyed out’ images will be named “Whatever -grey.gif” where the “-grey” is consistent. I added the hyphen in the off chance that when we replace the -grey later on, there might be a -grey somewhere else in the URL (unlikely, but should make it unique; if you really want to go the extra mile you could even use a GUID).As for the ‘coloured’ images we will name these “Whatever -clr.gif” where again -clr is consistent.What we get then is basically a bunch of <img> tags pointing to -grey to start us off. In this case we will add the following code to our normal rich text field control on the welcome page.
    <DIV>TIPS AND TRICKS</DIV>
    <DIV>
    <IMG class=“ColourChange” alt=“Word 2007” src=https://webaddress/IconImages/MS-Word-grey.gif&#8221;>
    <IMG class=“ColourChange” alt=“Outlook 2007” src=https://webaddress/IconImages/MS-Outlk-grey.gif&#8221;>
    <IMG class=“ColourChange” alt=“Excel 2007” src=https://webaddress/IconImages/MS-Excel-grey.gif&#8221;>
    <IMG class=“ColourChange” alt=“OneNote 2007” src=https://webaddress/IconImages/MS-Note-grey.gif&#8221;>
    </DIV>
  2. You need to add the jQuery library reference to the page. You can do this via inserting it into the masterpage, page layout, or into something like a content editor webpart. For this example I will just toss it, as well as the script I will be using into a Content Editor WebPart (CEWP).
    <script type=‘text/javascript’ src=https://webaddress/_layouts/ThirdParty/JavaScript/jquery.js&#8217;></script>
    (Can be anywhere, just giving example).
  3. Add this code to either a CEWP, Master Page, or Page Layout (as defined earlier). So that when the objects with a class assignment of ColourChange are hovered over they change their source image.
    <script>
    $(document).ready(function(){
    $(“.ColourChange”).hover(function()
    {

    $(this).attr(“src”,$(this).attr(“src”).replace(‘-grey’,‘-clr’));
    }, function()
    {

    $(this).attr(“src”,$(this).attr(“src”).replace(‘-clr’,‘-grey’));
    });
    });

    </script>
  4. All done. Even if new images are added as long as we assign the appropriate class and ensure the script is running our hover effects should all be consistent.

This was a pretty specific example but the important things to note here were that we wanted consistent naming conventions so that we could write a fairly generic script to change the src attribute of any object with the ColourChange class. In our example we used a replace to accomplish this. You could have just as easily changed the position, size, or other things as well.

We also have HTML code that is flat and simple without any need for onmouseover events, or (IMO) bad things like that. So the code was clean and simple (as well as accepted by picky controls like the Rich Text Field control in SharePoint) and the script was pretty simple and clean.

Hope this helps someone,
Richard Harbridge

Site Managers (Expectations, Roles and Responsibilities)

August 12, 2009

Just linking to a guest post I did for End User SharePoint: http://www.endusersharepoint.com/?p=1881

Here is the opening from the article:

A challenge with SharePoint for site managers, site administrators, or site owners is understanding their own role, it’s responsibilities, and what expectations come with being a ‘site owner, manager, or administrator’.

Before I go into what you can do from a Governance perspective, and related challenges I would like to use a quote from Mark Miller (from this article on user adoption and the success of this site ) that I think perfectly summarizes the ‘job’ of a site manager.

“Your job as a site manager isn’t to provide all the content for your site. Your job is to take care of and nurture those that will.” – Mark Miller

I would love to hear any feedback anyone has. So don’t hesitate to talk to me on twitter, comment here or on EUSP, or via carrier pigeon.

Hope this helps,
Richard Harbridge

Closing (or X’ing) is not Deleting Webparts

August 4, 2009

SharePoint WebPart pages often have ‘Closed’ WebParts being loaded everytime the page loads because the page editor may have incorrectly ‘closed’ a WebPart rather than ‘deleting’ the WebPart. (Or never removes it after closing it.)
close

Everyone who works with SharePoint sees and most likely runs into this (often :().
This is by no means ‘new’. In fact it’s been around since back in the 2003 days and here are a couple good posts that already exist on it:

The point being you can easily fix this for all your pages by adding the ?contents=1 to each page and managing it that way (see linked articles above for description of how this works, or my previous post: https://sharepointkb.wordpress.com/2008/07/25/sharepoint-webpart-error/) or you can add each closed webpart individually (using the advanced webpart pane). The why this is a good thing is pretty straight forward, it provides you with a way to restore webparts just in case you didn’t mean to ‘remove’ them from the page.

The why you should go through ALL of your landing pages, home pages, or often updated pages and do this ‘clean up’ work *regularly* (until it’s no longer an issue) is because it still retrieves these webparts (and all their lovely properties) when it loads the page, it just doesn’t render them to the end user. This makes for much slower response rates and can be easily improved.

So seriously, if you read this and haven’t checked how many closed webparts are on your pages (in the past month) go do that right now and clean them up. Set up a scheduled task each week to do this, write a script, or train people to manage page content so that it doesn’t happen anymore. Do anything but leave it alone. Then tell other people, and make this one of those checks you do when working with pages. You will be surprised by how much it can often help page load times.

Let’s also hope that Microsoft makes these ‘closed’ parts expire in the future… since recycling bin already does this. *nudge nudge* *wink wink* to MS.

Hope this helps,
Richard Harbridge