none
Show/Hide Ribbon by clicking a Web Part or by using jQuery

    Question

  • I am trying to hide the ribbon by default, but display the ribbon when a user gives focus (clicking) on any web part on a page. There are several sites I have tried to emulate, however, have run into a snag during the implementation. The sites I have found helpful, include:

    The option I am currently working with most is the 2nd choice which utilizes the keyboard keys CTRL-G to show/hide the ribbon. While this is a good solution, it does not address a critical element which is to show the ribbon when a web part is clicked or receives focus. How can I do this?

    Here is the current code to register the CTRL-G keys

    // Registering 'ctrl' + 'G' button press
    $.ctrl('G', function (s) {
        var ribbonElement = $(CtrlGControlsToHide);
        var displayPropValue = (ribbonElement.css('display') == 'none' ? 'block' : 'none');
        ribbonElement.css('display', displayPropValue);
        
        // Set display state for the following hour
        var date = new Date();
        date.setTime(date.getTime() + (60 * 60 * 1000));
        $.cookie(RibbonDisplayCookieName, displayPropValue, { expires: date });
    
    }, ["Control G pressed"]);
    
    // Loading cookie value of ribbon display
    if ($.cookie(RibbonDisplayCookieName) == 'block')
        document.write("<style> " + CtrlGControlsToHide + " { display:block; } </style>");
    
    

    Here is my attempt to show/hide the ribbon when a web part is clicked. Something is wrong with my code below.

                    
    function OnRibbonMinimizedChanged(ribbonMinimized)
     {ULSxSy:;
      var ribbonElement=GetCachedElement("s4-ribbonrow");
      if (ribbonElement)
      {
        if (ribbonMinimized)
        {
            ribbonElement.style.display = "none";
            //alert('None');
            //$(".mysidenav").animate({ 'margin-top': '15px' }, 0);
            
        }
        else
        {
            ribbonElement.style.display = "block";
            //alert('Block');
            
        }
       }
      }

    Tuesday, October 16, 2012 3:25 PM

All replies

  • Hi,

    You dont need any specific Jquery code to achive this.

    Just add a content editor web part to the "AllItems.aspx" page and load a jQuery [no specific code to hide/show ribbon control], you will get the expected behaviour.

    Regards,

    SPGeek03

    Saturday, July 27, 2013 9:46 PM