Why does "$(element).height()" show 0?

Question

I have a structure like this. A container with 5 cards (5 elements, each with a header, content and footer). Header, footer and content have static heights but the card itself has dynamic one (because content can dynamically grow). Im trying to add animations using css3 and I need to get the height of the cards when content it´s appended to them.

This is the part of the code where the content gets appended to the card

function card_constructor(data) {
    $card = $(cards_template(data)); //pass data to template
    card_id = data.id;
    $contentJQuery = $card.find('.content');
    content = data.options;
    template = data.template;
    is_visible = true;
    if(content.length === 0) is_visible = false; //if no content available, do not show card
    //loop through content array in order to append its data to the card
    for (var d=0; d<content.length; d++) {

        $contentJQuery.append(template(content[d]));

    }

    console.log($card.height()); // here is where 0 is returned
   //also tried console.log($card) and that returns the card with all its       //content

}

I dont know why this happens.. When I try to get the height directly from the console on Chrome, it works

if i am not wrong $card never has been added to the html document, so it will always return 0, where is the code when you add it to the document? — Luis Cardenas, Jul 14 '16 at 22:12

score 2 · Answer 1 · answered Jul 14 '16 at 22:02

2

Because you need to $(document).ready(function () { ... }); before you try to read the property from the DOM. The dimensions are most likely not yet rendered. I.e. wrap your necessary code in this function to give the document time to load before it executes the code. Alternatively, append your script just before the ending </body> tag, in the same vein.

answered Jul 14 '16 at 22:02

Jonathan

10,936
8
64
79

won't return a value if element not found, will be null not 0 – charlietfl Jul 14 '16 at 22:07
1

Thank you very much sir , it works now. – Sebastian Ampuero Morisaki Jul 14 '16 at 22:12
@SebastianAmpueroMorisaki if you get the time can you create an example [fiddle](https://jsfiddle.net)? I'm not entirely happy with my answer when I'm looking at your code the second time over... but if it works it works. – Jonathan Jul 14 '16 at 22:20
@charlietfl that's true. But he mentioned that he's manipulating the card dynamically so it would make sense timing-wise (if not mistaken) that it be 0 at points – Jonathan Jul 14 '16 at 22:23
@charlietfl do you ever use the `$(window).load()` event? I wonder if I've just given bad advice... http://stackoverflow.com/questions/3698200/window-onload-vs-document-ready – Jonathan Jul 14 '16 at 22:24
would really only matter if image was involved – charlietfl Jul 14 '16 at 22:25
@charlietfl yeah that's what I thought - just reading about that now I'm surprised I wasn't aware of it... all good in the world when learning and answering questions at the same time – Jonathan Jul 14 '16 at 22:30
1

and no...I have hardly ever used window.load.... if i have image issues would rather know when each image loaded and `` has it's own load event – charlietfl Jul 14 '16 at 22:34

Why does "$(element).height()" show 0?

1 Answers1