correct use of .is(':visible')

Question

I have this code

<div style="height:500px;display:none"></div>
<div style="height:1000px;"></div>

<script>

$(document).ready(function() {

     var visible_elem_height = $('div').is(':visible').height()

     alert( visible_elem_height )

});

</script>

but my code Doesn't work , So what do u suggest ?

possible duplicate of [Checking if an element is hidden](http://stackoverflow.com/questions/178325/checking-if-an-element-is-hidden) — micstr, Jun 29 '15 at 06:12
You have parenthesis `)` missing at the end of `document.ready` — Guruprasad J Rao, Jun 29 '15 at 06:12
@Gideon Yea may be!! But if it is unknown then OP should correct that first before proceeding with the other tries! — Guruprasad J Rao, Jun 29 '15 at 06:29
Many post their answer, but I'm still here deciding whether to answer or maybe this is just a typo error? — Gideon, Jun 29 '15 at 06:38
Sorry for the silly question but, do you included already the jquery library? — Gideon, Jun 29 '15 at 06:42

score 3 · Accepted Answer · answered Jun 29 '15 at 06:13

.is() return a boolean value so your script will fail, instead you need

$(document).ready(function () {

    var visible_elem_height = $('div:visible').height();
    //or var visible_elem_height = $('div').filter(':visible').height()

    alert(visible_elem_height)

})

score 1 · Answer 2 · answered Jun 29 '15 at 06:19

$('div').is(':visible') returns true/false depending on the visibility of your element. On the other hand, .height() function is applied on the element and NOT on the boolean output. Therefore, $('div').is(':visible').height() will simply not work.

To achieve the desired behaviour, use the :visible selector $('div:visible').height()

$(document).ready(function() {

     var visible_elem_height = $('div:visible').height()

     alert( visible_elem_height )

});

plunkr

score 1 · Answer 3 · answered Jun 29 '15 at 06:27

Try utilizing .filter()

$(document).ready(function() {
  var div = $("div").filter(function(i, el) {
    return $(el).is(":visible")
  });
  
  if (div.length > 0) {
    alert(div.height())
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="height:500px;display:none"></div>
<div style="height:1000px;"></div>

score 0 · Answer 4 · edited Jun 29 '15 at 06:23

0

The statement is(':visible') returns true or false as output. If you want to get the height of the element, you can directly get it using the .height() method.

edited Jun 29 '15 at 06:23

Mivaweb

5,113
3
21
49

answered Jun 29 '15 at 06:18

Abhi

1
2

correct use of .is(':visible')

4 Answers4