How to select visible elements in a container?

Question

I have a div .wrapper which has a list ul of small phrases li inside it.

The div has width:600px and height:20px with an overflow:hidden.

I want to select only the visible phrases in the div and add a class to them.

How to do that?

.wrapper {
  background: #eee none repeat scroll 0 0;
  border: 1px solid #ddd;
  height: 20px;
  overflow: hidden;
  padding: 5px;
  width: 600px;
  float: left;
}
ul {
  float: left;
  margin: 0;
  padding: 0;
}
ul li {
  float: left;
  padding: 0 5px;
  list-style-type: none;
}

<div class="wrapper">
  <ul>
    <li><a>Vocabulary Bowl.</a>
    </li>
    <li><a>Bowl.</a>
    </li>
    <li><a>Today's Leaders.</a>
    </li>
    <li><a>Weekly LeadersToday's.</a>
    </li>
    <li><a>Bowl.</a>
    </li>
    <li><a>Monthly Leaders.</a>
    </li>
    <li><a>Bowl.</a>
    </li>
    <li><a>Vocabulary Bowl Today's Leaders.</a>
    </li>
    <li><a>Bowl Leaders.</a>
    </li>
    <li><a>Today's Leaders Today's Leaders Today's Leaders.</a>
    </li>
    <li><a>Weekly Leaders.</a>
    </li>
    <li><a>Monthly.</a>
    </li>
    <li><a>Vocabulary Bowl.</a>
    </li>
    <li><a>Bowl Leaders.</a>
    </li>
    <li><a>Today's Leaders.</a>
    </li>
    <li><a>Weekly Leaders.</a>
    </li>
    <li><a>Monthly Leaders.</a>
    </li>
    <li><a>Vocabulary Bowl.</a>
    </li>
    <li><a>Bowl Leaders.</a>
    </li>
    <li><a>Today's Leaders.</a>
    </li>
    <li><a>Weekly Leaders.</a>
    </li>
    <li><a>Monthly Leaders.</a>
    </li>
  </ul>
</div>

Yes, `:visible` only works for elements that are actually hidden, not just off the screen. I'll try to figure something out. — Yaakov Ainspan, Feb 09 '17 at 13:56
Possible duplicate of [Using jQuery, how do you find only visible elements and leave hidden elements alone?](http://stackoverflow.com/questions/16782925/using-jquery-how-do-you-find-only-visible-elements-and-leave-hidden-elements-al) and [how to add class using jquery](http://stackoverflow.com/questions/10702291/how-to-add-class-using-jquery) - between both of the other questions you should find the info you are looking for. — Nope, Feb 09 '17 at 13:58
You can check this link: http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport. Yours is not a duplicate but a similar question. Instead of 'viewport' you should check with your container div. — er-han, Feb 09 '17 at 14:20

score 2 · Answer 1 · answered Feb 09 '17 at 14:01

You need to check if a li is visible in the viewport.

function isElementInViewport(el) {
    var rect = el.getBoundingClientRect();

    return rect.bottom > 0 &&
        rect.right > 0 &&
        rect.left < (window.innerWidth || document.documentElement.clientWidth) /* or $(window).width() */ &&
        rect.top < (window.innerHeight || document.documentElement.clientHeight) /* or $(window).height() */;
}

$("li").forEach(li => {
  if(isElementInViewport(li) {
    //li is visible in the viewport
  })
})

This is the right approach, but checks if the element fits into the whole viewport, not the parent element with overflow:hidden; — pawel, Feb 09 '17 at 14:17

pawel · Accepted Answer · 2017-02-09T14:25:14.990

0

You can compare each child rectangle (boundingClientRect) with the rectangle of the wrapper.

https://jsfiddle.net/wbramLm4/2/

var wrapper = document.querySelector('.wrapper'), 
    wrapperBox = wrapper.getBoundingClientRect();

  // the elements that are at least partially visible: top left corner fits in the wrapper
  var inBoxPartial = $("li").filter( function(idx, li){
    var liBox = li.getBoundingClientRect();
    return liBox.top < wrapperBox.bottom && liBox.left < wrapperBox.right;
  });

  // the elements that are completely visible: bottom right corner in the wrapper      
  var inBoxTotal = $("li").filter( function(idx, li){
    var liBox = li.getBoundingClientRect();
    return liBox.bottom < wrapperBox.bottom && liBox.right < wrapperBox.right;
  });
  console.log( inBoxPartial, inBoxTotal );

edited Feb 09 '17 at 14:25

answered Feb 09 '17 at 14:13

pawel

30,843
6
50
50

Do you mind explaining to Natheesh why he's wrong. Because I'm seriously getting fed up with him. – Yaakov Ainspan Feb 09 '17 at 14:18
Thanks Pawel, It works like magic.. I've got what I was looking for.. Thanks a bunch.. !! – Asanka Feb 13 '17 at 07:07
@Asanka Glad I could help. Now it would be recommended to mark this answer as accepted so other people facing similar problem can find it in the future. – pawel Feb 14 '17 at 13:05

score 0 · Answer 3 · answered Feb 09 '17 at 14:26

I judge it by compare the total width of phrases and the width of class="wrapper". And i write these code with jQuery.

$(document).ready(function(){
    var len=0;
    $("li").each(function(e){
        len+=$(this).width();
        if(len>$(".wrapper").width())
            $(this).addClass("hide");
    })
})

How to select visible elements in a container?

3 Answers3