Hello
All geek questions in one place

Checking if div is visible

I use 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 #row1 is display: inline .

I tried .height() , .lenght() and .width() (but this does not work because the div width is always 1246px )

Any help would be greatly appreciated!

** EDIT **

All 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>
+5
source share
3 answers

jQuery has a visible selector, so you can check .is(':visible')

+11
source

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

..

$ ('# line-1') children () is (': visible')

!

$ ('# line-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 find display: inline , you can do the following -

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

If you want to see if this is visible, and then add / remove a class, you can do the following -

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

+3
source

Since the first div has an id, we can use it to capture its first child and check if the displayed value of this child is inline.

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

Source: https://habr.com/ru/post/1209790/

More articles:


All Articles