CODEWITHSUNDEEP
javascriptjquery
Kidra
Kidra

Reputation: 115

Ignoring overflow:hidden elements in jQuery

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?

Upvotes: 0

Views: 875

Answers (3)

Muhammad Usman
Muhammad Usman

Reputation: 12503

Live demo: http://jsfiddle.net/ZYP8Z/

//for example I am selecting divs
 $(function(){
    $('div').each(function(){
        if($(this).css('overflow')!='hidden')
            alert($(this).html()); //your action
    });
 });

Upvotes: 0

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123367

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(...);

Upvotes: 1

Anand
Anand

Reputation: 14915

Yes, there is ...

$("*").each(function(){
 //only pick those element from DOM whose css has overflow not equal to hidden
 if($(this).css("overflow") != "hidden"){
   //do your logic
 }
});

For more JQuery Selectors, please see the following link

http://api.jquery.com/category/selectors/

Upvotes: 0

Related Questions