1

I have a div, called "wrapper", with responsive height and overflow-y auto (so scroll enabled). Inside this div are lots of other divs, called "box". So, for example, if there are 3 divs inside the wrapper and I see them all fully, nothing should happen. But if any of this divs inside the wrapper are not fully visible (on page load and page resize), an other div (called "button") should fadeIn.

I just found this post, but it doesn´t solve my problem: stackoverflow post

HTML:

<div class="wrapper">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

<div class="button">
My Button
</div>

My fiddle: HTML + CSS

How can I check, if all divs are fully visible inside an other div (on page load and page resize)?

#

UPDATE: My problem is, that "viewport" doesnt work for me, because the script has also to check what happens outside the viewport (dynamically). The height of my divs is responsive and so not every time all of it is in the viewport ...

... but for me, I found an other solution. Now I check the height of my main div (my main content) and if this div is smaller than the "wrapper" div, I will fadeIn the "button" div.

Pepe
  • 663
  • 5
  • 17
  • 1
    Read this: [How to tell if a dom element is visible in the current viewport](https://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport) – OB Kenobi Aug 20 '17 at 17:03
  • @OB FullStack Kenobi Thx for the post, but I found an other solution for me ... – Pepe Aug 20 '17 at 17:13

3 Answers3

0

You can try this my friend"

 if ($(".wrapper div").css('visibility') === 'hidden') {
  // ...
   }
Ajay Malhotra
  • 1,645
  • 2
  • 13
  • 16
0

When hosting your HTML:

  • Right click on your wrapper and inspect element
  • Hover over the first div inside of the wrapper, and it should become highlighted
  • Check to see if that div is visible on the page
  • Continue the above steps for every div in your wrapper
Assafi Cohen-Arazi
  • 777
  • 7
  • 25
0

This seems to solve a problem that's the same as, or very similar to, the problem you're describing:

zeusdeux/isInViewport

The "examples" folder includes various examples where DIVs react to whether or not they are contained within a defined viewport div.

EDIT: After reading comments on the question, this seems to be the best resource for reading up on the general problem and solutions (even though isInViewport looks very useful as well):

How to tell if a DOM element is visible in the current viewport?

rvrabbit
  • 117
  • 8
  • Thx for your support! My problem is, that "viewport" doesnt work for me, because the script has also to check what happens outside the viewport (dynamically). The height of my divs is responsive and so not every time all of it is in the viewpoint - I hope you understand what I mean? But the "height - check - way" works for me ... – Pepe Aug 21 '17 at 08:26