0

I have multiple collapsible divs like so

+--------------+
| Div 1        |
+--------------+
| Div 2        |
+--------------+
| Div 3        |
+--------------+

Now when I click on one of the divs it expands

Question: How do I detect that expanded div was expanded over browser window (bottom border)?

ajitam
  • 371
  • 3
  • 16
  • do you mean that the div is outisde of the browser window? out of bounds? out of the viewport? – Sander Sep 28 '11 at 10:16
  • See this post: [http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport](http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport) – expertCode Sep 28 '11 at 10:22
  • get the offset y position + height and compare it to the height of the window + scroll height – Christian Sep 28 '11 at 10:20

1 Answers1

1

You could try this, it's an untested idea off the top of my head so some modification may be needed.

var div1Height = $("#div1").height();
var div2Height = $("#div2").height();
var div3Height = $("#div3").height();
var windowSize = $(window).height();


//assign function for on click (you'll want to change this)
$("#div1, #div2, #div3").click(function(e){
if(div1Height > windowSize){
//assuming div1 is at the top
console.log("div 1 passing extents");
}
if((div2Height + parseInt($("#div2").position().top) > windowSize){
console.log("div 2 passing extents");
}
if((div3Height + parseInt($("#div3").position().top) > windowSize){
console.log("div 3passing extents");
}

});
AndyD
  • 875
  • 7
  • 18