Scriptaculous: How to make blind or slide smooth and not jump? Or is it not possible?

Question

I was seeing a strange phenomena when using Scriptaculous BlindDown and SlideDown effects, where they would smoothly slide, and then at the very end, they would jump an additional amount, maybe 10% of the slide distance.

I already saw the note on the BlindDown page that you have to be sure not to use padding, which I'd already done.

I was still thinking that this must be my mistake somehow, when I noticed that I see the exact same thing happening on their demo page for Toggle when clicking on either the Blind or Slide demos: http://wiki.github.com/madrobby/scriptaculous/effect-toggle

Firefox 3.6.7, Chrome 6, and Internet Explorer 8 all display this effect on my computer.

So I was thinking about just writing it off and either living with it or cutting the effect out, when I noticed that the page for BlindDown does not display this effect: http://wiki.github.com/madrobby/scriptaculous/effect-blinddown

So there must be a way to make this work. On my page, the jump is occurring whether I directly use BlindDown/Slide or whether I use Toggle.

Has anyone out there used these and managed to do so without this problem? Any ideas on what the secret is?

Answer 1

In my experience, the jumping is just a performance issue, which is effected by the system specs, browser, and complexity of the html content you are toggling. Some browsers like safari and chrome have a pretty good javascript engine making them more efficient.

I see this is happening for you even when using chrome though? Is the html content particularly complex, or your computer overloaded with applications running?

Answer 2

There is definitely a little very well known secret... Have you tried wrapping your content in an extra div container? You should consider this best practice and almost a requirement specifically when using Scriptaculous effects.

For example... Say you want to slideDown or Toggle a login form - and you have::

<div id="login-panel">
   <input type="text" name="username" />
   <button type="submit" name="send">Login</button>
</div>

All you have to do is add an extra inner div tag::

<div id="login-panel">
<div><!-- extra div here -->
   <input type="text" name="username" />
   <button type="submit" name="send">Login</button>
</div><!-- close it here -->
</div>

Now when you do something like Effect.toggle("login-panel", 'slide'); the transition should be much smoother and less jumpy. It may seem a little sloppy but it almost always helps. Hope this helps you!!