Hiding the SharePoint 2010 Ribbon for Readers – A Proof of Concept

February 5th, 2011

In SharePoint 2010 publishing sites, the ribbon is the new way of life for authors. However for readers, the ribbon provides very little, if any, functionality. A few days ago, I was asked about hiding this empty space by a client. Their current 2010 master page had the ribbon moved to a custom position on their publishing sites. They had also suppressed the breadcrumb/folder navigation in the ribbon; thus for a typical reader view, there was no ribbon contents that would be displayed. However, the space on the page where the ribbon would live for authors still remained as empty space!

We very well could have developed some server-side logic to determine the permissions of the user and hide that area completely based on that. Given infinite time and resources, I probably would have opted for that solution.

However, several of us were tasked with coming up with an easier and simpler solution to implement. One of the other consultants in the room at the time suggested a solution using JavaScript to hide the area if no contents was found (i.e. if the ribbon hadn’t rendered anything for the reader). I thought it was a great idea and immediately opened up an out-of-the-box publishing site in SharePoint Designer to tinker and develop a bit of JavaScript.

The goal of my JavaScript POC was to hide the entire div tag containing the SharePoint out-of-the-box ribbon control. I investigated and discovered that, in the nightandday.master file, the ribbon is contained in a div with the ID s4-ribbonrow. With that ID, I would be able to hide that div based on its rendered HTML contents. I figured, for this example, that the existence of the text “Browse” would be enough to determine whether or not the ribbon had rendered something or not.

To do this, I added JavaScript code to nightandday.master and it worked like a charm. Below is the relevant excerpt of nightandday.master:

<div id="s4-ribbonrow" ...>
    <!-- SharePoint out-of-the-box Ribbon Controls & Code goes here -->
</div>
<script type="text/javascript">
    var ribbonRow = document.getElementById("s4-ribbonrow");
    if(ribbonRow.innerHTML.indexOf("Browse") == -1)
    {
        ribbonRow.style.display = "none";
    }
</script>

I should note that I only was able to spend about 30 minutes on this entire topic. Please treat the above code as a proof-of-concept and make sure to evaluate the impact or effectiveness of this code in your own environment before using it.

Tags: , , , ,

3 Responses to “Hiding the SharePoint 2010 Ribbon for Readers – A Proof of Concept”

  1. Gurudatta Says:

    Hi,
    I used your code, site administrator is not getting ribbon on subsites but on home page it is coming.

  2. Iain Says:

    Thanks for this. Did you ever try this with a list web part on the page? The Ribbon DIV seems to to be tied up to the method MS use to provide scroll bars on the page, so can’t be security trimmed out (as then there will be no scrollbars), but using a technique that changes the DOM as you have causes the whole to description section to disappear on IE7 systems when the scoll bars are used.

    Argh!

  3. Steve Mayes Says:

    Hi Lain,

    I did not try this with a list web part on the page, no. There certainly may be use cases where this doesn’t work as expected – thanks for the heads up!

    Steve

Leave a Reply