Omitting Drupal's admin overlay from selectors

28 March, 2024

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.

  • tip icon. tip
  • D9

    /themes/custom/tac/images/tag-icons/d9-logo.svg
    Drupal 9
    Drupal 9

    D8

    /themes/custom/tac/images/tag-icons/d8-logo.svg
    Drupal 8
    Drupal 8

Login or Register to Comment!