Many of us are required to create master-pages that hide the ribbon part but still enable using it when in admin mode.
One way to do it would be to surround the ribbon area in the master-page with an SPSecurityTrimmedControl and show that part only when administrators are connected to the page, but that method makes life a little hard because whenever you want to check the design you are not able to see the page as a simple user sees it unless you actually log in as a different user. Moreover, you are required to Check-In\Out the page\css\js to see the changes with a simple user.
In this post I would like to show you the way to add the Keyboard Shortcut Ctrl + G as an option to Toggle (Show and Hide) the SharePoint Ribbon part of the Master Page. This means that the ribbon will be hidden by default and any user can activate it by knowing and\or the Key Combination of Ctrl + G.
The part we will be hiding\showing
- jQuery (To enable the code to run)
- jQuery Cookie plugin (To enable saving the ribbon state between post-backs)
- Some custom code (To perform the changing of the ribbon state)
- Some custom css to add to a style sheet (only 1 line)
// This file needs to come with the following files:
// jQuery.js
// jQuery.cookie.js
//
// Also the following css needs to be added to the masterpage css:
// style.css : #s4-ribbonrow { display:none; }
var RibbonDisplayCookieName = "ESSCKI_DisplayMode";
var CtrlGControlsToHide = "#s4-ribbonrow";
// Adding functionality to catch 'ctrl' key press combo
$.ctrl = function(key, callback, args) {
$(document).keydown(function(e) {
if(!args) args=[]; // IE barks when args is null
if(e.keyCode == key.charCodeAt(0) && e.ctrlKey) {
callback.apply(this, args);
return false;
}
});
};
// 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>");
Last Component - CSS
As it is stated in the snippet above, you need to add the following css rule to a css file on the page:
#s4-ribbonrow { display:none; }
Please note two things:
- The css you are adding this file needs to appear before the js code file
- If the jQuery code does not work, you should try adding var $j = jQuery.noConflict(); to the code snippet and change all $ occurrences to $j.
Hope you find this helpful :)






















