내부 div가 외부 div를 오버플로했는지 알아보기

Question

내부 div가 외부 div를 오버플로했는지 확인하는 방법을 찾고 있습니다.

<div id="outer"> 
    <div id="inner"> 
     <img src="#" alt="" /> 
     <img src="#" alt="" /> 
     <img src="#" alt="" /> 
     <img src="#" alt="" /> 
    </div> 
</div> 

JQuery를 사용하면 이미 # 400px 및 overflow : hidden 높이를 설정했습니다. 내부 div는 자동으로 ajax 이미지로 채워집니다. 그래서 지금은 #inner의 일부만 보았습니다. #inner가 #outer보다 더 큰 높이를 가졌다면 어떻게 JQuery를 발견 할 수 있습니까?

감사합니다.

Answer 1

$('#inner').outerHeight()이 $('#outer').height() 이상인지 확인해야합니다.

Answer 2

외부 및 내부 DIV의 offsetHeight 속성 값을 비교하십시오.

라이브 데모 :http://jsfiddle.net/simevidas/gJbMf/

Answer 3

업데이트 (@Hussein)

(function($) { 
$.fn.flickr = function(o){ 
    //FLICKR STUFF 
}; 

if(o) $.extend(s, o); 
return this.each(function(){ 

var list = $('<ul>').appendTo(this); 
var url = $.flickr.format(s); 
$.getJSON(url, function(r){ 
    // MORE FLICKR STUFF 
}; 
if (s.callback) s.callback(list); 
    //START CALLBACK FUNCTION 
     $('#photographs ul li a img').fadeTo('fast', 0.7); 

     $('#photographs ul li a img').hover(function() { 
      $(this).fadeTo('fast', 1); 
      },function() { 
      $(this).fadeTo('fast', 0.7); 
     }); 

     $("#photographs ul li a").fancybox({ 
      'hideOnContentClick': false, 
      'zoomSpeedIn':  0, 
      'zoomSpeedOut': 0, 
      'overlayShow':  true, 
      'overlayColor': '#000', 
      'overlayOpacity': 0.9, 
      'padding': 0 
     }); 


      // OVERFLOW QUESTION SCRIPT - DOESN'T FIND INNER HEIGHT 

      var outer = $('#photographs').outerHeight(), 
      inner = $('#test').height(); 


      if(inner>outer){ 
       alert('Inner exceeded outer'); 
      } 

     }; 
}); 
}); 
};