Is there a way to detect if there is an image in a lower z-index?

Question

Our site has a typical multi-level drop down menu. So it's on a fixed DIV at a high z-index. (Eg. the Wordpress admin. The text colours for each link are black with a transparent background.) The problem is that on some pages, these menu items are hard to read because there may be an image underneath so the transparent background makes the text obscured.

Is there a way for the menu item to detect that there is an image (or a div with a similar dark colour) at a lower z-index in the same position? That way, I could use JS or jQuery to conditionally style the to a lighter colour for just those menu items on those specific pages.

In CSS there is the mix-blend-mode property, which doesn't work for images, but that's kinda what I'm looking for---a way to detect the underlying color and adjust the color of the text accordingly so that it's always legible.

Yes it could be done but isn't a quick one liner to answer this. Use a background — charlietfl, Jun 15 '16 at 23:37
Not an option. The whole theme is based on the transparent look. — jchwebdev, Jun 15 '16 at 23:40
What about masking images when menu opens? Would be much simpler — charlietfl, Jun 15 '16 at 23:42

score 1 · Answer 1 · edited May 23 '17 at 12:08

1

Using only javascript you could start here: Getting the z-index of a DIV in JavaScript?

Because you want to fint the z-index of multiple items at once, it would be easier if you used jQuery see here: https://api.jqueryui.com/zIndex/

With jQuery you could select elements that fall within a certain area of the screen defined by the bounding box of the image below and have a greater z-index value and add a class to them that removes the transparent quality.

As @charlietfl noted in the comments, it's a lot of work for something that could be achieved much more simply.

edited May 23 '17 at 12:08

Community

1
1

answered Jun 15 '16 at 23:41

grateful

1,128
13
25

(sigh) Fine. I assumed jQuery was on the table. I'll add it to my question. Regardless, what I need is to be able to -detect- the color of the pixels on lower z-indexes--if it's darker or not. There must be a plug-in or algo for that sort of thing. After all there is a mix-blend-mode in CSS... it's just that it doesn't work for images. – jchwebdev Jun 15 '16 at 23:54
This might be useful to you - https://www.sitepoint.com/javascript-generate-lighter-darker-color/ – grateful Jun 16 '16 at 00:10

Is there a way to detect if there is an image in a lower z-index?

1 Answers1