We are experts on the entire Microsoft enterprise product stack. These are Microsoft technologies we regularly deploy. We provide real business value through strategic guidance, technical expertise, and knowledge transfer.

As an IT systems integrator, our expertise is putting all the pieces together to get the job done, so we never have to take “no” for an answer. We help organizations improve business productivity in any department.

We provide solutions customized to the needs of your industry. Whatever your industry or product, we can provide project, service, process, and content management solutions—to increase productivity and IT value.

+1 (866) 930-8356
Concurreny
Real Microsoft expertise. Real business value.

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…

This article was originally written by Jordan Laik. It is moderated currently by Mark Rentmeester.

 
 

Mark Rentmeester heads Concurrency’s Business Process Management practice. He has been a lead in software development and consulting teams for the past 15 years with a focus on applications with integration to line of business systems. His core areas of interest are BPM planning and systems architecture with ASP.NET, WCF, and SQL Server.

Find Mark on: Linkedin Twitter

 
  • http://www.genevievesolutions.com Christopher

    Hi!

    re: Concurrency’s SharePoint 2010 Ribbon Toggler

    I love the simplicity of this solution. I am just getting started with *BRANDING* Sharepoint. It’s fun! JQUERY is really neat!

    If you would be so kind, I keep getting errors with my home created javascript file and I am not able to download it from you blog page. (you may wish to check the link.) Might you be able to send me a clean javascript file to info@genevievesolutions.com? Appreciate!

    ~CR

  • http://www.4qtrs.net Les Flue

    Download link doesn’t work. Tried cutting and pasting the code and nothing happens.

    Can you email me the code to les at 4qtrs dot net?

  • http://YourWebsite Tim Farrell

    Can’t seem to get to the source via the download link you provided. Can you send the code via my email please?

    Thank you for your effort on this. Very useful.

    Sincerely,
    Tim

  • Pingback: SPS-Hartford pt2 – The Ribbon | Tim Farrell's Blog

  • http://YourWebsite June

    Agree with others, can’t download file :(

    Can you please send me the code? I made the Ribbon Toggler.js file and copied in the ShowRibbon(), HideRibbon() functions and

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

    Nothing worked. Can you please help?

    Thanks,
    June

  • http://YourWebsite Mark Humpage

    Hi I had the same problem with the downlod and the snippets seem to have some problems too – after a bit of fiddling I got the following to work (note I have removed the functions and incorporated them into the document function)

    // Ribbon toggler (Ctrl – Shift – R)
    $(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
    $(‘#s4-ribbonrow’).show();
    } else {
    //hide
    $(‘#s4-ribbonrow’).hide();

    }
    return false;
    }
    }
    return true;
    });

  • http://YourWebsite Andreas

    Thanks for the code. For those who have had problems implementing it: after you copy and paste the code from this website you need to go through it and make sure that you replace all apostrophes (‘) and quotes (“) as well as minus characters (-) manually. They might look correct when you paste them into your Javascript editor, but they are not. I found the minus symbols in particular tricky, because I thought they couldn’t cause any problems, but they do. Delete them, then enter them again in your editor.

  • http://nonyet zach

    when i click on a webpart or list it chops the master page top links bar off…

  • http://YourWebsite Steve

    I tried doing this as well and I cannot get this to work. I tried everything. I went and deleted all the quotes and double quotes and minus signs and nothing. Can anyone please get back to me. I really need to figure this out.

  • http://YourWebsite Sandesh

    I want ribbon hide on group wise, it means if one group has read only access then ribbon should hide , but i want display log in control so i can sign in different user.

  • http://YourWebsite Lee Wen

    hi, i’ve tried to put the hide ribbon code in an edit form when trigger $(document).ready event. However, the ribbon doesn’t hide after I using the uploadAttach() function, when it back to the edit form after the attachment, it doesn’t trigger the document ready event. Therefore it doesn’t hide the ribbon. Please advice how can I place the code so it could be trigger after attachment.

  • http://www.mymolivos.com/smforum/index.php?action=profile;u=1187304 Winfred Broker

    I was looking through some of your articles on this site and I think this website is rattling informative! Retain posting.

  • http://videos.sapo.pt/2Kti7iAJtzPuzAAvKra4 Brandon Laverette

    This website truly has all the information I needed concerning this subject and didn’t know who to ask.

  • trublonde

    This article is awesome!

    Unfortunately, I can’t download the file either.
    Would you please send me the fully functional “Concurrency’s SharePoint 2010 Ribbon Toggler” source code?
    Thanks!!

    • Marek Wawrzyniak

      trublone, we fixed the link to the download. It should be ready for you. Sorry about the inconvenience, and thank you for letting us know.

  • trublonde

    This article is awesome!

    Unfortunately, I can’t download the file either.
    Would you please send me the fully functional “Concurrency’s SharePoint 2010 Ribbon Toggler” source code?
    Thanks!!

    • Marek Wawrzyniak

      trublone, we fixed the link to the download. It should be ready for you. Sorry about the inconvenience, and thank you for letting us know.

  • James

    Hi There,

    I have taken the script and followed the steps, both .js files from your zip folder are now part of the assets at the root of the page, Having added into the v4 master and the default master head’s the as advised, I cannot seem to hide the ribbons whenever I open an item in a list?

    Can you help?

Categories