How to Hide the SharePoint 2010 Ribbon

If you're creating a Web site and using SharePoint 2010 as a Content Management System platform, perhaps your first challenege as a designer is what to do with that ribbon that is smack-dab in the way of your nice custom layout? At first it seems to be a challenge: For unauthenticated users the ribbon makes no sense and is irrelevant. Your first thought may be to get rid of it entirely. But then, we still need the functionality for users who are authenticated (in order to edit their content) – so we can't get rid of it. What do we do?

 

There is a solution that fits the needs of designers, developers, their clients and their end-users: Enter the SP2010 Ribbon Toggler! Toggle it with a keystroke, querystring, or a button. Let's implement it:

 

How to do it

 

1. Open an editor of your choice to create a new .js file and paste the following code into it:

 function ShowRibbon() {
$('#s4-ribbonrow').show();
$('#s4-workspace').height($(document).height() – $('#s4-ribbonrow').height() * 2);
}

function HideRibbon() {
$('#s4-ribbonrow').hide();
var newHeight = $(document).height();
if ($.browser.msie) { newHeight = newHeight – 3; }
$('#s4-workspace').height(newHeight);
}

 

2. Save your .js file as SP2010_RibbonToggler.js.
3. Open up SharePoint Designer and browse to your root site.
4. In the left tool pane called "Site Objects" click on "Site Assets."
5. In the top tool bar, select "Import Files" and import the .js file you created. (If you'd like to create a separate "scripts" folder within Site Assets, or organize it in any way you'd like, now's the time.)
6. In the left tool pane again select "Master Pages."
7. Open the Master Page that you're using for your Site. In most cases you're probably using v4.master.
8. In the HTML markup, find the section and place the following JavaScript references within the head section:

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
< script type="text/javascript" src="/SiteAssets/SP2010_RibbonToggler.js"></script>

 

Note: We're first here referencing the jQuery framework. Our code uses this framework to easily and quickly access the Document Object across differing browers. We then reference our SP2010_RibbonToggler.js file. Remember to change the reference path if you put your SP2010_RibbonToggler.js file in a different location than instructed to at the beginning of this tutorial.

We now have two functions in our SharePoint site for turning on and off the ribbon! Now we just need to implement some Javascript code to use these functions. The sky's the limit for how you want to accomplish this. At Concurrency, we like to use a keystroke combination (ctrl+shift+r) to pop up the ribbon. Here's how to do that:

In your SP2010_RibbonToggler.js file, at the following code to it:

$(document).keydown(function (e) {
if (e.keyCode == 17) { ks = "a"; return false; }
if (e.keyCode == 16) { if (ks == "a") { ks = ks + "b"; return false; } }
if (e.keyCode == 82) {
if (ks == "ab") {
ks = "";
if($('#s4-ribbonrow').css('display')=="none") {
//show
ShowRibbon();
} else {
//hide
HideRibbon();
}
return false;
}
}
return true;
});

 

Additional ways to toggle

Another way to turn on and off the ribbon now is by passing a query string to the page. If we append ?ribn=1 to our site address at any time, the ribbon will show. This is how to do that:

In your SP2010_RibbonToggler.js file, at the following code to it:

$(document).ready(function(){
if(getParameterByName('ribn')=="1″) {
ShowRibbon();
} else {
HideRibbon();
}
});

function getParameterByName(name) {
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regexS = "[\\?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.href);
if (results == null)
return "";
else
return decodeURIComponent(results[1].replace(/\+/g, " "));
}

 

Or perhaps you only want to show the ribbon if the user has authenticated to SharePoint? Here's how to do that:

In your SP2010_RibbonToggler.js file, at the following code to it:

 

$(document).ready(function(){
if (typeof _spUserId == "undefined") {
HideRibbon();
}else {
ShowRibbon();
}
});

 

In fact, you can add all of these examples to your SP2010_RibbonToggler.js file and they will all work together for you. Wouldn't if be nice if you could download a fully functional .js file with all this working? It would…