Hide/Show div with Javascript if a div has scrollbar

http://stackoverflow.com/questions/9872221/hide-show-div-with-javascript-if-a-div-has-scrollbar

by GoranMottram

HTML

<div id="scrollable-div">
    <div id="scrollable-inner">
        
    </div>
</div>

<div id="dependent-div">
    Hello, please don't spam. :(
</div>
    
<div id="actions">
    <input type="button" value="spam" id="spam" />
    <input type="button" value="clear" id="clear" />
</div>

CSS

body { margin:10px; }

#scrollable-div {
    float:left; 
    overflow-x: hidden;
    overflow-y: scroll;
    position: relative;
    width: 270px;
    height:200px;
    border:5px solid lightgray;
}

#dependent-div {
    float:left;        
    width:270px;
    height:200px;
    border:5px solid red;
    margin-left:10px;
}

#actions {
    clear:both;
    margin-top:10px;   
}

JavaScript

$(function(){
    
    function UpdateDependentDiv()
    {
        if ($('#scrollable-inner').height() > $('#scrollable-div').height())
            $('#dependent-div').hide();
        else
            $('#dependent-div').show();
    }
   
    $('input#spam').click(function(){
        $('#scrollable-inner').append('spam ... <br />');
        UpdateDependentDiv();
    });        
    
    $('input#clear').click(function(){
        $('#scrollable-inner').empty();
        UpdateDependentDiv();
    });
});