Question

I’m using jQuery to calculate highlight masks for DOM elements for a webapp with in-page editing. Since elements can change dimensions, the mask is calculated dynamically on hover.

One of the elements is an image scroller, so has an overflow:hidden with images inside an extra wide div. The problem i’m having is getting jQuery to ignore elements with overflow:hidden in its width/height calculations.

In short: is there a jQuery selector to ignore DOM nodes hidden by overflow?

Answer 1

you could create a custom jQuery selector, like even or odd and you can name it notOverflowHidden

$.expr[':'].notOverflowHidden = function(obj){
   return ($(obj).css('overflow') !== 'hidden');
};

and you can get a collection of nodes with overflow property not hidden like so:

$('div:notOverflowHidden').each(...);