CODEWITHSUNDEEP
javascriptjqueryhtmlcss
charly.logel
charly.logel

Reputation: 113

Issue to get height of a div with jquery

I got some trouble to get the height of a div with jquery.

I create the div in the html and affect some text to it when I click a button. After that I want to get the height of that div to vertically align it in the parent div, But the Height() function of jquery return 0 to me.

In the debug console of google chrome I see the height of the div then I point at it, but the height is still not returning the value.

JS FIDDLE DEMO

Here is my result on JS FIDDLE

enter image description here

I got google chrome Version 35.0.1916.114 m

Upvotes: 1

Views: 68

Answers (2)

Hacketo
Hacketo

Reputation: 4997

The height of the div#lblMsgBoxMessage is 0 because when you try to use :

$("#lblMsgBoxMessage").height()

the div element is hided.

You can try by clicking on the div#click again, and then the height is available because the element was already displayed.

You have to set the height after the :

$("#msgBox").show();

like this : fiddle

Upvotes: 1

Nick Coad
Nick Coad

Reputation: 3694

Elements with display: none (including children of elements with display: none) have no height. You need to show the element first in order to get its height.

If you move this line:

// display height of the message in the button
$("#click").text($("#lblMsgBoxMessage").height());

Underneath this line:

// display
$("#msgBox").show();

You'll be able to see the height. JSFiddle: http://jsfiddle.net/FcJgz/416/

Upvotes: 1

Related Questions