CODEWITHSUNDEEP
jquerycssheightelement
Anders
Anders

Reputation: 521

Height returns 0 of element in jQuery

Okay, so I have a little problem with an element returning a height of 0.. It works when it's in a window resize function, but I need it to load this on the first load, the following code is under document ready, but it still won't get the height.

This element is hidden to start with, so I change the element style so it can read it's height, but for some reason it won't work.. When I check with inspect element it says height is 107px.

$(".extracoinfo")
    .css({
        position:   'absolute',
        visibility: 'hidden',
        display:    'block'
    });

    var modal_info_height   = $(".extracoinfo").height();

    // Remove styling
    $(".extracoinfo")
    .css({
        position:   'relative',
        visibility: 'visible',
        display:    'none'
    });

CSS style of element

display: none;
margin-top: 15px;
padding-top: 10px;
border-top: 1px solid #e4e4e4;

HTML code

<div class="extracoinfo">

                            <h4>title</h4>
                            <p>description</p>

                            <ul class="data">

                                <li><b>till:</b> a141</li
                                ><li><b>Minimum:</b> </li
                                ><li><b>Valid :</b> test</li>

                            </ul>

                        </div>

I have tried with inner and outer height also, it does return the padding/margin height, but for some reason it won't get the content height with it, I know it's there..

Upvotes: 0

Views: 3002

Answers (2)

Ionut Necula
Ionut Necula

Reputation: 11472

Try using:

window.onload = function() {
 console.log($(".extracoinfo").height());
};

Upvotes: 1

Johann Kratzik
Johann Kratzik

Reputation: 794

This can sometimes happen if the elements contain images.

Try with $(window).load()instead of $(document).ready()

Upvotes: 1

Related Questions