Question

I am new to jQuery and already I’m seeing problems with the built in
slideDown()/slideUp() animations. I’m using a flexible width
element, and when I use the function, the element does not return to
it’s full width. I am thinking this has something to do with the way
jQuery finds the width of the element. I am experiencing the error in Safari 3 and Firefox 3.1 for OS X. Below is the html for the page:

<div id="archive">
    <h2 class="first open">May</h2>
    <table width="100%" cellspacing="0" cellpadding="0" border="0" class="list">
         <tr class="first">
              <td width="65%"><a href="#">This month</a></td>
              <td align="right">Sunday, May 31   <input type="button" value="Edit"/></td>
         </tr>
    </table>
</div>

And the Javascript:

// Enable month names to re-open divs
$("#archive h2").not(":last").wrapInner("<a href='#'></a>").end().find
("a").click(function(event){

event.preventDefault();

var h2 = $(this).parent();

if (h2.hasClass("open")) { // Close

    h2.removeClass("open");
    h2.next().slideUp("fast");


} else { // Open

    h2.addClass("open");
    h2.next().slideDown("fast");


}

});

The problem can be somewhat solved by wrapping the in , but then a new error occurs in Firefox where the slideDown animation jumps near the end.

Any help would be appreciated.

Thanks,
Brendan

Answer 1

So it turns out the fix was to nest each table in a div, then set the table width to a static width. In my case, “600px”. I did some experimenting and as I remember, when jQuery finds the height of an element, it sets it to position: abolsute; visibility: none;, which in my case left the 100% width with nothing to compare itself to, rendering as something like 100px wide, and taller than it should have been. So jQuery animated to that height, then set everything back to normal, causing the browser to snap back to the real height.