CODEWITHSUNDEEP
jqueryhtmldynamicheight
user2975403
user2975403

Reputation: 41

Dynamic div element height returns 0 after append

This is part of my code. It is inside a loop.

{//just to show its inside loop
ph = "<a id=\"" + id + "\" class=\"polaroid\" href=\"" + 
src + ".jpg\"><img src=\"" + src + "_q.jpg\"><p>" + item.title + "</p></a>";
$("#images").append(ph);
}

once it runs it appends ph to the images div, however when i call $("#images").height(); it returns 0. I have placed the call to height outside of the div, after all elements have been added and it still returns 0. any ideas would be appreciated. Also, "#images" is not dynamically created, just dynamically filled.

here is my html:

<body><div id="images"></div>

Upvotes: 1

Views: 2046

Answers (2)

user2975403
user2975403

Reputation: 41

Alas, I figured it out, I added borders to all the elements(different colors) and I noticed that even though in the DOM it showed as the a tags being inside #images div, they were outside of #images borders, so I went to css and added overflow-y:auto, and they showed inside the border and now I get a value from $("#images).height(). thank you guys for your assistance, it allowed me to focus on the possible cause and eventual solution.

Upvotes: 1

Magnus Engdal
Magnus Engdal

Reputation: 5634

Would something like this work?

$(document).ready(function() {
    for(var i=0;i<3;i++)
    {
        ph = "<img src=\"http://placekitten.com/g/30/30\" alt=\"\" />";
        $("#images").append(ph);
    }

    $("img").one('load', function() {
        $("#height").html($("#images").height());
    });
});

Upvotes: 0

Related Questions