Cheking if div is visible

Question

I'm using Popcorn.js and it creates the following HTML code:

<div id="row-1">
    <div style="display: none;">Hello</div>
</div>

But now I'm trying to add/remove .myClass to .test using jQuery when the div inside of #row1 is display: inline.

I've tried .height(), .lenght() and .width() (but this one doesn't work, because the width of the div is always 1246px)

Any help would be greatly appreciated!

** EDIT **

The whole HTML code:

<html>
  <head>
    <script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>

    <script src="js/jquery-1.11.2.min.js"></script>

        <style>
        .myClass{
          background: yellow !important;
        }
        </style>

    <script>
      // ensure the web page (DOM) has loaded
      document.addEventListener("DOMContentLoaded", function () {

           // Create a popcorn instance by calling the Youtube player plugin
         var example = Popcorn.youtube(
           '#video',
           'https://www.youtube.com/embed/w9l4v1s9148?controls=1' );

         example.footnote({
           start: 1.2,
           end: 1.7,
           text: "Hello",
           target: "row-1"
         });

         example.footnote({
           start: 1.7,
           end: 3.2,
           text: "boys and girls",
           target: "a2"
         });

         example.footnote({
           start: 3.2,
           end: 4.8,
           text: "my name is FatLip,",
           target: "a3"
         });

         example.footnote({
           start: 4.8,
           end: 7,
           text: "and this is my friend, Simon the Salmon.",
           target: "a4"
         });


      }, false);
    </script>
</head>

<body>
  <div id="video" style="width: 360px; height: 300px;" ></div>

  <div id="row-1"></div>
  <div id="a2"></div>
  <div id="a3"></div>
  <div id="a4"></div>

  <div class="test" style="width: 10px; height: 10px; background: black;"></div>
</body>
</html>

try with `$(el).is(":visible")` – juvian Dec 23 '14 at 19:07 — juvian, Dec 23 '14 at 19:07

score 13 · Answer 1 · answered Dec 23 '14 at 19:08

13

jQuery has selector visible so You can check .is(':visible')

answered Dec 23 '14 at 19:08

Bogdan Kuštan

5,427
1
21
30

score 4 · Answer 2 · edited Jun 20 '20 at 09:12

4

To see if the child div is visible, you can do the following -

$('#row-1').children().is(':visible')

!$('#row-1').children().is(':hidden')

$('#row-1').children().css('display') == 'none'

But to answer your question, you can do something like this -

If you want to look for display: inline, you can do the following -

$('#row-1').children().filter('div[style*=display: inline]').addClass('myClass')

If you want to see if it's visible and then add / remove class, you can do the following -

$('#row-1').children().filter(':hidden').addClass('myClass') // or removeClass

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 23 '14 at 19:27

Aswin Ramakrishnan

3,195
2
41
65

`none` is not a declared variable – Logan Murphy Dec 23 '14 at 19:56
Sorry.. Didn't notice that – Aswin Ramakrishnan Dec 23 '14 at 19:58

Denis Priebe · Answer 3 · 2014-12-23T20:10:00.143

3

Since the first div has an id we can use it to grab its first child and check to see if that child's display value is equal to inline.

// pure javascript

if (document.getElementById('row-1').firstChild.style.display === 'inline') {
    // add/remove class
}

edited Dec 23 '14 at 20:10

answered Dec 23 '14 at 19:11

Denis Priebe

2,640
1
23
33

Looks like this is the right answer, but you might want to expand it a bit to explain why this solves the problem – brandonscript Dec 23 '14 at 19:37

Cheking if div is visible

3 Answers3