I had an issue recently, where I was using a selector to add menu tabs to the edge of the content area. Getting them to appear wasn't the issue. Getting them NOT to appear on admin overlays was.
The body class on which my selector was based didn't change when an admin overlay covered the page. It was still .front. So, how to do the equivalent of the following pseudo-code?
if body class = front but not an admin overlay?
What DOES change in the markup is the html tag. It has the class
overlay-open
when the admin overlay is present. So, given that, how do we select the body from
ul {display: inline-block}
li {vertical-align: middle; list-style: none; height: 80px; display: inline-table; max-width: 80px;
a {vertical-align: middle; display: table-cell; height: 100%;
but not
<html class="overlay-open">
<body class="front">
<body>
<html>
'not' is the answer. Or, more precisely, '.not'. There are, of course, many ways to finagle the desired selection in jQuery. In this case, we can use .not to tell jQuery what we don't want along with what we do.
$('html').not('.overlay-open').find('body.front')
will return the body, unless the admin overlay is present, in which case it will return nothing.