Count the hidden through overflow: hidden; parent children

Question

I have a photo gallery that should not display all the photos at the beginning and show how many photos were not included in the gallery (I use overflow: hidden;).

After looking at this answer, I decided to do so:

const a = document.querySelectorAll('a')
const count = 0

a.forEach(el => {
  if (isHidden(el))
    count++
})

console.log('Hidden elemenets: ' + count)

function isHidden (el) {
  return el.offsetParent === null
}

#lightgallery {
  overflow: hidden;
  margin-top: 30px;
  height: 122px;
  position: relative; /* important */
}

#lightgallery a {
  width: 176px;
  display: inline-block;
}

#lightgallery img {
  width: 100%;
}

#lightgallery a {
  color: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="lightgallery">
  <a href="assets/img/light1.jpg">
    <img src="https://picsum.photos/200/300/?random=1">
  </a>
  <a href="assets/img/light2.jpg">
    <img src="https://picsum.photos/200/300/?random=2">
  </a>
  <a href="assets/img/light3.jpg">
    <img src="https://picsum.photos/200/300/?random=3">
  </a>
  <a href="assets/img/light4.jpg">
    <img src="https://picsum.photos/200/300/?random=4">
  </a>
  <a href="assets/img/light5.jpg">
    <img src="https://picsum.photos/200/300/?random=5">
  </a>
  <a href="assets/img/light4.jpg">
    <img src="https://picsum.photos/200/300/?random=6">
  </a>
  <a href="assets/img/light5.jpg">
    <img src="https://picsum.photos/200/300/?random=7">
  </a>
</div>

But it does not work.

I need to count photos that are not visible on the screen. I have a responsive design, so the gallery element can have different sizes and accordingly different users can have different number of photos.

You may want to use a `class` to do this. – fabrik Sep 26 '18 at 09:18 — fabrik, Sep 26 '18 at 09:18
In the answer, you can add a class, I simplified my httml. – Илья Зеленько Sep 26 '18 at 09:18 — Илья Зеленько, Sep 26 '18 at 09:18

fabrik · Accepted Answer · 2018-09-26T10:50:43.033

2

You can use a class to do that (it's much simpler to do in this way, I think).

const a = document.querySelectorAll('.img-hidden')

console.log(a.length);

#lightgallery {
  overflow: hidden;
  margin-top: 30px;
  height: 122px;
  position: relative; /* important */
}

#lightgallery a {
  width: 176px;
  display: inline-block;
}

#lightgallery img {
  width: 176px;
}

#lightgallery a {
  color: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="lightgallery">
  <a href="assets/img/light1.jpg" class="img-visible">
    <img src="https://picsum.photos/200/300/?random=1">
  </a>
  <a href="assets/img/light2.jpg" class="img-visible">
    <img src="https://picsum.photos/200/300/?random=2">
  </a>
  <a href="assets/img/light3.jpg" class="img-visible">
    <img src="https://picsum.photos/200/300/?random=3">
  </a>
  <a href="assets/img/light4.jpg" class="img-visible">
    <img src="https://picsum.photos/200/300/?random=4">
  </a>
  <a href="assets/img/light5.jpg" class="img-visible">
    <img src="https://picsum.photos/200/300/?random=5">
  </a>
  <a href="assets/img/light4.jpg" class="img-hidden">
    <img src="https://picsum.photos/200/300/?random=6">
  </a>
  <a href="assets/img/light5.jpg" class="img-hidden">
    <img src="https://picsum.photos/200/300/?random=7">
  </a>
</div>

A different, more programmatic approach can be found on this link. For this, you should explicitly set images' height, which may be not desirable for the given use-case, but does the trick, indeed.

edited Sep 26 '18 at 10:50

answered Sep 26 '18 at 09:23

fabrik

14,094
8
55
71

I can only see 2 pic while this code logs `2`. So it may not be correct. – apple apple Sep 26 '18 at 09:25
thanks, I forgot to write, I'm interested in how to count it dynamically. – Илья Зеленько Sep 26 '18 at 09:25
@ИльяЗеленько what do you mean by dynamically? – fabrik Sep 26 '18 at 09:27
@appleapple the snippet counts all images with the classname `img-hidden` - there are exactly two of these. The script logs `2`. Can you clarify your comment please? – fabrik Sep 26 '18 at 09:28
regardless of the size of the parent(responsive design), counts how many items are hidden. – Илья Зеленько Sep 26 '18 at 09:29
in your code I see 3 pictures, the rest 4 are hidden, but it outputs 2 – Илья Зеленько Sep 26 '18 at 09:32
1

@ИльяЗеленько you mean you want dynamically count all those images that exceed the height limit and are hidden ? – Aayushi Kambariya Sep 26 '18 at 09:34
I see 7 pictures, 2 of them are hidden. I don't follow you, sorry. – fabrik Sep 26 '18 at 09:34
@AayushiKambariya Yes! – Илья Зеленько Sep 26 '18 at 09:38
@fabrik same as what @ ИльяЗеленько said. – apple apple Sep 26 '18 at 09:39
@ИльяЗеленько sorry, I thought this question is about how to count the hidden images, not about how to display the others. Am I misunderstood your question? – fabrik Sep 26 '18 at 09:41
I need to count photos that are not visible on the screen. I have a responsive design, so the gallery element can have different sizes and accordingly different users can have different number of photos. – Илья Зеленько Sep 26 '18 at 09:43
can be done using Position() , scrolltop() and offset function. – Aayushi Kambariya Sep 26 '18 at 09:44
@ИльяЗеленько See my updated answer and the link I've provided. – fabrik Sep 26 '18 at 10:51

Count the hidden through overflow: hidden; parent children

1 Answers1