[jQuery] Getting the height of a hidden div in Firefox
Hi,
I've been working on this for days. The chaps on IRC couldn't find an
answer so I thought I'd post it here just in case anyone knows what's
going on.
I have a basic accordion type feature. The designer wants to be able
to open more than one of hidden the sections at once ...
So, here is my code:
$(".accordion .accordion_header").click(function() {
if($(this).hasClass('accordion_selected')) {
$(this).removeClass('accordion_selected').next().slideUp
({duration: 'slow', easing: 'easeInOutQuad'});
} else {
$(this).addClass('accordion_selected').next().slideDown
({duration: 'slow', easing: 'easeInOutQuad'});
}
}).next().hide();
.accordion {
width: 97%;
list-style-type: none;
}
.accordion_header {
display: block;
height: 20px;
background: url(../images/bgd_accordion_off.gif) repeat-x;
padding: 5px 10px 0 10px;
}
.accordion_header:hover {
background: url(../images/bgd_accordion_on.gif) repeat-x;
color: #d7d7d9;
}
.accordion_selected {
background: url(../images/bgd_accordion_on.gif) repeat-x;
color: #d7d7d9;
}
.accordion_section {
display: block;
line-height: 20px;
padding: 0 10px 0 10px;
}
<ul class="accordion">
<li>
<a href="javascript:;" class="accordion_header">heading</a>
<div class="accordion_section">
A bunch of text
</div>
</li>
</ul>
The problem I face is that the content within the hidden div
(accordion_section) is db driven so I have no idea what content to put
in there. This means I cannot fix the height of those divs. This in
turn breaks the animate on the slideDown function. If I set the
height of the div the animate is perfect. Without it everythings all
jumpy and broken looking. So I figured that all I needed to do was to
get the height of the hidden div and then apply it using a css()
call. This works fine in IE but Firefox doesn't seem able to give me
the correct height for the div. For example if I use this code:
var h = $(this).next().height();
alert(h);
IE gives me 240 - which correct for that particular div. But firefox
gives 160 for the same div! Anyone know why?
Many thanks in advance for any help.
Rob.