CODEWITHSUNDEEP
javascriptjquery
john marker
john marker

Reputation: 41

Get height of dynamically created element

I created one div dynamically and tried to get its height. I didn't assign fixed height to it. But its content is assigned a fixed height. So I tried to get its render height. 

$(function(){
    $services = $(<div id="services"></div>);
    $img  = $(<img src="abc.jpg" height="100px" width="100px">);
    $a = $("<a href="home.php">Go to home</a>");
    $services.append($img,$a);
});

$(function(){
    var height = $("#services").height();
});

I got value of height as 0.

So I can't render height of div#services.

Upvotes: 0

Views: 4643

Answers (2)

Liber
Liber

Reputation: 840

You should show those Dom Elements to Page first!

in your case, $services is not shown to the Page, so the result $("#services") will get nothing.

try to do this:

$(function(){
    $services = $(<div id="services"></div>);
    $img  = $(<img src="abc.jpg" height="100px" width="100px">);
    $a = $("<a href="home.php">Go to home</a>");
    $services.append($img,$a);

    //here
    $("body").append($services);
});

it will works.

Upvotes: 0

Emmett
Emmett

Reputation: 14327

You need to add the element to the DOM before measuring it:

$('body').append($services);
var height = $("#services").height(); // works now

If you need its height before making it visible, a common trick is to add it to the DOM hidden, measure it, and then make it visible.

Upvotes: 6

Related Questions