Posted tagged ‘jQuery and SharePoint’

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 (, 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.
    <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;>
  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.

    }, function()


  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

Add Some “Sex Appeal” with Silverlight and JQuery

January 23, 2009

Most of you are hopefully aware of Jan’s “SmartTools” for SharePoint on codeplex: However just in case you aren’t I highly recommend taking a look at them. Recently Jan uploaded new versions of these tools (, and I have personally used some to spread ideas or awareness of what silverlight/jquery can do in SharePoint (along with a few tweaks of my own).

One thing that’s really nice about the silverlight chart controls (as an example) is how they can generate ‘sex appeal’ for that presentation or proposal you are working on. It’s one thing to see functionality, and potential, but when you see cool charts, graphs, and interactive elements it normally generates alot of good excitement, and since Jan’s done most of the work to give you some examples (thanks Jan ;)) you just need to install, do a bit of configuration and voila, you have some cool content features that you can actually use right away.

There are plenty of other great silverlight and jquery projects and extensions for SharePoint out there as well.

Some Other Silverlight posts or projects I recommend taking a gander at:

  1. (Silverlight Blueprint for SharePoint)
  2. (Great article on using Silverlight WebPart’s and an exaple media player one.)
  3. (SharePoint Silverlight Browser)

Some Other jQuery posts or projects I recommend taking a gander at:

  1. (Good intro and real solution for a SharePoint Issue using jQuery)
  2.,guid,c26d2d3f-f389-44d7-bd8f-2fae5c8a1415.aspx (Example of how to use it for a ‘select all’ functionality.
  3. (Inject JS and CSS fragments based on context of page.)

If you haven’t played with Silverlight or jQuery yet then hopefully this will help motivate you, or help you understand some ways it can be used (with minimal effort),
Richard Harbridge