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!

Answer 1

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!