real height of element that is hidden withing another element

Question

I've got a problem, but it only appears at firefox. When I'm trying to get element's height it returns only the visible part of element (in firefox, in rest of the browsers it returns whole element height).

The structure is following:

<ul class="slider">
   <li><div>//content</div></li>
   <li><div>//content</div></li>
   <li><div>//content</div></li>
   ...
</ul>

I'm using caroufredsel script for carousel. I need to get the height of highest element to set the height of the whole carousel, cause when i'm trying to use the option height:"auto" it still doesn't work.

So I'm asking - how to get the real height of element which is partially hidden because of overflow property?

Can we see your javascript code to get the height of elements ? — Magus, Nov 14 '12 at 07:57
ok, so to clarify more, first I'm running over each li element in the list using `$('ul.slider li').each(function(index) { if ($(this).height() > maxHeight) { maxHeight = $(this).height(); } if (0 == --count) initializeSlider(); });` and then i start the slider with height: maxHeight option. Also when I checked the inspector in firefox height of elements is different than that which has been return using .height(). — Kamil, Nov 14 '12 at 08:01

score 0 · Answer 1 · answered Nov 14 '12 at 07:56

0

Try to use outerHeight instead of height or look at this - http://dreamerslab.com/blog/en/get-hidden-elements-width-and-height-with-jquery/ - it allows to use such constructions: $( '.hidden' ).actual( 'width' );

answered Nov 14 '12 at 07:56

Dmitry Volokh

1,630
16
28

I had changed my answer. Look again, please. – Dmitry Volokh Nov 14 '12 at 08:01
also tried that library, still returns only the visible part of the element.. why that only happens with firefox? – Kamil Nov 14 '12 at 08:05
Just found the same question - http://stackoverflow.com/questions/2345784/jquery-get-height-of-hidden-element-in-jquery – Dmitry Volokh Nov 14 '12 at 08:06
it's not same, cause my element isn't hidden, it's overflow is set to hidden only, the element is visible and display is set to block – Kamil Nov 14 '12 at 08:10
Could you make jsfiddle example? – Dmitry Volokh Nov 14 '12 at 08:14
http://jsfiddle.net/3pZW3/1/ but as I can see the problem does not appear here, it must be something with container then.. – Kamil Nov 14 '12 at 08:34
okay, I've already figured it out, it was because the script that prevents content flickering... – Kamil Nov 14 '12 at 08:38

real height of element that is hidden withing another element

1 Answers1