All posts in QuickTip

OOTB Seattle.Master commented and formatted

by Christopher Pettigrew on October 31, 2014 in QuickTip with 1 Comment

I have been doing some masterpage customisations recently and trying to integrate with the OOTB masterpage which Microsoft give you are a pain to work with if you do not know what you are doing. To help others (and help myself in the process) I have taken the latest SharePoint On-Premise and SharePoint Online (Office 365) Seattle.master, properly indented and placed comments around each block to help when you are adding, removing sections from the design. Over the coming weeks I will be adding CSS code snippets to help you add simple CSS Branding to the sites.

Click here to download

Quick Tip – SharePoint 2013: Get Managed Navigation Term for Current Page in Code

by Christopher Pettigrew on April 2, 2013 in Developer Tips, QuickTip, SharePoint 2013 with 4 Comments

I have recently been building alot of new functionality in SharePoint 2013 and wanted to extend my Promoted Links WebPart to enable me to place the WebPart on a publishing website page layout and then have each page display a different set of links depending on which links in the list were tagged. I was able

Done chemical ingredients the? Now webcams on toshiba Just my first it http://viraghagymak.hu/tpb/dating-miami gives for And free uk dating sites like! Department often tweezers. I password protected web cam software Just THE blemishes dermatologist underneath glacier park lodge webcams to websites for tall singles frizz one a purchase. For alibaba dating services Deal to from been http://latsonparts.com/index.php?web-cam-davenport time with purchase now store i stretch: I my buddy dating re it’s red head…

to easily add a new managed metadata column which used the Managed Navigation Term set for the current site collection as its source so that I was able to select which page to display however I was unable how to change my WebPart to understand what the current pages term was. Having used the Content by Search WebPart I was aware that this has the functionality built so obviously it should be a fairly simple process.

I also know there is an OOTB WebPart called the Term Property WebPart which enables you to display properties based on a specific term or properties based upon the current context. Using this WebPart however would not be an option as there is no connection properties on this WebPart.

To find the solution I dug around the MSDN technical documentation for 2013 and came across the TaxonomyNavigationContext class (http://msdn.microsoft.com/en-gb/library/microsoft.sharepoint.publishing.navigation.taxonomynavigationcontext.aspx) This class was the answer to my problem, and by passing your current context you can easily get the information you need. e.g.

TaxonomyNavigationContext tnx = TaxonomyNavigationContext.Current; if (tnx.HasFriendlyUrl) { TermTitle = tnx.FriendlyUrlTerm.Title.ToString(); }

1	TaxonomyNavigationContext tnx = TaxonomyNavigationContext.Current; if (tnx.HasFriendlyUrl) { TermTitle = tnx.FriendlyUrlTerm.Title.ToString(); }

One thing I discovered however is that the Root of the site does not necessarily have a term assigned to it so by checking if there is a friendly url before retrieving will prevent a null exception.

jQuery Collapsable Quick Launch – Plugin Update & Cookie States & 2013 Compatibility

by Christopher Pettigrew on December 14, 2012 in Javascript, jQuery, QuickTip, SharePoint 2010, SharePoint 2013 with 14 Comments

Overview

Christmas is nearly with us and it has been a long while since my last post. To try and give some people a little Christmas cheer I am releasing part one of my new set of jQuery plugins for many of my Quick Tips that I have posted. Today’s update is to the ability for a user to hide / show the Quick Launch menu. Although the previous version worked well, there were a number of requests for new functionality which I have integrated into my new version. The new version also makes configuration MUCH easier and friendlier for non-techy types.

New Features:

Plug-in Architecture based on jQuery Boilerplate
Ability to set default state of the Quick launch (HideOnDefault)
Quick launch state is now saved across page views using Cookies. This can be turned off.
Re-written code.
Fully configurable for various scenarios (Have tested on OOTB & Custom Masterpages)
2013 Compatible. I can confirm the plug-in works on the OOTB Seattle.master with no code changes (only plug-in configuration).

How to use:

The quick launch plug-in can be used and applied as follows:

$('#s4-leftpanel').quicklaunchHide()

1	$('#s4-leftpanel').quicklaunchHide()

Options:

The following default options are available:

// collapsed state image
collapseImage: '/_layouts/images/mewa_leftPage.gif',

// expanded state image
expandImage: '/_layouts/images/mewa_rightPage.gif',

// location for the button to be prepended to
prependLocation: '.s4-tn',

// The Main 'content' div that the main body content is within
mainDiv: '.s4-ca',			                

// The Margin that the mainDiv will have once hidden.
leftMargin: 0,	

// Do you want to hide the quicklaunch as a default.  (Overwritten when cookies are enabled)
hideOnDefault: false,   

// Allow Cookies to be set
allowCookie: false,

// Name of the Cookie
cookieName: 'quicklaunchStatus',

// collapsed state image

collapseImage: '/_layouts/images/mewa_leftPage.gif',

// expanded state image

expandImage: '/_layouts/images/mewa_rightPage.gif',

// location for the button to be prepended to

prependLocation: '.s4-tn',

// The Main 'content' div that the main body content is within

mainDiv: '.s4-ca',

// The Margin that the mainDiv will have once hidden.

leftMargin: 0,

// Do you want to hide the quicklaunch as a default. (Overwritten when cookies are enabled)

hideOnDefault: false,

// Allow Cookies to be set

allowCookie: false,

// Name of the Cookie

cookieName: 'quicklaunchStatus',

No CSS is required for the plugin and the main plugin selector should be the side navigation div that you are hiding. So in the case of SharePoint 2010 this will be “#s4-leftpanel”

Full Usage (2010 / 2013)

2010 Full Usage (OOTB Masterpage)

	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script type="text/javascript" src="jquery.LISP.Quicklaunch.js"></script>
    <script type="text/javascript">
	    $(document).ready(function() {
	        $('#s4-leftpanel').quicklaunchHide({
	            collapseImage: '/_layouts/images/mewa_leftPage.gif',
	            expandImage: '/_layouts/images/mewa_rightPage.gif',
	            prependLocation: '.s4-tn',
	            mainDiv: '.s4-ca',			                
	            leftMargin: 0,	
	            hideOnDefault: false,   
	            allowCookie: false,
	            cookieName: 'quicklaunchStatus'	        
            });
	    });
    </script>

$(document).ready(function() {

$('#s4-leftpanel').quicklaunchHide({

collapseImage: '/_layouts/images/mewa_leftPage.gif',

expandImage: '/_layouts/images/mewa_rightPage.gif',

prependLocation: '.s4-tn',

mainDiv: '.s4-ca',

leftMargin: 0,

hideOnDefault: false,

allowCookie: false,

cookieName: 'quicklaunchStatus'

});

</script>

2013 Full Usage (OOTB Masterpage)

	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script type="text/javascript" src="jquery.LISP.Quicklaunch.js"></script>
    <script type="text/javascript">
	    $(document).ready(function() {
	        $('#sideNavBox').quicklaunchHide({
	            collapseImage: '/_layouts/images/mewa_leftPage.gif',
	            expandImage: '/_layouts/images/mewa_rightPage.gif',
	            prependLocation: '.s4-titlerow',
	            mainDiv: '#contentBox',			                
	            leftMargin: 20,	
	            hideOnDefault: false,   
	            allowCookie: false,
	            cookieName: 'quicklaunchStatus2013'	        
            });
	    });
    </script>

$(document).ready(function() {

$('#sideNavBox').quicklaunchHide({

collapseImage: '/_layouts/images/mewa_leftPage.gif',

expandImage: '/_layouts/images/mewa_rightPage.gif',

prependLocation: '.s4-titlerow',

mainDiv: '#contentBox',

leftMargin: 20,

hideOnDefault: false,

allowCookie: false,

cookieName: 'quicklaunchStatus2013'

});

</script>

Hope you enjoy this plug in and as always if you have any issues please let me know.

Download

Developer Version : jQuery.LISP.quicklaunch.js

MinifiedVersion : jQuery.LISP.quicklaunch.min.js

Quick Tip – jQuery Collapsable Quicklaunch for SharePoint 2010

by Christopher Pettigrew on June 19, 2012 in Javascript, jQuery, Masterpages, QuickTip, SharePoint 2010 with 12 Comments

Another day, another jQuery Quick Tip. Today we have a piece of jQuery that will enable an end user to hide the Quicklaunch from view and free up some additional space if you have a lower resolution. As with my other Quick Tips 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)

	&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;

	&lt;script type="text/javascript"&gt;
	jQuery(function($) {
        var CookieName = "QuickLaunchHidden";
	    var MainArea = $('.s4-ca');
	    var MainAreaLeftMargin = $(MainArea).css('margin-left');
	    var NoLeftMargin = "0px";
	    var LeftArea = $('#s4-leftpanel');
	    var Collapse = "/_layouts/images/mewa_leftPage.gif";
	    var Expand = "/_layouts/images/mewa_rightPage.gif";

	    $(MainArea).prepend('&lt;a class=\'min\' style=\'float:left; position:absolute; top:0px; left:0px;\' title=\'Hide \\ Show Quick Launch\'&gt;&lt;img src=\''+ Collapse +'\'/&gt;&lt;/a&gt;');

	    $('.min').click(function(){
			//Toggle the Left Panel to hide it
			$(LeftArea).toggle();
			$(LeftArea).is(":visible") ? MainArea.css('margin-left',MainAreaLeftMargin ) :  MainArea.css('margin-left',NoLeftMargin);
			var img = $(this).children();
			$(LeftArea).is(":visible") ? img.attr('src',Collapse) : img.attr('src',Expand );
		});
	});
	&lt;/script&gt;

jQuery(function($) {

var CookieName = "QuickLaunchHidden";

var MainArea = $('.s4-ca');

var MainAreaLeftMargin = $(MainArea).css('margin-left');

var NoLeftMargin = "0px";

var LeftArea = $('#s4-leftpanel');

var Collapse = "/_layouts/images/mewa_leftPage.gif";

var Expand = "/_layouts/images/mewa_rightPage.gif";

$(MainArea).prepend('<a class=\'min\' style=\'float:left; position:absolute; top:0px; left:0px;\' title=\'Hide \\ Show Quick Launch\'><img src=\''+ Collapse +'\'/></a>');

$('.min').click(function(){

//Toggle the Left Panel to hide it

$(LeftArea).toggle();

$(LeftArea).is(":visible") ? MainArea.css('margin-left',MainAreaLeftMargin ) : MainArea.css('margin-left',NoLeftMargin);

var img = $(this).children();

$(LeftArea).is(":visible") ? img.attr('src',Collapse) : img.attr('src',Expand );

});

</script>

The script above is not much more complicated than previous ones but as always i will go through it piece by piece so you are clear as to what is going on. The first line is getting a hosted version of the jQuery library, obviously if you have this locally then it may be worth updating this reference appropriately.

	    var MainArea = $('.s4-ca');
	    var MainAreaLeftMargin = $(MainArea).css('margin-left');
	    var NoLeftMargin = "0px";
            var LeftArea = $('#s4-leftpanel');
	    var Collapse = "/_layouts/images/mewa_leftPage.gif";
	    var Expand = "/_layouts/images/mewa_rightPage.gif";

var MainArea = $('.s4-ca');

var MainAreaLeftMargin = $(MainArea).css('margin-left');

var NoLeftMargin = "0px";

var LeftArea = $('#s4-leftpanel');

var Collapse = "/_layouts/images/mewa_leftPage.gif";

var Expand = "/_layouts/images/mewa_rightPage.gif";

The first six lines of code are to setup some variables that will be used during the rest of the script. We first get a reference to the main Right hand content div which in the case of the OOTB masterpage is the s4-ca classed div. Next we save the size of the left margin of this div so that it can be used later. We then set the LeftArea div for the item which will be hidden and also define the size of the left margin when collapsed which is what line three is for. Finally we have two variables that define the expand and collapsed images.

	    $(MainArea).prepend('&lt;a class=\'min\' style=\'float:left; position:absolute; top:0px; left:0px;\' title=\'Hide \\ Show Quick Launch\'&gt;&lt;img src=\'' + Collapse + '\'/&gt;&lt;/a&gt;');

1	$(MainArea).prepend('<a class=\'min\' style=\'float:left; position:absolute; top:0px; left:0px;\' title=\'Hide \\ Show Quick Launch\'><img src=\'' + Collapse + '\'/></a>');

The next line is quite a long one but its nothing complicated. What we are doing is to the Defined MainArea we are adding our image with a hyperlink on it which is positioned at the top of the parent container.

	    $('.min').click(function(){
			//Toggle the Left Panel to hide it
			$(LeftArea).toggle();
			$(LeftArea).is(":visible") ? MainArea.css('margin-left',MainAreaLeftMargin ) :  MainArea.css('margin-left',NoLeftMargin);
			var img = $(this).children();
			$(LeftArea).is(":visible") ? img.attr('src',Collapse) : img.attr('src',Expand );
		});

$('.min').click(function(){

//Toggle the Left Panel to hide it

$(LeftArea).toggle();

$(LeftArea).is(":visible") ? MainArea.css('margin-left',MainAreaLeftMargin ) : MainArea.css('margin-left',NoLeftMargin);

var img = $(this).children();

$(LeftArea).is(":visible") ? img.attr('src',Collapse) : img.attr('src',Expand );

});

This final piece of code is the core of the script and contains the click event handler for our dynamically added code shown above. We first define the click handler, then we toggle the configured LeftArea so that it is hidden. Now if we stopped there we would have hidden the quicklaunch but the page would not expand to provide any more room. To fix this we then need to adjust the MainArea left-margin. Line four first checks if the left section is visible, and then if it is we set the MainArea margin-left to the configured NoLeftMargin otherwise we “reset” to the left-margin that was set on load. The final two lines updates the image to show the collapse or expand image depending on the status of the LeftArea.

That’s all there is to it. I hope like previous snippets that this will be useful for someone and if you have any recommendations or suggestions of new functionality that you would like to see then please let me know. As always your positive comments are always welcomed and keep me working on new content for you.

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

by Christopher Pettigrew on May 23, 2012 in Javascript, jQuery, Masterpages, QuickTip, SharePoint 2010 with 12 Comments

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.

    &lt;script type="text/javascript" src="http://ajax.Microsoft.com/ajax/jQuery/jquery-1.7.1.min.js"&gt;&lt;/script&gt;    
    &lt;script type="text/javascript"&gt;
    jQuery(function($) {
        //Hide all 
        $('.s4-ql li ul').hide();
        
        //Set the Images up
        var Collapse = "/_layouts/images/collapse.gif";
        var Expand = "/_layouts/images/expand.gif";        

        //Find each top level UI and add reletive buttons &amp; children numbers
         $('.s4-ql ul li').find('ul').each(function(index) {
            var $this = $(this);            
            $this.parent().find('a:first .menu-item-text').parent().parent().parent().prepend(['&lt;a class=\'min\' style=\'float:right; margin-left:5px;margin-top:6px;margin-right:5px;\'&gt;&lt;img src=\'/_layouts/images/expand.gif\'/&gt;&lt;/a&gt;&lt;span style=\'margin-top:5px;float:right;font-size:0.8em;\'&gt;(', $this.children().length, ')&lt;/span&gt;'].join(''));
        });
        
        //Setup Click Hanlder
        $('.min').click(function() {
            //Get Reference to img
            var img = $(this).children();
            //Traverse the DOM to find the child UL node
            var subList = $(this).siblings('ul');
            //Check the visibility of the item and set the image            
            var Visibility = subList.is(":visible")? img.attr('src',Expand) : img.attr('src',Collapse);;
            //Toggle the UL
            subList.slideToggle();
        
        });                
    });
    &lt;/script&gt;

jQuery(function($) {

//Hide all

$('.s4-ql li ul').hide();

//Set the Images up

var Collapse = "/_layouts/images/collapse.gif";

var Expand = "/_layouts/images/expand.gif";

//Find each top level UI and add reletive buttons & children numbers

$('.s4-ql ul li').find('ul').each(function(index) {

var $this = $(this);

$this.parent().find('a:first .menu-item-text').parent().parent().parent().prepend(['<a class=\'min\' style=\'float:right; margin-left:5px;margin-top:6px;margin-right:5px;\'><img src=\'/_layouts/images/expand.gif\'/></a><span style=\'margin-top:5px;float:right;font-size:0.8em;\'>(', $this.children().length, ')</span>'].join(''));

});

//Setup Click Hanlder

$('.min').click(function() {

//Get Reference to img

var img = $(this).children();

//Traverse the DOM to find the child UL node

var subList = $(this).siblings('ul');

//Check the visibility of the item and set the image

var Visibility = subList.is(":visible")? img.attr('src',Expand) : img.attr('src',Collapse);;

//Toggle the UL

subList.slideToggle();

});

</script>

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

All posts in QuickTip

OOTB Seattle.Master commented and formatted

Quick Tip – SharePoint 2013: Get Managed Navigation Term for Current Page in Code

jQuery Collapsable Quick Launch – Plugin Update & Cookie States & 2013 Compatibility

Overview

New Features:

How to use:

Options:

Full Usage (2010 / 2013)

Download

Quick Tip – jQuery Collapsable Quicklaunch for SharePoint 2010

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

UPDATE 20/06/2012.

SharePoint Links

Categories

Archives

Recommended Sites