CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dupuis David
Dupuis David

Reputation: 421

How to know if my element is overflowed

I have a slider that contains N elements. Each element will by translated by N pixels when the user click on the next button. When the element is out of the wrapper div, it disappears because it is overflowed by another element.

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

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

Upvotes: 4

Views: 158

Answers (4)

Lucas Galton
Lucas Galton

Reputation: 26

If I understand correctly, one way to do it would be to compare the position of this element to the size (width/height or both) of his parent.

With Jquery you could do it this way:

<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's outside the bottom limit of the parent block
  }
</script>

If it's not the parent you could then adapt this code to compare the position to the width of the correct div, preferably by using the jquery offset() method instead of position().

Upvotes: 1

dimshik
dimshik

Reputation: 1281

There is a nice tool for testing if an element is visible on the screen.

Detect if a DOM Element is Truly Visible

It looks at an object and checks each of its parents to see if it’s still visible to the user.

Upvotes: 0

Pedram
Pedram

Reputation: 16615

By determine parent width and get child width then use if condition

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

jsFiddle Demo

if you update your question with your html then I can update with your codes.

Upvotes: 1

Drummad
Drummad

Reputation: 722

You could give the wrapper div the CSS property of overflow: hidden

This would mean that any elements inside of it are not visible when they leave the bounds of the wrapper.

Otherwise you could check whether your element is outside of the wrapper div using jQuery to compare the position to that of the parent.

Upvotes: 0

Related Questions