Concept – Quick Hide / Show of the Ribbon
I had an idea the other day to come up with a nice way to keep the ribbon away when I don’t really want to use it or see it. This is a basic concept of the idea which could use cleaning up or expanding upon. It’s a little snippet of jQuery that hides’ and shows the ribbon when the user click on an arrow in the top left corner.
Something like this.
and when you click the arrow the ribbon would hide.
ok so to accomplish this you can either put this in your Masterpage or in a CEWP. The first line reference jQuery API and the second referencing our script.
so the custom script can be downloaded here.
The top two lines of the script point to images files for the arrow. I’m using pretty crappy images in the picture above so they are not worth posting. Download or make two unique images and modify those top two lines in the script.
The rest of the script is basic just four functions FlipArrow, IsRibbonOpen, CloseRibbon and OpenRibbon. If you’d like to change the CSS of the arrow then take a look at line 7 of the ribbonUtil.js file.
I have all the position, height and width, of the arrow images in there. So if you do plan to change them out them you’ll need to specify the height and width of your image file in there.
So this concept is pretty simple. It could be expanded out to save the state of the ribbon between pages, either by cookie or session variable. Also you could do something a little more graphically appealing. If you do try it out let me know how it goes.
Paul
Hello,
Do you also have the Css file for this amazing script (or a download package)?
I would love to use this.
Thomas Daly
Hi, It doesn’t require any CSS. All the for this example were baked into the script. You just need the 1 .js file, and two images of arrows (1 up and 1 down).
Here is the url of the script file that you need.
http://beta.bandrsolutions.com/TomBlogFiles/ribbonUtil.js
Download or make and two arrow images, there are tons of them available searching the web.
If you have any trouble following the post just reply back with any issues. gl!
James
O IC, that can be added to the tag on the master page. Perfect, thanks again!
James
I ended up doing it another way. I added
{
CloseRibbon()
}
before var arrowHtml and it did the trick. You can see the ribbon close on page load but it works.
Thomas Daly
Oh .. I just realized that the first thing was stripped out..
<style>
#s4-ribbonrow { display: none; }
</style>
James
Thanks for the reply Thomas,
I tried as you suggested but no luck. I receive an Invalid character (line 1 char 1) error from the page when adding #s4-ribbonrow { display: none; } at the top of the .js file
Thanks again
James
Great post, exactly what I was looking for. Do you know a way of making the ribbon closed when the page loads?
Thomas Daly
Glad the post was useful. To start the ribbon closed is actually very easy with a couple changes.
add this to the top of the ribbonUtil.js
#s4-ribbonrow { display: none; }
and then change two items in the row > var arrowHtml =
1) see where is says class=’open’ , change that to close=’closed’
2) and where is says arrowDown , change that to arrowUp