jQuery outerHeight for hidden element

Question

I am having a problem with getting the outer height of a list item - similar to the below post: jQuery: Get height of hidden element in jQuery

Here is my code:

function tabload() {
    $('.tab li:first-child').addClass('selected');

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

    var h = $(".tab ul").outerHeight(true);

    $(".tab ul").css("height", h);

    $(".tab ul").css({'position': 'relative', 'visibility': 'visible', 'display': 'none' });
};

Am i doing something wrong?

score 1 · Answer 1 · answered Aug 10 '11 at 13:47

1

I have blogged about this issue before since there are a few other similar questions here on stackoverflow. Take a look at the code in this blog post

I initially developed it just for the width method, but based on comments the code has evolved to include inner/outer dimensions.

answered Aug 10 '11 at 13:47

Tim Banks

7,099
5
31
28

I did see this post actually but wasn't able to solve it myself. Not sure if it matters but i am using asp.net with razor mvc. would it help if i added my css and html? Ive already started to recode this, but surely there is a solution! – Aug 10 '11 at 13:56
Being able to see your HTML and CSS would help recreating the issue. I could then play around with and see what I can find. – Tim Banks Aug 10 '11 at 14:06
Here is the HTML/CSS - Ive removed some code as its in asp.net mvc razor. CSS ul.tab {margin-top:10px; clear:both; position:relative;} ul.tab li {float:left; background:none;} ul.tab ul {display:none; position:absolute} ul.tab li.selected ul {display:block; left:0;} ul.tab li a {display:block;} ul.lineup li {float:left; height:auto !important;} HTML
- Name
– Aug 10 '11 at 14:14
What value are you getting for the height and what value are you expecting? – Tim Banks Aug 10 '11 at 14:33
I am getting 0 but expecting the height to be whatever is loaded in the
- this depends on what comes back from the server for that particular

Aug 10 '11 at 14:39

There must be something else affecting it that I don't have. I set up an example here: http://jsfiddle.net/YReWs/ and I am getting a non-zero value for h inside of tabload. – Tim Banks Aug 10 '11 at 14:48

score 0 · Answer 2 · answered Apr 25 '12 at 17:16

0

If you are using display: none you may consider to use position absolute with some huge margin. eg position:absolute;left:-999999px; instead.

answered Apr 25 '12 at 17:16

Pawel Dubiel

18,665
3
40
58

score 0 · Answer 3 · answered Aug 10 '11 at 13:37

You may not get the height/widith of hidden(display:none;) elements in all the browsers. Try to show the element and hide it after you get the height.

function tabload() {
    $('.tab li:first-child').addClass('selected');

    $(".tab ul").show();

    var h = $(".tab ul").outerHeight(true);

    $(".tab ul").css("height", h);

    $(".tab ul").css({'position': 'relative', 'visibility': 'visible', 'display': 'none' });
};

score -1 · Answer 4 · answered Aug 10 '11 at 13:27

-1

I think you're confusing visibility and display. visibility shows the space for the element on the page, but doesn't actually render it. display: none won't show the element or the space it fills.

So when you set

$(".tab ul").css({'position': 'relative', 'visibility': 'visible', 'display': 'none' });

You're actually completely hiding the element

answered Aug 10 '11 at 13:27

Adam Hopkinson

28,281
7
65
99

He's not confused. If he didn't set the visibility property back to `visible` it wouldn't appear when he used `show()`. Look at all his code bro. – AlienWebguy Aug 10 '11 at 13:30
I was looking at his code bro, and my point was more that he shouldn't be using `visibility` at all. – Adam Hopkinson Aug 10 '11 at 14:25
If it is hidden via `display:none` it takes up no space on the DOM so the only way to get the height is to set it to `display:block`. He probably didn't want the content to be visible on the screen so he kept it invisible with `visibility:hidden`, grabbed the height, and then reset all his css. – AlienWebguy Aug 10 '11 at 14:30
Thats right @AlienWebguy - It also stops the page flickering when it shows and hides the content – Aug 10 '11 at 14:32

jQuery outerHeight for hidden element

4 Answers4

Linked