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:
|
1 |
$('#s4-leftpanel').quicklaunchHide() |
Options:
The following default options are available:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
// 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)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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> |
2013 Full Usage (OOTB Masterpage)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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> |
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
Hi, expand/collapse works great in 2010, however, upon collapse, collapse image gets lost somehow and shows up in place of both expand/collapse states. Also, shows up on the top link bar instead of to the right of the quicklaunch.
Hi, expand/collapse works great in 2010, however, upon collapse, collapse image gets lost somehow and “/_layouts/images/plus.gif” shows up in place of both expand/collapse states. Also, shows up on the top link bar instead of to the right of the quicklaunch.
Hi! Sorry, disregard my last comment. I had a conflicting script that was changing the collapse/expand images. Works great, however, I’m still having the issue of the expand/collapse showing up on the top link bar in 2010.
Please disregard all my comments. I’ve had a second look at prepending the image and figured out what was necessary!! sorry!
Tried using this in a standard OOB SP 2013 environment.
I had to change the Image refs to /_layouts/15/images/filename.gif…they didn’t resolve the way you had it for OOB SP2013.
However, I still can’t the collapse to function. I see in Fiddler that the script loads OK, but I never get any collapse/expand buttons.
Does positioning of the script in the master page matter? top of head, and of head, in body?
Can you post an actual sample OOB master page that includes this script?
Hi Chris,
I can not register the quicklaunch plugin and will get this error on sharepoint 2013 (added in seattle.html top of head tag)
Error: Object doesn’t support property or method ‘quicklaunchHide’
I used this code:
$(document).ready(function () {
$(‘#sideNavBox’).quicklaunchHide();
});
Appriciate if you can help me.
I used this code:
$(document).ready(function () {
$(‘#sideNavBox’).quicklaunchHide();
});
I referenced this script : h tt p : / / lifeinsharepoint.co.uk/downloads/javascript/jQuery.LISP.quicklaunch.js and jquery as your post.
Hi Chris,
I’m not a coding person so please…please update the Metro UI – SharePoint 2010 Masterpage & Solution to have this function. I want to be able to collapse the side bar navigation to left or right.
Maybe give some instructions on how to put the script to.
Love this jQuery but having some trouble with it and SP2010 search. Basically, using the toggle while on a search page toggles a large white space between the top link navigation and the content of the page. See screenshot. Has anyone else seen this and/or know of a solution?
http://s8.postimg.org/ec06tel6d/2013_06_20_14h48_56.png
Liam I am also seeing this issue as well as the arrows showing up in modal windows. Any fix to these?
I am unable to get this to work. I pasted the code below how I have it in my masterpage. I included a few lines before and after the code to show where I put it. I put it in the section.
//]]>
//
$(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′
});
});
<!–SPM:–>
Html Master Page
1
https://cohasset.sharepoint.com/sites/test/_catalogs/masterpage/seattle.html, https://cohasset.sharepoint.com/sites/test/_catalogs/masterpage/seattle.html
True
https://cohasset.sharepoint.com/sites/test/_catalogs/masterpage/seattle.html, Conversion successful.
Is this collapsing quicklaunch available in your Metro UI soution? How does it perform on iOS/Mobile devices?
Hi, nice post, I’m not a very good programmer, can you send my a litte step by step guide to implement this in a master page?, please.