jQuery: Get height of hidden element in jQuery

Question

I need to get height of an element that is within a div that is hidden. Right now I show the div, get the height, and hide the parent div. This seems a bit silly. Is there a better way?

I'm using jQuery 1.4.2:

$select.show(); optionHeight = $firstOption.height(); //we can only get height if its visible $select.hide(); 

Answer 1

You could do something like this, a bit hacky though, forget position if it's already absolute:

var previousCss  = $("#myDiv").attr("style");  $("#myDiv").css({     position:   'absolute', // Optional if #myDiv is already absolute     visibility: 'hidden',     display:    'block' });  optionHeight = $("#myDiv").height();  $("#myDiv").attr("style", previousCss ? previousCss : ""); 

Answer 2

I ran into the same problem with getting hidden element width, so I wrote this plugin call jQuery Actual to fix it. Instead of using

$('#some-element').height(); 

use

$('#some-element').actual('height'); 

will give you the right value for hidden element or element has a hidden parent.

Full documentation please see here. There is also a demo include in the page.

Hope this help :)