Jquery get height of auto height element

Question

Is there any way to return the height of an element that is already set to auto? I just get 0 when I call $("#element").height();

Here is the jquery code. The img.height() return 0 therefore the end result is off.

img.css({top: (img.parent().height() - img.height()) /2, left: (img.parent().outerWidth() - img.outerWidth()) / 2});

The HTML looks like this:

<div id="exploreImage" class="virtual-room-large" style="width: 288px; height: auto; top: 185px; left: 89px; ">

Answer 1

I have found a workaround for doing a transition with ease-in AND ease-out. This workaround needs the "jump" of the element:

var elementselector = "#elementtoscroll";
$(elementselector ).css("height", "auto");
var elemheight = $(elementselector).css("height");
$(elementselector).css("height", "0");
$(elementselector).css("height", elemheight);

This way, javascript gets the height - I know it's not a beuatiful way, but it works. This is important for example for the ease-out effect.

EDIT: It should be said, that this is just possible with CSS3 and a CSS-Style like this:

#panel{
    background-color: #FF00FF;
    display: block;
    height: 0px;
    transition: all 300ms ease-in-out;
    overflow: hidden;
}

Answer 2

I had this same problem and found the solution here: http://www.fortwaynewebdevelopment.com/jquery-width-or-height-always-returns-0-fix/

When I'm using jQuery, I like to stick to it as much as I can for consistency's sake.

Actually both solutions - using window.load(){} or $("my element").load(){} worked beautifully for me so I hope this can help you out as well or anyone else finding this issue.