Find out if inner div has overflown outer div
I'm looki开发者_开发知识库ng for a way to find out if an inner div has overflown an outer div.
<div id="outer">
<div id="inner">
<img src="#" alt="" />
<img src="#" alt="" />
<img src="#" alt="" />
<img src="#" alt="" />
</div>
</div>
With JQuery i've already set #outer to a height of 400px and overflow:hidden. The inner div is automatically being filled with ajax images. So right now, i only see a part of #inner. How do i get JQuery to discover if #inner has more height than #outer?
Thanks!
Compare the values of the offsetHeight
properties of the outer and inner DIV's.
Live demo: http://jsfiddle.net/simevidas/gJbMf/
You need to check whether $('#inner').outerHeight()
is more than $('#outer').height()
.
Update (@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');
}
};
});
});
};
精彩评论