finding the div height always return zero jquery

Question

I am using jquery to find div's height, but it always returns zero. I can clearly see the height of the div in chrome's inspect element css window.

<div class="findheight">some text here</div>//original height is 21px

But when i do the following it returns zero:

$('.findheight').height() //it always returns zero. really making me sick

So I thought div might not have text when i call height method on it and i did like below.

  if($('.findheight').text().length > 6){
      alert($('.findheight').height());//This also returns zero so weird 
 }

I also tried by setting windows.timeoutcall, but that does not help with any delay time.

Can any one help me why I am always getting zero?

Are there any errors in the console? Do you have more than one div with the class `findheight`? Is Jquery included? There's insufficient information in your question, because the code is functional. — Jonathan, Apr 14 '15 at 01:45
Is your element invisible (`display: none`)? Invisible elements have no height. — Amadan, Apr 14 '15 at 01:47
You mention `length` - How many elements have `findheight` class? Are you creating new elements dynamically? Are old elements being removed or modified? If you have 6 elements (as per your example), only the height of the first element (with that class) will be returned as well. — Jack, Apr 14 '15 at 02:02
To add to @Amadan's point; Make sure parent elements don't also have `display: none` on them as well. — KillahB, Feb 06 '17 at 06:15

John Rodney · Answer 1 · 2015-04-14T01:52:08.033

Did you wrap your jquery in a function that executes when the dom is ready?

$(document).ready(function(){
  console.log($('.findheight').height());
});

It works for me otherwise your error may be browser specific.

Here is a jsfiddle of it working. Just check your console. https://jsfiddle.net/lesshardtofind/vzxd4t57/

If for some reason you wouldn't have access to the element on document ready, such as working in dynamically templated frameworks like Meteor, Ember, React, or Angular then each object has a hook to register your functions in.

If otherwise you were trying to get access to an element in between transitions you could set a interval.

var interval;
var timeout = setTimeout(function(){
  clearInterval(interval)
}, 10000); // destroy interval after 10 seconds to prevent memory leak
interval = setInterval(function(){
  if($('.findheight').length > 0){ 
    // execute your code here because you know this element is in the dom
    clearInterval(interval);
    clearTimeout(timeout);
    // clear both timeout and interval
  }
}, 100); // loop every 100 milliseconds to "poll" for the node in the dom

score 0 · Answer 2 · edited May 23 '17 at 12:33

0

If the content of your divs are loaded dynamically, then you will need to use window.load event to get its correct height as discussed here: https://stackoverflow.com/a/13071846/1845408

$(window).load(function() {
    alert($('.findheight').height()); 
});

edited May 23 '17 at 12:33

Community

1
1

answered Apr 14 '15 at 01:45

renakre

8,001
5
46
99

This might be the interesting case. But not sure where to call this load function because that div is part of container. If container does not loads only i have the div with text filled in. – rakeeee Apr 14 '15 at 01:57
@rakeeee how about you put this just before `html` closing tag within `` ? – renakre Apr 14 '15 at 01:59

score 0 · Answer 3 · answered Apr 14 '15 at 01:46

0

Copied your code into jsfiddle, the height is 18

<div class="findheight">some text here</div>//original height is 21px
alert($('.findheight').height());

answered Apr 14 '15 at 01:46

Lumi Lu

3,289
1
11
21

score 0 · Answer 4 · answered Apr 14 '15 at 01:54

0

Try doing this:

$('div.findheight').height();

answered Apr 14 '15 at 01:54

Ebad Masood

2,389
28
46

score 0 · Answer 5 · answered Aug 30 '16 at 12:17

The .height() takes exactly CSS's height property.

If it's a dynamic content you have to handle this in the respective event..

For example:

If you're working with the content on page load like @renakre said, use $(window).load() or $(document).load() to trigger the call.
If it's a content generated from some other process you have coded, you have to bind respective event.. let's presume it's a click or on:

$(document).load(function() {
  // Shows the height on page load
  console.log($('.findheight').height());
  
  $('#another-element-ID').click(function() {
    // .. code which populate the div dynamicaly
    
    // Shows the height
    console.log($('.findheight').height());
  });
  
  $('.another-element-class').on('change', function() {
    // .. code which populate the div dynamicaly
    
    // Shows the height
    console.log($('.findheight').height());
  });
});

Hope this can help you.

score 0 · Answer 6 · answered May 25 '17 at 09:32

0

This happens when an explicit height/width is not set for that element OR when the CSS for inner/outer elements set the height/width to 0;

To get height/width like this you have to explicitly set height/width.

answered May 25 '17 at 09:32

blackspacer

343
6
15

finding the div height always return zero jquery

6 Answers6