What I have decided to do is to break this into sections so that you can both understand the changes made as well as consume them independently.
All of the scripts you will need to build out this entire solution are included here: Scripts.zip
In this installment, we will be talking about how to move the Ribbon and in addition how to Show/Hide the ribbon on demand. The ribbon in its default state is located at the very top of your browser and is always visible:
What we want to do is to move the ribbon so that it is closer to the content we are editing. Like this:
As you can also see next to the social icons above the ribbon, is the link that will Show/Hide our ribbon on demand. By default the ribbon is displayed. This decision was made so that your users would always see the ribbon until they are comfortable with the action of hiding it until they need it.
If we examine the origin source code included in v4.master we will see that the ribbon Div block begins on line 59:
[Line 59]<div id=”s4-ribbonrow”>
[Line 270]</div>
Copy this entire block of script, delete it and relocate it to your desired location. In the case of this demonstration, the ribbon was located just below the GlobalNavigation row. [Line 247 (after deleting block above)].
The next step in the customizations made to the Ribbon was the ability to Show/Hide the ribbon. The code necessary to make this happen was discovered on a site by Jourdan Laik. His post can be referenced here: http://blog.concurrency.com/sharepoint/hide-sharepoint-ribbon/
What we need to do is to upload the jQuery-1.4.3.min library and Jourdains SP2010_RibbonToggler.js to the Scripts library in our Resources Library.
The Files
The MasterPage modification
The following <span> tag is included in our masterpage:
<span id="sr" style="font-size:9pt; margin-bottom:-3px; vertical-align:text-bottom;"></span>
What is important about this span is the ID: “sr”. This id is calling to a variable contained in the SP2010_RibbonToggler.js script. Here is the script block that makes this all happen:
function ShowRibbon() {
$('#s4-ribbonrow').show();
//$('#s4-workspace').height($(document $('#s4-ribbonrow').height() * 2);
$('#s4-workspace').height($(document).height()-$('#s4-ribbonrow').height() * 2);
$('#sr').html('<a href="javascript:HideRibbon();">Hide Ribbon</a>');
}
function HideRibbon() {
$('#s4-ribbonrow').hide();
var newHeight = $(document).height();
if($.browser.msie) { newHeight = newHeight -3; }
$('#s4-workspace').height(newHeight);
$('#sr').html('<a href="javascript:ShowRibbon();">Show Ribbon</a>');
}
$(document).ready(function() {
if (readCookie('RibbonShow') == null)
{
createCookie('RibbonShow', 1);
ShowRibbon();
} else if (readCookie('RibbonShow') == 1) {
ShowRibbon();
} else {
createCookie('RibbonShow', 0);
HideRibbon();
}
In pt3, we will be covering the addtion of the QuickLinks.
