There is a <ul> list that I’m retrieving via XHR and inserting into another node (<div>). This list has a different number of elements every time (so the height of the resulting node varies).
I’d like to animate the <div> into which I’m inserting that list as it takes the new height. So, say the div was initially 100px, and the height of the XHR-retrieved list is going to be 150px, the <div> should smoothly expand to the new height of 150px.
To do this, I need the height of the rendered list (taking all the page styles into account) before it is actually rendered. Question: (a) how would you find the height, (b) do you see another way of doing this animation, and (c) is this at all possible?
a) as far as i know it isn’t possible to accurately determin the height of a not yet rendered element
b) With jQuery’s >slideUp> and slideDown this is perfectly doable, are you using a framework?
c) yes, you might have to put a wrapper div around the depending on the way you do it.
More:
By putting a wrapper <div> around your <ul> and setting th <div> to height:0 and overflow:hidden you can perfectly render the <ul> in it without showing it. Then you have plenty of time for javascript to get the dimensions of the <ul> and animate/resize the wrapping <div> to the <ul>’s height without ever showing your <ul>.