Mark last visible child in crowded div using CSS or JS

Question

I have a panel with a inline-blockdiv. Some of them are not viewable, because I installed: white-space:nowrap; overflow: hidden;for the container. I am looking for ways to select the last visible child. By visible, I mean that a div is placed (preferably completely) in the area of ​​its container.

As far as I know, such a selector is not used in either CSS or jQuery. The closest is jQuery :visible, but it says that all divs are visible because they consume space in the page layout.

The only way I can see is to list the divs on load and each size to calculate if the div is in the container, adding up its width, padding and margins.

Do you have any better ideas?

#container {
  white-space:nowrap;
  overflow: hidden;
}

.element {
  display: inline-block;
  vertical-align:top;
}

<div id="container">
  <div class="element">
    <img src="http://placehold.it/150x150" alt=""/>
  </div>
  <div class="element">
    <img src="http://placehold.it/150x150" alt=""/>
  </div>
  <div class="element">
    <img src="http://placehold.it/150x150" alt=""/>
  </div>
  <div class="element">
    <img src="http://placehold.it/150x150" alt=""/>
  </div>
  <div class="element">
    <img src="http://placehold.it/150x150" alt=""/>
  </div>
  <div class="element">
    <img src="http://placehold.it/150x150" alt=""/>
  </div>
  <div class="element">
    <img src="http://placehold.it/150x150" alt=""/>
  </div>
  <div class="element">
    <img src="http://placehold.it/150x150" alt=""/>
  </div>
</div>

Run codeHide result

, 4 div 5-. 5- ( 4- div, ).

Answer 1

, .

jQuery:

var cwidth = parseInt($('#container').width()); // get container width
var lastElement = $('#container .element:first'); // assume that first element is visible
$("#container .element:not(:first)").each(function(){
    //get right offset for every div
    var rightOffset = $(this).offset().left 
        + parseInt($(this).width())
        + parseInt($(this).css('padding-left'))
        + parseInt($(this).css('margin-left'));
    //if the right offset is bigger than container width then stop enumerating - previous one was the last fully visible
    if (rightOffset > cwidth){
        return false; 
    }
    //offset was lower than container with so this is our new fully visible element
    lastElement = $(this);
});

lastElement.addClass("lastvisible")

:

• , .

:

• jQuery, .
• -

https://jsfiddle.net/6k5xujtc/1/

Answer 2

-. , , , , onresize.

, .

*{box-sizing:border-box;margin:0;padding:0;}
#container{
  font-size:0;
  overflow:hidden;
  white-space:nowrap;
}
.element{
  display:inline-block;
  opacity:.5;
  padding:5px;
  vertical-align:top;
  width:150px;
}
img{
  width:100%;
}
@media (max-width:299px){
  .element:first-child{opacity:1;}
}
@media (min-width:300px) and (max-width:449px){
  .element:nth-child(2){opacity:1;}
}
@media (min-width:450px) and (max-width:599px){
  .element:nth-child(3){opacity:1;}
}
@media (min-width:600px) and (max-width:749px){
  .element:nth-child(4){opacity:1;}
}
@media (min-width:750px) and (max-width:899px){
  .element:nth-child(5){opacity:1;}
}
@media (min-width:900px) and (max-width:1049px){
  .element:nth-child(6){opacity:1;}
}
@media (min-width:1050px) and (max-width:1199px){
  .element:nth-child(7){opacity:1;}
}
@media (min-width:1200px){
  .element:nth-child(8){opacity:1;}
}

<div id="container">
  <div class="element">
    <img src="http://placehold.it/150x150" alt=""/>
  </div>
  <div class="element">
    <img src="http://placehold.it/150x150" alt=""/>
  </div>
  <div class="element">
    <img src="http://placehold.it/150x150" alt=""/>
  </div>
  <div class="element">
    <img src="http://placehold.it/150x150" alt=""/>
  </div>
  <div class="element">
    <img src="http://placehold.it/150x150" alt=""/>
  </div>
  <div class="element">
    <img src="http://placehold.it/150x150" alt=""/>
  </div>
  <div class="element">
    <img src="http://placehold.it/150x150" alt=""/>
  </div>
  <div class="element">
    <img src="http://placehold.it/150x150" alt=""/>
  </div>
</div>

Hide result

Answer 3

JQ, ,

, . ,

. > JSFIDDLE

JQ :

var vwidth = $(window).width() // get window width
var ewidth = $(".element").width() // get element width
var total = vwidth / ewidth // calculate how many elements fit inside the window width
var integer = parseInt(total)// get the integer from the result above

$(".element").eq( integer - 1 ).addClass("lastvisible")// -1 because eq starts from  0

:

JQ:

var vwidth = $(window).width(); // get screen width
  $(".element").each(function(){

  var eleft = $(this).offset().left // each element distance from left of the screen 
  var ewidth = $(this).width()// each element width
  var total = eleft + ewidth 
  if (total < vwidth) {  // if sum between distance from left of screen + element width is smaller than the window screen
        that = $(this); // all elements that are visible inside the screen
  }
  });

that.addClass("lastvisible") //only the last element visible inside the screen

. > JsFiddle