Re: [jQuery] Animation dimensions - problem and solution
I've fixed this and checked it in to SVN - this'll be in the next
point release (probably 1.0.2). Thanks!
--John
On 8/31/06, Alistair Potts [EMAIL PROTECTED] wrote:
When jquery tries to get the height of a (display:none) element, it
clones the element as (visiblity:hidden display:block), appends it to
the BODY, calculates the dimensions, and removes it.
Which is all very clever.
The problem comes that if you style your element using css selectors,
then you have to ensure that the css is valid when the above 'trick'
takes place.
For instance, say we had a paragraph with padding defined in the css
like this:
div p { padding: 10px; display: none; }
div
pyadda bla/p
/div
jquery will not work as expected if you do animation on it, for instance
to make it slide into view. The calculation of the height won't take
into account the padding, because the cloning method won't 'see' the css.
Solution: always use ids and classes, but don't nest them in the css; e.g.
p.invisible { padding: 10px; display: none; }
div
p class=invisibleyadda bla/p
/div
The css will always be valid regardless of where the paragraph is in the
DOM.
Thought this might be useful!
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
[jQuery] Animation dimensions - problem and solution
When jquery tries to get the height of a (display:none) element, it
clones the element as (visiblity:hidden display:block), appends it to
the BODY, calculates the dimensions, and removes it.
Which is all very clever.
The problem comes that if you style your element using css selectors,
then you have to ensure that the css is valid when the above 'trick'
takes place.
For instance, say we had a paragraph with padding defined in the css
like this:
div p { padding: 10px; display: none; }
div
pyadda bla/p
/div
jquery will not work as expected if you do animation on it, for instance
to make it slide into view. The calculation of the height won't take
into account the padding, because the cloning method won't 'see' the css.
Solution: always use ids and classes, but don't nest them in the css; e.g.
p.invisible { padding: 10px; display: none; }
div
p class=invisibleyadda bla/p
/div
The css will always be valid regardless of where the paragraph is in the
DOM.
Thought this might be useful!
A
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
