css - Use jQuery to Detect Container Overflow?

Question

I've seen this question but feel like there has to be a "cleaner" jQuery method of doing this. I'm not even sure if this really works in all scenarios. Is there a way for jQuery to determine if a container has overflow without comparing dimensions?

For clarification, is there a method to test whether the CSS attribute overflow: hidden has kicked in and is hiding content?

Answer 1

$.fn.hasOverflow = function() {
    var $this = $(this);
    var $children = $this.find('*');
    var len = $children.length;

    if (len) {
        var maxWidth = 0;
        var maxHeight = 0
        $children.map(function(){
            maxWidth = Math.max(maxWidth, $(this).outerWidth(true));
            maxHeight = Math.max(maxHeight, $(this).outerHeight(true));
        });

        return maxWidth > $this.width() || maxHeight > $this.height();
    }

    return false;
};

Example:

var $content = $('#content').children().wrapAll('<div>');
while($content.hasOverflow()){
    var size = parseFloat($content.css('font-size'), 10);
    size -= 1;
    $content.css('font-size', size + 'px');
}