CODEWITHSUNDEEP
javascriptprototypejs
user160820
user160820

Reputation: 15220

How can I check if an element is in overflow area?

i have a div with a with of 300px. this DIV contains different Icons and if there are too many Icons then they are not visible due to overflow:hidden How may i programatically check if an icon is visible or is in overflow area?

Upvotes: 2

Views: 226

Answers (3)

DanMan
DanMan

Reputation: 11561

If a node's scrollWidth/Height is higher than it's offsetWidth/Height, then something will be (partially) hidden. It's then a matter of determining which area is hidden through simple math (adding up icon widths, calculating the scroll offset and then eventually checking if an icon is within that visible area).

Upvotes: 0

clockworkgeek
clockworkgeek

Reputation: 37700

I couldn't find anything exactly like that so I wrote a quick library function.

Element.addMethods({
    isClipped: function(element, recursive){
        element = $(element);
        var parent = element.up();
        if ((element === document.body) || !parent) return true;
        var eLeft = element.offsetLeft,
            eRight = eLeft+element.getWidth(),
            eTop = element.offsetTop,
            eBottom = eTop+element.getHeight();
        var pWidth = $R(parent.scrollLeft, parent.getWidth()+parent.scrollLeft),
            pHeight = $R(parent.scrollTop, parent.getHeight()+parent.scrollTop);
        if (!pWidth.include(eLeft) || !pWidth.include(eRight) || !pHeight.include(eTop) || !pHeight.include(eBottom)) {
            return true;
        }

        if (recursive) return parent.isClipped(true);
        return false;
    }
});

It's not elegant (I did say "quick") but it allows you to use isClipped() on any element. You can see a jsfiddle test here. It tests if any part of an element (excluding borders) is part of the overflow. You could do something similar to test for elements that are entirely outside the containing client area.

Upvotes: 3

LanguagesNamedAfterCofee
LanguagesNamedAfterCofee

Reputation: 5952

http://elvingrodriguez.com/overflowed/

It's a jQuery plugin that tells you if an element is overflowed.

Upvotes: 0

Related Questions