Rails spinoffs - Feb 2007 - "Jumping" Elements When Using Effect.SlideDown in Script.aculo.us

I''ve created the smallest example I could:

    http://pmade.com/distfiles/slidedown.html

When you click the test button, the effect will run, but at the very
end the final paragraph will "jump" in instead of being part of the
slide animation.  I''m not sure what I''m doing wrong here, am I
missing
something?

Thanks,

Peter


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1

Peter Jones wrote:
> http://pmade.com/distfiles/slidedown.html
> When you click the test button, the effect will run, but at the very
> end the final paragraph will "jump" in instead of being part of
the
> slide animation.  I''m not sure what I''m doing wrong here,
am I missing
> something?
The comment on line 699 of effects.js (revision 6170):
"SlideDown need to have the content of the element wrapped in a container
element with fixed height!"

In other words, your "test-effect" element initially is styled as
"display:
none", which means that browsers (AFAICT all except MSIE) will not bother
computing "how much vertical space would ''test-effect''
take if
''displayable''?". That''s why (first time only)
you''ll get that "random" sliding.
To cure it, you''ll have to enhance your "click" handler such
as
test-effect''s height is already known *before* instantiating that
SlideDown
effect (TMTE, choose whatever suits you - accordingly to your "real"
layout).

- --
Marius Feraru
-----BEGIN PGP SIGNATURE-----

iD8DBQFF23OhtZHp/AYZiNkRAnEYAJ42hWz9zzF4+zO7sc49vf3aWsbemgCg2GM3
pkpJh8XosrJSae7BOGo7THY=yN3g
-----END PGP SIGNATURE-----

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

On Feb 20, 3:18 pm, Marius Feraru <altb...-9gptZ63fvgw@public.gmane.org>
wrote:
> To cure it, you''ll have to enhance your "click" handler
such as
> test-effect''s height is already known *before* instantiating that
SlideDown
> effect (TMTE, choose whatever suits you - accordingly to your
"real" layout).

Do you have a recommendation on how to get the browser to calculate
that height?  Is there a common trick that everyone uses?


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

There''s a Prototype function Element.getHeight.  =)

http://prototypejs.org/api/element#method-getheight


TAG

On Feb 20, 2007, at 4:17 PM, Peter Jones wrote:
>
> On Feb 20, 3:18 pm, Marius Feraru
<altb...-9gptZ63fvgw@public.gmane.org> wrote:
>> To cure it, you''ll have to enhance your "click"
handler such as
>> test-effect''s height is already known *before* instantiating
that
>> SlideDown
>> effect (TMTE, choose whatever suits you - accordingly to your  
>> "real" layout).
>
>
> Do you have a recommendation on how to get the browser to calculate
> that height?  Is there a common trick that everyone uses?
>
>
> >

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

On Feb 20, 4:38 pm, Tom Gregory <t...-PGZyUNKar/Q@public.gmane.org>
wrote:
> There''s a Prototype function Element.getHeight.  =)
I misread the original response from Marius.  Is the only solution to
set a fixed height on the element?  Is there a way to get the browser
to calculate this height by itself, maybe by doing some magic with z-
index, showing the element behind the reset of the page, hiding it,
and then showing it again where you want it?

Element.getHeight, and Element.getDimensions, AFAICT, only return the
height from the CSS, they don''t attempt to calculate what it should be
if there isn''t a fixed height.

I''ve not had much luck in the past with setting a fixed height and
having it look correctly in more than one browser.  Does anyone have
tips regarding this?


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

These functions use the calculated height in pixels, that the browser  
provides, not CSS heights/widths.
What possibly might work is:

var height = $(''element'').show().getHeight();
$(''element'').hide();

There shouldn''t be any flickering when doing this, and you should get  
the height that the element would take if it was displayed.

Best,
Thomas

Am 21.02.2007 um 14:26 schrieb Peter Jones:
>
> On Feb 20, 4:38 pm, Tom Gregory <t...-PGZyUNKar/Q@public.gmane.org>
wrote:
>> There''s a Prototype function Element.getHeight.  =)
>
> I misread the original response from Marius.  Is the only solution to
> set a fixed height on the element?  Is there a way to get the browser
> to calculate this height by itself, maybe by doing some magic with z-
> index, showing the element behind the reset of the page, hiding it,
> and then showing it again where you want it?
>
> Element.getHeight, and Element.getDimensions, AFAICT, only return the
> height from the CSS, they don''t attempt to calculate what it
should be
> if there isn''t a fixed height.
>
> I''ve not had much luck in the past with setting a fixed height and
> having it look correctly in more than one browser.  Does anyone have
> tips regarding this?
>
>
> >
--
Thomas Fuchs
wollzelle

http://www.wollzelle.com

questentier on AIM
madrobby on irc.freenode.net

http://www.fluxiom.com :: online digital asset management
http://script.aculo.us :: Web 2.0 JavaScript
http://mir.aculo.us :: Where no web developer has gone before





--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1

Peter Jones wrote:
> On Feb 20, 4:38 pm, Tom Gregory <t...-PGZyUNKar/Q@public.gmane.org>
wrote:
>> There''s a Prototype function Element.getHeight.  =)
> I misread the original response from Marius.
No, you got it right :)
Tom had good reasons to suggest using Element''s getHeight, because in
fact
getDimensions (which is used by "getHeight") doesn''t simply
return a value,
it also tries to work around browsers'' optimization (to not do any flow
related computing before they are necessary) by twisting this very specific
case, "display: none". It forces browsers to do their job and compute
the
"real" dimensions.
Anyway, using getHeight won''t do any good because:
1) it''s already used internally by Effect.SlideDown
2) getDimensions() it''s not bulletproof, it fails to deliver the
correct
result on various browsers/situations. For instance:

- - Using Gecko/20070209 Firefox/2.0.0.1
- - Loaded http://pmade.com/distfiles/slidedown.html
- - Activated Firebug, focused its console and run:
>>> x = $(''test-effect'');
>>> x.getHeight();
124
>>> x.show().getHeight();
282
>>> x.hide().getHeight();
124

Sorry :(

And no, I don''t have an "elegant" workaround. :(

- --
Marius Feraru
-----BEGIN PGP SIGNATURE-----

iD8DBQFF3IQPtZHp/AYZiNkRAh/fAJ4x3UnsWha67SI2ngye57dvFHuJPgCdF1TQ
YSYP/Zt4SmrxDqUOPg/PYfw=ly+s
-----END PGP SIGNATURE-----

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html;charset=ISO-8859-1"
http-equiv="Content-Type">
</head>
<body bgcolor="#ffffff" text="#000000">
Are there *any* possible fixes for these specific cases? I am trying to
use this with tooltips and it works great in all cases in FF so far and
most in IE, but in one case in IE I have a
div&lt;form&lt;table&lt;other stuff and it only sizes it correctly
for
the button elements (contained in last row of table), all other
elements are not visible..<br>
<br>
Thanks,<br>
Colin<br>
<br>
Marius Feraru wrote:
<blockquote cite="mid:45DC840F.70402-9gptZ63fvgw@public.gmane.org"
type="cite">
  <pre wrap="">-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1

Peter Jones wrote:
  </pre>
  <blockquote type="cite">
    <pre wrap="">On Feb 20, 4:38 pm, Tom Gregory <a
class="moz-txt-link-rfc2396E"
href="mailto:t...-PGZyUNKar/Q@public.gmane.org">&lt;t...-PGZyUNKar/Q@public.gmane.org&gt;</a>
wrote:
    </pre>
    <blockquote type="cite">
      <pre wrap="">There''s a Prototype function
Element.getHeight.  =)
      </pre>
    </blockquote>
    <pre wrap="">I misread the original response from Marius.
    </pre>
  </blockquote>
  <pre wrap=""><!---->No, you got it right :)
Tom had good reasons to suggest using Element''s getHeight, because in
fact
getDimensions (which is used by "getHeight") doesn''t simply
return a value,
it also tries to work around browsers'' optimization (to not do any flow
related computing before they are necessary) by twisting this very specific
case, "display: none". It forces browsers to do their job and compute
the
"real" dimensions.
Anyway, using getHeight won''t do any good because:
1) it''s already used internally by Effect.SlideDown
2) getDimensions() it''s not bulletproof, it fails to deliver the
correct
result on various browsers/situations. For instance:

- - Using Gecko/20070209 Firefox/2.0.0.1
- - Loaded <a class="moz-txt-link-freetext"
href="http://pmade.com/distfiles/slidedown.html">http://pmade.com/distfiles/slidedown.html</a>
- - Activated Firebug, focused its console and run:
  </pre>
  <blockquote type="cite">
    <blockquote type="cite">
      <blockquote type="cite">
        <pre wrap="">x = $(''test-effect'');
x.getHeight();
        </pre>
      </blockquote>
    </blockquote>
  </blockquote>
  <pre wrap=""><!---->124
  </pre>
  <blockquote type="cite">
    <blockquote type="cite">
      <blockquote type="cite">
        <pre wrap="">x.show().getHeight();
        </pre>
      </blockquote>
    </blockquote>
  </blockquote>
  <pre wrap=""><!---->282
  </pre>
  <blockquote type="cite">
    <blockquote type="cite">
      <blockquote type="cite">
        <pre wrap="">x.hide().getHeight();
        </pre>
      </blockquote>
    </blockquote>
  </blockquote>
  <pre wrap=""><!---->124

Sorry :(

And no, I don''t have an "elegant" workaround. :(

- --
Marius Feraru
-----BEGIN PGP SIGNATURE-----

iD8DBQFF3IQPtZHp/AYZiNkRAh/fAJ4x3UnsWha67SI2ngye57dvFHuJPgCdF1TQ
YSYP/Zt4SmrxDqUOPg/PYfw=ly+s
-----END PGP SIGNATURE-----



  </pre>
</blockquote>
<br>
--~--~---------~--~----~------------~-------~--~----~<br>
You received this message because you are subscribed to the Google Groups
&quot;Ruby on Rails: Spinoffs&quot; group. <br> To post to this
group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org <br> To
unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
<br> For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en <br>
-~----------~----~----~----~------~----~------~--~---<br>
</body>
</html>

<br>

> Are there *any* possible fixes for these specific cases? I am trying to use
this with tooltips and it works great in all cases in FF so far and most in IE,
but in one case in IE I have a div<form<table<other stuff and it only
sizes it correctly for the button elements (contained in last row of table), all
other elements are not visible..
> Thanks,
> Colin
Hi Colin, Hi Marius,

This is definitely a bug... and should be corrected.

I''m getting much better results by applying Element.makePositioned()
to the parent element.

Try it for yourself on Marius'' test page:

x = $(''test-effect'');
x.up().makePositioned();
x.getHeight();

So this is something we should definitely look into. The slight
difference we still get is probably due to some difference in how the
box-model deals with absolutely and statically positioned elements.
I''m sure we can iron those differences out pretty easily.

Regards,

Tobie





--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---