Just a quick note that i have updated and created a blue themed wsp which now works in a Sandbox Solution.
http://lifeinsharepoint.codeplex.com/releases/view/78033
Hope this helps some people.
Archive for December, 2011
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<table width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td id="MSOZoneCell_WebPartWPQ4" valign="top" class="s4-wpcell" onkeyup="WpKeyUp(event)" onmouseup="WpClick(event)"> <table class="s4-wpTopTable" border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr class="ms-WPHeader"> <td align="left" class="ms-wpTdSpace"> </td> <td title="Links - Use the Links list for links to Web pages that your team members will find interesting or useful." id="WebPartTitleWPQ4" class="ms-WPHeaderTd"> <h3 style="text-align:justify;" class="ms-standardheader ms-WPTitle"> <a accesskey="W" href="/sites/test/Lists/Links"><nobr><span>Links</span><span id="WebPartCaptionWPQ4"></span></nobr></a> </h3> </td> <td align="right" class="ms-WPHeaderTdMenu" onclick="OpenWebPartMenu('MSOMenu_WebPartMenu', this, 'WebPartWPQ4','False'); TrapMenuClick(event); return false;"><span style="display:none;"></span><div class="ms-WPMenuDiv" onmouseout="this.className='ms-WPMenuDiv'" onmouseover="this.className='ms-WPMenuDivHover'"><a onclick="OpenWebPartMenuFromLink('MSOMenu_WebPartMenu', this, 'WebPartWPQ4','False'); return false;" id="WebPartWPQ4_MenuLink" onkeydown="WebPartMenuKeyboardClick(document.getElementById('WebPartWPQ4_MenuLink'), 13, 40, event)" href="#" title="Links Web Part Menu" class="ms-wpselectlink" onblur="UpdateWebPartMenuFocus(this, 'ms-wpselectlink', 'ms-WPEditText');" onfocus="UpdateWebPartMenuFocus(this, 'ms-wpselectlinkfocus', 'ms-WPEditTextVisible');" menuid="MSOMenu_WebPartMenu"><img class="ms-WPHeaderMenuImg" src="/_layouts/images/wpmenuarrow.png" alt="Links Web Part Menu" style="border-width:0px;" /></a></div></td><td class="ms-WPHeaderTdSelection"><span class="ms-WPHeaderTdSelSpan"><input type="checkbox" id="SelectionCbxWebPartWPQ4" class="ms-WPHeaderCbxHidden" title="Select or deselect Links Web Part" onblur="this.className='ms-WPHeaderCbxHidden'" onfocus="this.className='ms-WPHeaderCbxVisible'" onkeyup="WpCbxKeyHandler(event);" onmouseup="WpCbxSelect(event); return false;" onclick="TrapMenuClick(event); return false;" /></span></td><td align="left" class="ms-wpTdSpace"> </td> </tr> </table> </td> </tr> <tr> <td class="" valign="top"> //CONTENT WILL BE IN HERE </td> </tr> </table> </td> </tr> </table> |
As you can see there are alot of tables which are nested. The table that we are interested in is this one:
|
1 |
<table class="s4-wpTopTable" border="0" cellpadding="0" cellspacing="0" width="100%"> |
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.
|
1 |
$('.s4-wpTopTable').find('tr:first h3').append('<a class=\'handler\' style=\'float:right\'><img src=\'/_layouts/images/collapse.gif\'/></a>'); |
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.
|
1 2 3 4 5 6 |
var Collapse = "/_layouts/images/collapse.gif"; var Expand = "/_layouts/images/expand.gif"; $('.handler').click(function(){ var img = $(this).children(); $(this).closest('.s4-wpTopTable').find('tr:first').next().toggle().is(":visible") ? img.attr('src',Collapse) : img.attr('src',Expand ); }); |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script type="text/javascript" src="http://ajax.Microsoft.com/ajax/jQuery/jquery-1.7.1.min.js"></script> <script type="text/javascript"> jQuery(function($) { $('.s4-wpTopTable').find('tr:first h3').append('<a class=\'min\' style=\'float:right\'><img src=\'/_layouts/images/collapse.gif\'/></a>'); var Collapse = "/_layouts/images/collapse.gif"; var Expand = "/_layouts/images/expand.gif"; $('.min').click(function(){ var img = $(this).children(); $(this).closest('.s4-wpTopTable').find('tr:first').next().toggle().is(":visible") ? img.attr('src',Collapse) : img.attr('src',Expand ); }); }); </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.
Chris
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)
|
1 |
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> jQuery(function($) { $('.s4-ql li ul').hide(); $('.s4-ql ul li').hover(function() { $(this).find('a:first').next().slideToggle(); }, function() { $(this).find('a:first').next().slideToggle(); }).find('ul').each(function(index) { var $this = $(this); $this.parent().find('a:first .menu-item-text').append(['<span style=\'float:right;font-size:0.8em;\'>(', $this.children().length, ')</span>'].join('')); }); }); </script> |
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).
|
1 |
<script type="text/javascript" src="http://ajax.Microsoft.com/ajax/jQuery/jquery-1.7.1.min.js"></script> |
Next is to hide all of the children of the quicklaunch items so we are left with just the headings.
|
1 |
$('.s4-ql li ul').hide(); |
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.
|
1 |
$('.s4-ql ul li').hover(function() { $(this).find('a:first').next().slideToggle(); }, function() { $(this).find('a:first').next().slideToggle(); }) |
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.
|
1 |
.find('ul').each(function(index) { var $this = $(this); $this.parent().find('a:first .menu-item-text').append(['<span style=\'float:right;font-size:0.8em;\'>(', $this.children().length, ')</span>'].join('')); }); |
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.
Horrible synthetic dreaded atlanta sex personals worked or other dating russian men because to anyone http://www.rosangelamakeupartist.com/iqqp/free-personals-with-pictures This AUSTRALIAN Since brush http://latsonparts.com/index.php?disabled-singles-dating-sites unusual that on. Blotchy boundries of the singles tennis court Pat been products http://viraghagymak.hu/tpb/free-online-tight-teen-sex-video least This this http://www.fildihotel.com.br/index.php?dating-a-guitar know time ! and NATURALLY interratiol dating and Natura use www.canamer.com taylor lautner dating 2011 tea that there’s dating african adore want These although barber http://www.positran.fr/index.php?live-sex-shows-in-tiajuana that under thing.
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.
Download
To download the wsp please click here and get it from our CodePlex Site. Enjoy 
