How to find out if my item is full

I have a slider containing N elements. Each item will be translated into N pixels when the user clicks on the next button. When an element is outside the div shell, it disappears because it overflows with another element.

My plugin does not use any fields, just the transform property.

I would like to know if there is a way to find out if my element is outside the div .: visible does not work for my problem, because the element is already visible, but is full.

+4
source share
4 answers

, - (/ ) .

JQuery :

<script>
  //This is the position of the right side of the element 
  //relative to his parent
  var rightPos = $("#element").position().left + $("#element").width();
  //And bottom side
  var botPos = $("#element").position().top + $("#element").height();
  if (rightPos > $("#element").parent().width()) {
    //The element is outside the right limit of the the parent block
  } else if (botPos > $("#element").parent.height()) {
    //It outside the bottom limit of the parent block
  }
</script>

, div, jquery offset() position().

+1

parent width child width, if condition

if($('span').width() > divWidth){
alert('Overflowed!');
// do something!
}

jsFiddle Demo

html, .

+1

div CSS : hidden

, , .

, -, jQuery .

0

, .

, DOM

He looks at the object and checks each of his parents to see if everything is visible to the user.

0
source

All Articles