Jquery getting a hidden element's height

jquery hidden
Malixxl picture Malixxl · Feb 2, 2012 · Viewed 24k times · Source

I was trying to get a list of element's height value but it was returning 0.
I've done some research and saw that in order get element's height, that element must be visible.
But I want to check its height when it's hidden. If its height is bigger than some value use some functions then make it visible. Is there any way to do this?

I mean:

  1. Check hidden element's height.
  2. If it has OK value make it visible.
  3. If it doesn't have required value do some functions.
  4. Make it visible.

Answer

ShankarSangoli picture ShankarSangoli · Feb 2, 2012

You can show the element get the height and then hide it, visually you will not see any difference.

var height = $('elementSelector').show().height();
$('elementSelector').hide();
if(height != <<HeightToCompare>>){
    //Code here
}
//Finally make it visible
$('elementSelector').show();

Demo

Related questions

jQuery - Detect value change on hidden input field

I have a hidden text field whose value gets updated via an AJAX response. <input type="hidden" value="" name="userid" id="useid" /> When this value changes, I would like to fire an AJAX request. Can anyone advise on …

Read More
Check div is hidden using jquery

This is my div <div id="car2" style="display:none;"></div> Then I have a Show button that will show the div when you click: $("show").click(function() { $("$car2").show(); }); So right now I want to …

Read More
jquery selector can't read from hidden field

(answers aggregated into another question) The following jquery 1.3.2 code works: <input type="select" value="236434" id="ixd" name='ixd' /> <script> console.log( $('#ixd') ); console.log( $("input[name='ixd']") ); </script> Console shows: [input#ixd 236434] [input#…

Read More