JQuery Height 0

Question

The jquery height property always returns 0. I use it with Bootstrap. Not sure if this will be a conflict. I looked at several recommended Internet solutions, but did not fix them. Below are snippets of code

/*html */ <div class="hidden-sm hidden-md hidden-lg" class="mobNewsEvents"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <h3 style="text-align: center;">Events</h3> <div class="mobEvents"> //need to get the height of this div element <ul> <li>...</li> </ul> </div> </div> </div> </div> /*script*/ (function($){ $(window).load(function(){ var temp = $('.mobEvents').height(); alert(temp); }); })(jQuery); 

Answer 1

class="hidden-sm hidden-md hidden-lg" indicates that it may be display: none . In this case, height not available. Show it, measure it, then hide it.

Answer 2

Try the following instead. window.load is not a good way to handle document elements.

 $(document).ready(function(){ var temp = $('.mobEvents').height(); alert(temp); }); 

If you have several elements with one class, it will receive only the first element.

 $(document).ready(function(){ var temp = $('.mobEvents':First).height(); alert(temp); }); 

or alternatively you can use

 $(document).ready(function(){ var temp = $('.mobEvents').attr("height").value(); alert(temp); });