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.

Comments
  • Paul
    Posted at 10:43 am January 12, 2012
    Paul
    Reply
    Author

    Hello,

    Do you also have the Css file for this amazing script (or a download package)?

    I would love to use this.

    • Thomas Daly
      Posted at 4:28 pm January 14, 2012
      Thomas Daly
      Reply
      Author

      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
    Posted at 6:02 pm July 26, 2011
    James
    Reply
    Author

    O IC, that can be added to the tag on the master page. Perfect, thanks again!

  • James
    Posted at 4:50 pm July 26, 2011
    James
    Reply
    Author

    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
      Posted at 5:19 pm July 26, 2011
      Thomas Daly
      Reply
      Author

      Oh .. I just realized that the first thing was stripped out..

      <style>
      #s4-ribbonrow { display: none; }
      </style>

  • James
    Posted at 4:34 pm July 26, 2011
    James
    Reply
    Author

    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
    Posted at 5:07 pm July 25, 2011
    James
    Reply
    Author

    Great post, exactly what I was looking for. Do you know a way of making the ribbon closed when the page loads?

    • Thomas Daly
      Posted at 2:32 pm July 26, 2011
      Thomas Daly
      Reply
      Author

      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

  • Leave a Reply