Hi Tommy,
Many thanks. That's exactly what I came up with over night.
$(this).next().css('display', 'block');
var h = $(this).next().height();
$(this).next().hide();
$(this).addClass('accordion_selected').next().height(h).slideDown
({duration: 700, easing: 'easeInOutQuad'});
Gives me the correct height in FF and it happens so fast that the div
isn't shown. The slideDown is now perfectly smooth in both browsers.
Cheers,
Rob.
On Jan 31, 3:04 pm, omtay38 <omta...@gmail.com> wrote:
> I know its probably not the best solution, but what if you showed the
> div just long enough to get the height, hid it again and then slid it
> down. You could prevent the div from actually showing by giving it
> something like .css("left","-10000px") before using .show(). Just a
> thought.
>
> Tommy
>
> On Jan 30, 2:00 pm, rob303 <rob.cub...@googlemail.com> wrote:
>
> > Oh, one other thing. If I call .css('display', 'block') on the
> > element before using height() FF gives me the correct value of 240px.
> > Obviously, that breaks the accordion because I want the element
> > hidden!
>
> > /me scratches head ...
>
> > Rob.
>
> > On Jan 30, 7:57 pm, rob303 <rob.cub...@googlemail.com> wrote:
>
> > > Thanks for the reply Eric. But what have different box models got to
> > > do with it? I'm not setting any border or padding properties on my
> > > hidden div that would effect the height. And the difference between
> > > the two browsers is huge. IE says 240px and FF says 160px. I
> > > certainly don't have 80px worth of padding on that element ...
>
> > > Rob.
>
> > > On Jan 30, 7:45 pm, Eric Garside <gars...@gmail.com> wrote:
>
> > > > Different box models. I'd read up more on the difference between the
> > > > IE/FF box models to point you in the right direction. I'd give you a
> > > > quick tutorial, but I get out at 3 on Fridays! :D
>
> > > > On Jan 30, 1:52 pm, rob303 <rob.cub...@googlemail.com> wrote:
>
> > > > > 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.
