Toggle for side nave (quick launch)

Mar 29, 2012 at 2:39 PM

Hi, I've been following your blog and playing with your html5 and jquery code. One question for you, on your toggle the default is set to "show" the side nav. What would be the proper way to "hide" the side nav on page load? I really like this solution as we require only 1 master page. One thing I have been thinking is to add an additional feature at the web level to toggle the "toggle". By doing this, I hope to have the ability to have sites where the side nave is permanently hidden while others the toggle can be enabled by the web feature to hide/show it.

Coordinator
Mar 29, 2012 at 3:25 PM

Hi Karnith.  The modificiation is very easy.  Because the file you need is stored in the content database, we'll need to use SharePoint Designer 2010 in the root of the site where you installed the package.  Browse to the SiteAssets/js folder  there is a file there named HTML5Master.js  On the second line is the default value which is loaded every time a new page is rendered.  Change "true" to  "false" (no quotes).  See the third line below. 

ExecuteOrDelayUntilScriptLoaded($, "sp.js");
// var navIsDisplayed = true;  //This defaults to load page with NavPanel displayed It must be changed to the line below
var navIsDisplayed = false     //This defaults to load page with NavPanel collapsed
var isDialog = false;
$(document).ready(function () {

That should be all you need.  Save your changes and refresh your page in the browser.  Now the default logic is reversed.

Mar 29, 2012 at 3:54 PM

I thought that might be the case and already tried it. I was getting some weird results, but I do have a lot going on in the page. I will try again. Thanks

Coordinator
Mar 29, 2012 at 4:37 PM
Edited Mar 29, 2012 at 4:38 PM

Sorry.  That switches the logic, but not the initial display   Try this as your HTML5Master.js  I tested this in my VM.

 

ExecuteOrDelayUntilScriptLoaded($, "sp.js");

var isDialog = false;

$(document).ready(function () {
    $(".qlexpander.flip").click(function () {
        //alert("navIsDisplayed = "+navIsDisplayed);

        if (navIsDisplayed) {
            $(".panel").toggle();
            // alert("navIsDisplayed is being set to false");
            $("#MSO_ContentTable").css("margin-left", '4px');
            navIsDisplayed = false;
            $("#qlAccordian").prop("title", "→");
        }
        else {
            $(".panel").toggle();
            //alert("navIsDisplayed is being set to true");
            $("#MSO_ContentTable").css("margin-left", '155px');
            navIsDisplayed = true;
            $("#qlAccordian").prop("title", "←");
        }
        return false;
    });
   
    var htmlClass = $('html').attr('class');
    // alert('htmlClass = ' + htmlClass);
    if (htmlClass.indexOf('ms-dialog') != -1) {
        $('#qlAccordian').hide();
    }
    else {
        $('#qlAccordian').show();
    }
    $(".panel").toggle();
    // alert("navIsDisplayed is being set to false");
    $("#MSO_ContentTable").css("margin-left", '4px');
    navIsDisplayed = false;
    $("#qlAccordian").prop("title", "→");

});