how to check if overflow:hidden html class has cut out from view content using jquery or javascript?

Question

<div class="scrollable" style="overflow: hidden"> </div>

$(function() {
    if($(".scrollable").hasElementsInsideItThatAreCutOffByOverflowHidden == false){
    $(".scrollable").scrollable({ vertical: true, mousewheel: true });
    }   
}


<a onClick="isHidingMyStuff"> check if your stuff is hidden <a>

this doesnt work

Answer 1

We wrap the contents in a div so we can get a height from it and compare to the .scrollable height ( which is not scrollable.. )

function isHidingMyStuff(){
    var $s = $('.scrollable');

    $s.wrapInner('<div />'); // wrap inner contents
    var hidden = $s.height() < $s.children('div').height();

    $s.children('div').replaceWith( $s.children('div').html() ); //unwrap

    return hidden;
}

demo http://jsfiddle.net/gaby/ApZP2/

Answer 2

Using javascript and if div has id then

<div id="scrollable"  class="scrollable" style="overflow: hidden"> </div>


function check_string_is_hidden_due_to_overflow(div_id) {
        var s_h = document.getElementById(div_id).scrollHeight;
        var c_h = document.getElementById(div_id).clientHeight;
        if(s_h != c_h) {
            return true; // Means some content is hidden due to overflow hidden
        } else {
            return false; // Whole content is displayed.
        }

}

check_string_is_hidden_due_to_overflow("scrollable");