ansaurus

Question

How can I Animate an Element to its natural height using jQuery

Answer 1

+2 A:

I could suggest an equally-hackish solution...Clone the element, position it out of view, and get its height...then delete it and animate your original.

That aside, you could also use $.slideUp() and $.slideDown():

$this.hasClass('closed') ? $(this).slideDown() : $(this).slideUp() ;

If you need to keep a 1px line, you can apply that with a parent element:

<div style='border-top:1px solid #333333'>
  <div class='toggleMe'>Hello World</div>
</div>

And apply the slidingUp/Down on the .toggleMe div.

Jonathan Sampson 2009-09-02 19:44:46

Sounds like it would work but I'm not sure it would be an improvement :) What I have works but I'm new to jQuery so I'm thinking there must be a non-hacky way

Greg 2009-09-02 19:49:58

Any reason you decided not to go with $.slideUp() and $.slideDown()?

Jonathan Sampson 2009-09-02 19:53:51

I need it to stop at 1px heigh and I don't think that's possible with those functions (could be wrong though)

Greg 2009-09-02 19:56:25

Also it needs to be able to start in a closed or open state, before jQuery starts running, if that matters

Greg 2009-09-02 19:57:13

Can the 1px height be simulated by an element around the toggled-element? <div style="border-top:1px"><div class="toggle"></div></div>?

Jonathan Sampson 2009-09-02 19:57:59

Hmmm that's a possibility...

Greg 2009-09-02 20:00:01

I've gone with adding a wrapper div - simple, works well and lets me use slide instead of animate... thanks

Greg 2009-09-02 20:39:41

There is a naturalHeight attribute for images in firefox, this article describes an internet explorer workaround: http://arunprasad.wordpress.com/2008/08/26/naturalwidth-and-naturalheight-for-image-element-in-internet-explorer/

ko-dos 2009-10-29 14:19:50

Answer 2

A:

$('div').click(function() { 
    if($('p').is(':hidden')) {
       $('p').slideUp();
    } else {
       $('p').slideDown(function() { $('p').css('height','1px'); });
    }
}

That should set the height of the p tags to be 1px once they've finished sliding.

Steerpike 2009-09-02 19:57:59

That would set the height of every p-tag to 1px.

Jonathan Sampson 2009-09-02 20:07:24

$(this).css('height','1px'); should be fine then.

Steerpike 2009-09-02 20:10:22

You're applying it on the callback of the slideDown() method, which means as soon as it's visible, it's going to be hidden again. Did you mean to set it for the slideup instead?

Jonathan Sampson 2009-09-02 20:16:01

Hmm, I think I got my reveal/hide functions mixed up, yeah. Either way getting show/hide functionality to work should be a lot simpler than checking for heights and such.

Steerpike 2009-09-02 20:24:50

Answer 3

+1 A:

I permit myself to answer this thread, even if it's been answered a long time ago, cuz it just helped me.

In fact, i don't understand the first answer : why opening a half-closed element to get its height, and then closing it again ?

At the beginning, you hide the element so that just a part of it appears, right ? The best way (i believe) to do this is onready, with javascript. So, when you hide the element onready, just save the orig height in a var, so you don't have to hide(onready)-show-save height-hide to be able to toggle the elements visibility.

Look at what i did, it works perfectly :

$(document).ready(function(){
var origHeight = $("#foo").css('height');
$("#foo").css({"height" : "80px"});
$("#foo .toggle").bind("click", function(event){ toggleFoo(event, lastSearchesMidHeight); });
});

Here, when you call your toggle function, you know what is your original element height without wanking around.

I wrote it fast, hoping it could help someone in the future.

Pioul 2010-09-29 20:02:19

ansaurus

tags:

views:

answers:

How can I Animate an Element to its natural height using jQuery

related questions