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