height:auto problems

[Chris]

Hi,

CSS3 transitions have this issue too, so it would be great if Scripty
could come up with a way around it.

Trying to morph to 'height:auto' does nothing, whereas putting 'height:
240px' or similar works. Wehn you have several different height divs,
this can be a problem.

My code is:

elemHeight = parseInt($(elemId).getStyle('height'));
if(elemHeight == 0){
$(elemId).morph('height:auto;');
} else {
$(elemId).morph('height:0;');
}

This is essentially to do an accordion-type movement - I know there is
a separate Accordion' effect, but I can't use it in this instance.

Is there a way to make 'height:auto' work, without a long-winded way
of working out the actual height of the div and feeding in a number?

Chris

[Иван Жеков]

Auto isn't an actual height. It's more like "make it as tall as possible". Should you want to morph from a fixed height toward "auto" (and vice-versa) use the following (or similar) approach.

from auto to fixed:
get the current height of the element in pixels -- several possible ways to do it;
set the height in pixels;
animate from that to what ever;

from fixed to auto:
save the current height somewhere
set the height to "auto";
get the height in pixels and save it;
set height to original value;
animate from that value to pixel equivalent of the auto;
when morphing is done either leave the height as is, or set it to auto.

Also, use this -- elementHeight = $(element).getHeight(); -- instead of parseInt. You never know what kind of units one is using ;)

So the final snippet might look something in the vicinity of this:

// get original height
var __fixedHeight = $(element).getHeight();

// set height to auto and get pixel equivalent
element.style.height = "auto";
var __autoHeight = $(element).getHeight();

// revert to fixed height;
element.style.height = __fixedHeight + "px";

// the actual morph should the two values differ
if (__fixedHeight != __autoHeight)
$(element).morph("height:" + autoHeight)

Those set's and get's should run in mere milliseconds, so the the users should not not notice a thing; however it IS possible on slower machines that users DO notice some flickering.

--
You received this message because you are subscribed to the Google Groups "scripty2" group.
To post to this group, send email to scri...@googlegroups.com.
To unsubscribe from this group, send email to scripty2+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/scripty2?hl=en.

[Chris]

Thanks for the speedy reply!

I was wondering whether it would be necessary to find the required
height and morph to it - I know that CSS3 transitions have a similar
problem if you try and transition to height:auto.

I think it would be a great feature to have Scripty automatically
deduce the 'auto' height of the div - I might work on a workaround for
it (if I can find the time...)

Chris

> On 12 February 2010 17:35, Chris <chris5ma...@gmail.com> wrote:
>
>
>
>
>
> > Hi,
>
> > CSS3 transitions have this issue too, so it would be great if Scripty
> > could come up with a way around it.
>
> > Trying to morph to 'height:auto' does nothing, whereas putting 'height:
> > 240px' or similar works. Wehn you have several different height divs,
> > this can be a problem.
>
> > My code is:
>
> > elemHeight = parseInt($(elemId).getStyle('height'));
> > if(elemHeight == 0){
> >        $(elemId).morph('height:auto;');
> > } else {
> >        $(elemId).morph('height:0;');
> > }
>
> > This is essentially to do an accordion-type movement - I know there is
> > a separate Accordion' effect, but I can't use it in this instance.
>
> > Is there a way to make 'height:auto' work, without a long-winded way
> > of working out the actual height of the div and feeding in a number?
>
> > Chris
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "scripty2" group.
> > To post to this group, send email to scri...@googlegroups.com.
> > To unsubscribe from this group, send email to

> > scripty2+u...@googlegroups.com<scripty2%2Bunsu...@googlegroups.com>

[Thomas Fuchs]

If you set styles this way, there can't be any flickering, regardless
of how slow the machine is, because JavaScript and the browser
rendering runs on the same thread, so you're all good! :)

Best,
Thomas

2010/2/17 Иван Жеков <jon...@gmail.com>: