SharePoint 2010 Ribbon Hide/{Show on Library Item Selecting or other event}

Question

I am branding SharePoint 2010, and I hide the Ribbon by default and show when the user clicks a down arrow. The user can hide it again by clicking a hide icon. JQuery toggle and toggleClass work great

    <div id="ribbonHide">
        <a class="toolTipHover" href="#">
            <div class="downArrowSmall" onclick="JavaScript:$('#s4-ribbonrow').toggle();$(this).toggleClass('downArrowSmall upArrowSmall');">
                <span class="ribbonHideToolTipOpen">Display the Ribbon</span><span class="ribbonHideToolTipClose">Hide the Ribbon</span>
            </div>
        </a>
    </div>

The problem is when a user clicks on a library item's selector checkbox, the entire header row disappears, because it's replaced when the Ribbon selects the Library Tools tab/Library pane. But the Ribbon is still hidden. So is the site header banner.

Question: How can I listen for page events (any) that trigger a change in the Ribbon so I can display it again?

Thanks!

score 4 · Accepted Answer · answered Jul 16 '11 at 21:37

4

OK, I'm back to this. The answer is to change the id of the s4-titlerow div in the masterpage and CSS. This hides it from the Ribbon positioning system.

Then, to keep the Ribbon positioning system from breaking my layout after you've clicked around some tabs and the Ribbon is again hidden, I added a call to the Ribbon's own "fixer" function in my Ribbon show/hide script:

<div id="ribbonHide">
    <a class="toolTipHover" href="#">
        <div class="downArrowSmall" onclick="JavaScript:$('#s4-ribbonrow').toggle();$(this).toggleClass('downArrowSmall upArrowSmall');FixRibbonAndWorkspaceDimensions();">
            <span class="ribbonHideToolTipOpen">Display the Ribbon</span> <span class="ribbonHideToolTipClose">
                Hide the Ribbon</span>
        </div>
    </a>
</div>

I couldn't be happier with this simple solution, and using the Ribbon against itself!

answered Jul 16 '11 at 21:37

Chris Kissinger

181
1
11

Will you be kind enough to share how you styled the up and down arrow and the corresponding text as users toggle the ribbon on and off please? Would mean a lot! – Athapali Nov 07 '12 at 17:48
Sorry I never revisited this thread. I used sprites for the arrows, and a hover trick for the spans: .downArrowSmall { position:absolute; height:10px; width:10px; background-image:url('/_layouts/images/fgimg.png'); background-position:-2px -632px; background-repeat:no-repeat; } .upArrowSmall { position:absolute; height:10px; width:10px; background-image:url('/_layouts/images/fgimg.png'); background-position:0px -445px; background-repeat:no-repeat; } – Chris Kissinger Apr 30 '13 at 15:42
a.toolTipHover { position:relative; display:block; z-index:24; } a.toolTipHover span { display:none; } a.toolTipHover:hover .downArrowSmall .ribbonHideToolTipOpen { position:relative; display:inline-block; white-space:nowrap; top:2em; left:2em; border:1px solid gray; color:#FFFFFF; } a.toolTipHover:hover .upArrowSmall .ribbonHideToolTipClose { position:relative; display:inline-block; white-space:nowrap; top:2em; left:2em; border:1px solid gray; color:#FFFFFF; } – Chris Kissinger Apr 30 '13 at 15:44

SharePoint 2010 Ribbon Hide/{Show on Library Item Selecting or other event}

1 Answers1