Jquery getting a hidden element's height

Question

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:

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

exact duplicate of http://stackoverflow.com/questions/2345784/jquery-get-height-of-hidden-element-in-jquery-1-4-2 — samccone, Feb 02 '12 at 18:26
@ken redler: that is the best solution i found about this. i just had to use .appendTo('body') because it didn't work with .show() — Guntram, Apr 09 '14 at 15:08

ShankarSangoli · Accepted Answer · 2012-02-02T18:35:04.080

17

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

edited Feb 02 '12 at 18:35

answered Feb 02 '12 at 18:29

ShankarSangoli

69,612
13
93
124

I tought showing an element then hiding it will cause some visual issue but i test it now. Yes it's doesnt make any problem. Thanks for help. – Malixxl Feb 02 '12 at 18:40
But, if you look at my answer, you'll see you don't need to do that. – AlienWebguy Feb 02 '12 at 21:52
@AlienWebguy - IE6 gives 0 if the element is hidden. – ShankarSangoli Feb 02 '12 at 21:54
This looks like it works..I too thought it would flicker but it doesn't. – lamarant May 17 '13 at 03:02

Ken Redler · Answer 2 · 2012-02-03T20:10:30.247

6

One way is to clone the object, position the clone far outside the viewport, make it visible, measure the clone, then destroy it.

So you have:

<div id="maybe" style="display: none;">
  Something
</div>

Since you're using jQuery, you'd do something like this:

$('#maybe')
  .clone()
  .attr('id','maybe_clone') // prevent id collision
  .css({                    // position far outside viewport
    'position': 'absolute',
    'left': '-1000px'
  });

if( $('#maybe_clone').show().height() > 200 ) {
  $('#maybe').show();
}

$('#maybe_clone').remove();       // housekeeping

edited Feb 03 '12 at 20:10

answered Feb 02 '12 at 18:23

Ken Redler

23,863
8
57
69

+1, that or temporarily position absolutely and move the element itself. Since the element is hidden to begin with, it will not disturb the markup. – Frédéric Hamidi Feb 02 '12 at 18:27
If `display:none` is applied to a parent element, this won't work. A fix would be injecting the clone outside it's original parent: `.clone().appendTo('body')`. – Slava May 01 '15 at 14:45
thanks to give me clue to calculate hidden div height – Shantaram Tupe Dec 07 '17 at 13:55

score 0 · Answer 3 · edited May 23 '17 at 12:18

0

Position the object so it is visible to the browser, but not the user: jQuery: Get height of hidden element in jQuery

edited May 23 '17 at 12:18

Community

1
1

answered Feb 02 '12 at 18:38

Nathan Hase

649
4
11

Jquery getting a hidden element's height

3 Answers3

Linked