All posts in jQuery

Quick Tip – jQuery click to expand / collapse Quicklaunch – UPDATED 20/06/2012


Hello everyone, following on from the previous Quick Tip I have yet another cool little snippet of jQuery code to enable a manually collapsable quicklaunch.  Many users who have downloaded my Metro UI masterpage commented if there was a way to have the hover quicklauch accordion replaced with a clickable version.  Well your requests have been answered and below is a snippet that will work on any v4.master page.  I have included some comments within the source code to help you out.

I hope that this code is what you were hoping for, and i will soon be updating the Metro Masterpage for Farm Solutions to include an option to choose your accordion type and a Metro UI version of the code.

As always comments / issues always welcome :)

UPDATE 20/06/2012.

Thanks to Anastacia for pointing out the issue with the script in Firefox.  I have updated the script to fix this issue by placing the anchor in a different location and updating the rest of the script. Please use the new script above which solves the issue.  Chris


iGoogle UI for SharePoint – Part Three: Saving WebPart states using Cookies

Series Content

  1.     Part One – Overview, Concept,  HTML Structure & jQuery Basics
  2.     Part Two – Dragging, Dropping,  Sorting and Collapsing
  3.     Part Three – Saving WebPart states using Cookies – Current Article
  4.     Part Four – Control Adapters
  5.     Part Five – SharePoint 2010 Integration
  6.     Part Six – Bringing it all together
  7.     Bonus – Saving WebPart States using the Client Object Model


In Part Three we will take the code from our previous post and enable the page to remember the state of the various settings that we have applied such as the WebPart positions, the order, and minimise states and the webpart header colours.


For this post we will require a new javascript library to help manage the Cookies stored for each user.  This library has been already included at the bottom of the existing demo’s.  This time however we will finally use it.  This Post will contain a lot of new Javascript and I will try my best to explain all of the items.

Saving the Position

The First thing that we will do is to Save the Position of all of the widgets at different times in the page life-cycle.  The first thing we need to do is dynamically set the Zones setting previously defined in previous posts. as well as add another setting into the definition to store the Cookie settings.

This parameter was left blank on purpose to give the script the maximum flexibility.  So to find out where the widgets are we need to find out what “zones” that the widgets are occupying.  To do this we will create a new function called “defineZones” which will be used to iterate through the DOM and create a comma separated list of zones and their ID’s.  Now a Zone in this tutorial is the ID associated with each column.

The full function is shown below. We will then dive into the details of the code.

Lines 6 – 9 goes through all of the columns defined in the settings.columns property and then creates the string based on the current items ID.  In line 11 i then set the dynamic string to the zones parameter only after trimming the end of the string again.

Now that we have a set of defined zones we need to now set up a new function to save the state of all the widgets contained with each column.

This new function SaveState does the following actions.  To this method we will add first create a new reference to our global object and then we update the Badge Details in-case something new has changed.

We then create a new cookie with the setCookie() method which will use the positionCookie setting to store the cookie key and then call the GetPositionState() method which will return the positions as a comma separated & pipe separated list.

The GetPositionState() method firstly gets a local array of all of the zones we found using the previous method and add it into a new zone variable. Then we create a blank string value to store our positions.  Next we loop through each zone and for that we use the jQuery sortable methods with the “toArray” parameter which will get a comma seperated list of all of the zones and seperate each zone with a pipe character.  Finally we will create a javascript alert of the widgetPositions found.

Next we place the SaveState(); method call into the remove button event handler, as well as the stop method of the makeSortable method so that when we remove or move a widget on the page it will provide us with the new position.

At this stage we now can save the position of each widget when we close and move them on the page between columns.

Retrieving the Position & Order

The next step is to now to retrieve the position of the locations when you load the page so that the widgets appear in their previous positions.  To do this we need to firstly create a new method in our iSharePoint Namespace called loadStateFromCookie. This method will do two things.  Firstly it will load the position state from the cookie and place it into a variable, and then it will pass this to another method ProcessWidgetPositionData which will place the widgets in the correct locations.

As you can see we firstly get a reference to the settings and the local jQuery object.  We then set a custom variable PositionStates to the cookie value by using the getCookie method.  We then pass this into the ProcessWidgetPositionData method and then finally we update the badge method which will ensure that the number of “closed” widgets is correct.  We will now dissect the processing function.

This method is quite long but is easier than it appears.  As we have done for each method so far we need to get our local references to jQuery etc, and then we need to check that we have received some data in the PositionStates variable.  Next we need to split the array of values which we created in the SaveState() method back into an array so that we can loop through them.  We will also need to get the array of zones defined so that we can match up each of the arrays.

Next step is to loop through each of positions in the order array and perform two important tasks.  The first task is to place the correct widgets in their correct columns and then the next step is to ensure that they are in the correct order in that column.  We will firstly tackle the positions:

What this first part of the function does is loops through all of the widgets on the page when it loads and search if the current widget is found in the order variable (using the .search method, if an item is not found then it will return -1) then we want to add that item to the current column (defined in the zonearray).  NOTE: Because we are in control of the order that values are saved into the cookie the retrieval of the items can be predictable.

The next step is to then reorder the widgets in the current column.

This will again ensure that there is a value in the current order value (there can be a column with no items) and then it will split the widget values into an array.   We now have an array of values which are in the order that they were saved so we can now process the array by appending the widgets in the current column again but this time in the correct order.  Simple. :)  The complete code for this method is shown below:



To view a demo of where we have got to thus far click here

Saving the Collapsed State

The next step is to save the collapsed state of each of the widgets on the page.  The first step is to modify the SaveState(); function to include the following line at the end.

This line does what it say and sets the minimiseCookie to the value that is returned from the GetMinimisedState() method.  The GetMinimisedState() is a new method which is going to be added outside of the iSharePoint namespace and will simply go through each widget which has the minimised class attached to it and add it to an array.

That’s it for saving the collapsed state ..nice and simple.

Retrieving the Collapsed State

To retrieve the collapse state is also another simple addition.  To do this we will load the state from the cookie set above and then for each of the widgets defined in the array it will set them to minimised and collapse the widget.

So the first step is to modify the loadStateFromCookie function to include two lines.  The first line is to set a local variable “MinimisedStates” to the cookie value:

the next step is then to process that data by passing it into a ProcessMinimiseData() method.

What this processing method does is split the array of MinimiseStates and then for each item in that array it will locate the widget with that ID.

If there is a widget in the array it will perform a slideToggle and then add the minimised class to the current widget.  The final step to this piece of the puzzle is to ensure that when you click on the button to minimise each widget is to run the save state method.  To do this we just modify the buttonFunctions method with the highlighted item below.

That’s it for this section. :)


To view a demo of where we have got to thus far click here

Saving the Colour

This section we will save the current colour set in the webparts colour settings panel.  As we built in previous posts the colour widget can be any colour you can think of so we need to find a way to process this data on the fly.  Once again like above we need to modify the SaveState(); function to include another line at the end.

Like before this will set the cookie to the output from the GetWidetColor method.  This method simply goes through each widget and gets the value that is stored in the text box with the class iColorPicker.

When the method loops through each text box it will also pipe delimit the widget id along with the colour so we are able to match them up on retrieval.  Next step..getting the colour back on load.

Retrieving the Colour

To retrieve the colour of the widget is very similar to the previous “retrieve” methods. To do this we will load the state from the cookie set above and then for each of the widgets defined in the array it will set them to colour defined and then re-color the widget.

So the first step is to modify the loadStateFromCookie function to include two lines.  The first line is to set a local variable “ColorStates” to the cookie value:

the next step is then to process that data by passing it into a ProcessWidgetColorData() method.

What this processing method does is split the array of ColorStats and then for each item in that array it will find the widget with that ID using jQuery.Find() and set the Text Box Value, CSS and Handle Selector CSS.   The first couple of lines should be all too familiar by this point.  Below is the full method:

That is all that is required for the colour modifications..we are almost done now :)


To view a demo of where we have got to thus far click here

Resetting Layout

The final step we need to implement for the base functionality is the ability for the user to “reset” his / her layout back to the predefined default.  To do this we need to add 5 lines of javascript into the buttonFunctions method into the reset button click event.

All this does (its pretty obvious) is delete each of the user set cookies and loop through each colour picker text box and clear the values which will reset the colours.


So that’s the end of part 3 of this blog series.  It has been quite a long one but i hope that you have all learned something from this and can see how easy it is to combine jQuery and HTML to create a really great interface.  The full js for this post is shown below.  I will be hoping to get the next posts completed faster next time.  Please leave your comments..they are always appreciated.

Quick Tip – jQuery Collapsable WebParts for SharePoint 2010


Following on from the previous Quick Tip I have another cool little snippet of jQuery code to enable collapsable WebParts on SharePoint Pages.  Again like before the following code uses the OOTB v4.master so may not work if you have customised your design or used custom WebPart Control Adapters to change the formatting of WebParts.

So lets get started.  Below is the standard HTML format of how SharePoint renders a WebPart.  I have cut out unnecessary js that was in the actual source to make things cleaner.

As you can see there are alot of tables which are nested.  The table that we are interested in is this one:

This table has two rows.  The First row contains the header of the webpart which is where we are going to put our minimise handler, and the second row is the section we are going to “hide” in Javascript.  So firstly we need to inject our minimise handler into the WebPart titles <h3> tag.  To do this we need a single line of jQuery.

What this line does is firstly gets all the .s4-wpTopTable instances and within that element gets the h3 tag from within the first TR.  It then appends a custom div with some inline style to float it right with a class of “min”.  We have also used some of SharePoints built in images to reduce the number of assets required.

The next step is to now hook into the new handler that we have created above. I will create a couple of new variables to store the images that we are going to use for the collapse and expand buttons.

As you can see above i have hooked into our dynamically created handler with the class “.handler”.  When i click the item it will trigger the function and perform the following “if ” statement which i have compressed to a single line.  First i find the closest .s4-wpTopTable element which will always be the parent of the handler.  Then i want to get the first TR for that table and then go to the next row and toggle the state to be visible / hidden.  I then check the status and if it is visible then show the collapse image otherwise show the expand one.  Simple as that.

Here is the full script:

Hope this helps people to extend their SharePoint environments.  When i have written the next stage of the drag and drop piece which covers saving the WebPart states then I will update this post to include that functionality.


Quick Tip – jQuery Accordion for SharePoint 2010 Quick Launch


I thought that i would share a quick piece of code that you can use on your SharePoint sites to change the Quicklaunch from a standard view to an “accordion” style version using jQuery. The following code uses the OOTB v4.master so may not work if you have customised your design. (Changes to selectors should be all that would be required to get it working with your own design)

As you can see the jQuery is pretty simple. Firstly we need to get a reference to the jQuery library. (we have the version hosted with Microsoft. If you have a server which does not have internet access, you will need to download and reference a locally stored version of the library).

Next is to hide all of the children of the quicklaunch items so we are left with just the headings.

The Next step is to capture when the user hovers over the headings. When they do this they need to find the first anchor tag in the current <li> element and for the next element in the DOM (which is the UL) perform a slide toggle which will animate the accordion. When you hover the mouse off the item the alternate function is run the same code again which will reverse the accordion.

The final step is to add a count of the number of children into each of the headings. This will provide the end user with an indicator telling them an item as some hidden items. So with the current child <ul> we need to get the parent item (the heading) and get the text inside the anchor tag. To this anchor tag we append the number of items using the $this.children().length code block.

Finally you need to insert this into your masterpage using SharePoint Designer and thats it. I hope this quick tip was useful. I will hopefully be adding some more soon.

Please let me know how you get on.

Metro UI – SharePoint 2010 Masterpage & Solution : UPDATED


So today i have released onto Codeplex a SharePoint 2010 Masterpage design which is inspired from the Metro UI of Windows 8.  The design has the following features:

  • Liquid Layout
  • Cufon Integration
  • Jquery Accordion Quicklaunch with Sub Item Count
  • Full Solution with single Site Feature to activate branding (Thanks CKS:Dev Team)
  • Custom Site Settings Action to choose one of three colour schemes (Green, Blue & Red)

If you would please leave me comments be it positive or negative they are all welcome.  I hope you enjoy and if you come across any bugs please let me know and i can fix them.


To download the wsp please click here and get it from our CodePlex Site.  Enjoy :)