How can I detect an element that is pletely (not partially) outside of a specific containers width?

For example, I have the following:

<div id="content">
   <div class="wrapper">
      <p>This is a paragraph</p>
      <p>This is a paragraph</p>
      <p>This is a paragraph</p>
      <p>This is a paragraph</p>
   </div>
</div>

My content div has the width of 100%, and my p tags are animated to scroll across the screen. How can I detect if they are outside of the content div so that I can remove them?

Testing for outside of the viewport is not an option since my content div also has a container.

How can I detect an element that is pletely (not partially) outside of a specific containers width?

For example, I have the following:

<div id="content">
   <div class="wrapper">
      <p>This is a paragraph</p>
      <p>This is a paragraph</p>
      <p>This is a paragraph</p>
      <p>This is a paragraph</p>
   </div>
</div>

My content div has the width of 100%, and my p tags are animated to scroll across the screen. How can I detect if they are outside of the content div so that I can remove them?

Testing for outside of the viewport is not an option since my content div also has a container.

• javascript
• jquery

• Im assuming that you want to detect that its outside of the wrapper because you cant make it fit into the container right?? have you tried using box-sizing: border-box css? – ncubica Commented Apr 3, 2014 at 6:10
• @ncubica - My wrapper div has not width styling, only the content div has width styling. And no, haven't tried that actually. How can that detect if it if outside of the content div? Basically, I am trying to remove the elements if they go outside of the content. – Fizzix Commented Apr 3, 2014 at 6:13
• How about using .offset(), .width() and .height() to pare the positions? – Josef Engelfrost Commented Apr 3, 2014 at 6:15
• @JosefOttosson - I attempted to use width() with .position().left and .position().right together, although I had no luck. Haven't tried offset(). Any chance of an example? – Fizzix Commented Apr 3, 2014 at 6:18
• @JosefOttosson - Don't need to test for height, only need to test for width. – Fizzix Commented Apr 3, 2014 at 6:19

3 Answers 3

I believe the getBoundingClientRect() method should work well. Made a better working example using the paragraphs, here's the fiddle.

function HorizontallyBound(parentDiv, childDiv) {
    var parentRect = parentDiv.getBoundingClientRect();
    var childRect = childDiv.getBoundingClientRect();

    return parentRect.left >= childRect.right || parentRect.right <= childRect.left;
}

var bound = HorizontallyBound(document.getElementById("parent"), document.getElementById("some_paragraph"));

Or using jQuery with the same concept:

function HorizontallyBound($parentDiv, $childDiv) {
    var parentRect = $parentDiv[0].getBoundingClientRect();
    var childRect = $childDiv[0].getBoundingClientRect();

    return parentRect.left >= childRect.right || parentRect.right <= childRect.left;
}

var bound = HorizontallyBound($("#parent"), $("#some_paragraph"));

Updated my answer because I reread that you're checking if the child is pletely outside of the parent, not partially.

If I understand what you're asking correctly, you could try something I use on one of my own sites:

var $elem = $('#preview_link_box'),
    top = $elem.offset().top,
    left = $elem.offset().left,
    width = $elem.width(),
    height = $elem.height();


if (left + width > $(window).width()) {
    console.log("Looks like its outside the viewport...");
}

I don't know what you're trying to do, but I tried to create something similar. It's a really simple idea as far as the logic. jsfiddle here

Basically the idea was to use the width of #content div and slide the p elements over until it reached that number and then remove them.

var width = $('.wrapper p:first').width(),
    i     = 0, 
    $me   = $('.wrapper p');

// slide paragraphs over to the left, once out of bounds they are removed
var interval = setInterval(function() {
    if (i == -width) {
        clearInterval(interval);
        $me.remove();
    }
    $me.css('margin-left', --i);
}, 10);