SharePoint 2013 hide elements (in body area ) when ribbon is expanded / ribbon is in use

Question

Is there a css class/id in SharePoint 2013 that hide elements when the ribbon is in use?

I've got some elements that I don't want to show when the user's in edit mode!

In the picture below you can see that the ribbon is expanded (shown in red). IF the ribbon is expanded I want to hide the menu shown in blue cross. This is just an example!

To clarify what I mean with "ribbon is in use", that the ribbon is expanded (show picture marked as red):

Ex: the pagetitle ( #s4-titlerow ) get's hidden .. ( .s4-titlerowhidetitle )

I know I can manage this with some javascript by checking the "active" ribbon tab. But isn't there a cleaner way?

Answer 1

I know you asked for 2013 but I'm leaving the 2010 one here too in case anyone go crazy like you did.

2010

When any ribbon tab is open (other than the 'browse' one) it forces a 135px height on its container, which is a sibling of the #s4-workspace container, see where I am going?

#s4-ribbonrow[style='height: 135px;'] ~ #s4-workspace #s4-leftpanel {
    display: none;
}

This will hide the #s4-leftpanel only when the ribbon is stretched to the 135px height.

2013

Same deal but simpler, gladly we get an actual class in the #s4-titlerow container:

#s4-titlerow.s4-titlerowhidetitle ~ #contentRow #sideNavBox {
        display: none;
}

The general sibling selector ~ is IE7+ and the attribute selector IE8+ so even without testing it there it should do the trick on IE8+.

That was fun to put together, thank you!

Answer 2

If the idea is that some content should "fall behind" the Ribbon (such as a header, navigation, etc.) you can just place your markup in the with the ID "s4-titlerow".

This gets automatically hidden when the Ribbon displays, giving the effect that the Ribbon falls "on top" of the content.

Otherwise, I would give a try to any of the script proposed answers.

Answer 3

this function:

function IsRibbonHidden()
{
return document.getElementById('RibbonContainer_activeTabId').value == "Ribbon.Read";
}

will return true when the ribbon is inactive, and false when it expanded (or null when the ribbon is absent). You can attach a javascript event receiver and hide/unhide the left menu depending on what the function returns.

Answer 4

I needed to hide the Edit Item option. So, I identified the id for that tag and had hidden it.

For Edit Item the id was Ribbon.ListItem.Manage.EditProperties-Large (you can easily check it from inspector tool in FireFox). And then doing $("#Ribbon.ListItem.Manage.EditProperties-Large").hide() worked.

Answer 5

If you want to force this type of behaviour for users, then F.Aquino's solution is what you need.

Otherwise, there is one out-of-the-box solution for users: use the "Focus on Content" button on the top-right side of the ribbon.