Scriptaculous effects and Control.Tabs?

Has anybody used Scriptaculous transition effects with Control.Tabs? I am trying to figure out the best way to add it. Ideally, the content would fade & slide depending on the relative heights of the divs being tabbed between.

Posted July 10th, 2007 at 10:42am by dylan

//this.containers[link.key].show();
new Effect.BlindDown(this.containers[link.key]);

somewhere around line 104

Posted July 11th, 2007 at 2:13am by Roland

I think I'll add some callback hooks for this in the next version, with Element.show / Element.hide as the defaults.

Posted July 12th, 2007 at 2:08pm by ryan

Also using this as a test thread...

Posted July 12th, 2007 at 2:09pm by ryan

Something poetic about how many times the microsoft script debugger has crashed both IE and itself while trying to fix an IE error on this page...

Posted July 12th, 2007 at 2:14pm by ryan

Control.Tabs 2.1.0 is up. I'm not going to post it quite yet, anyone want to verify that it works cross browser (don't have the time right now, which is why I'm not posting it. Couple of changes. Hide on every container is called first, then the hideFunction on the previous container, then the showFunction on the new container each time the tab changes. Those are the names of the new options. Not sure about this on the whole...

Posted July 12th, 2007 at 3:20pm by ryan

Post it on the project page that is, or mark it as the latest version...

Posted July 12th, 2007 at 3:20pm by ryan

Hrm. It's really close, I think. I had a look in Safari, Camino, Firefox this:


new Control.Tabs('my_tabs',{
    hideFunction: Effect.Fade,
    showFunction: Effect.Appear
});

basically works. The one issue is that the functions don't wait for the hideFunction action to be completed before starting the showFunction. So you end up with both tabs' content on the page at the same time (briefly).


new Control.Tabs('my_tabs',{
    showFunction: Effect.Appear
});

Looks pretty nice though (a quick hide and then a fade in). In any case, thanks for looking into this, Ryan, whether or not you decide to keep it in.

Posted July 15th, 2007 at 11:13am by dylan

I plan testing on explorer in a bit, by the way.

Posted July 15th, 2007 at 11:13am by dylan

Just found Control.Tabs for a project I'm working on and absolutely love it! Thanks for all the work on it. I'm interested in this Scriptaculous stuff with Control.Tabs, but I was curious if there was a way to set it up so that the default tab's content doesn't fade in every time? Thanks!

Posted July 31st, 2007 at 9:11am by AgentPhoenix

Ryan, thank you so much for your well thought-out and well-executed scripts, and thank you for making them available to the public!

No doubt you're very busy, but have you had time to work on your release of control.tabs v2.1 as mentioned in your post above? It would be extremely useful to have the ability to have some control over the use of scriptaculous effects, so the fade-out/fade-in switch was possible. Check out:

http://www.apple.com/logicstudio/logicpro/#new

Another very useful feature would be to have the tab-clicks change the url in the address bar (as in the sample link above), so that people could bookmark them directly. (I know you built in the ability to jump directly to a tab using #tab3, but it would be great if the address bar url changed as you use the page.)

Thanks!

Posted September 13th, 2007 at 1:32pm by Joseph

I tried using the version 2.1.0 script you linked above, and it works nicely to just give a fade-in effect. The only problem is that when the old tab content disappears, the area collapses, and any content on the page below fills the space for a brief flash, before the fade-in starts to happen (pushing the lower content back into place). Any way to control that? Perhaps to start the fade-in with an almost invisible alpha, rather than at zero?

Thanks.

Posted September 14th, 2007 at 3:24pm by Joseph

Did scriptaculous effects ever make it into an official release? We're at 2.1.1 but there's no mention in the documentation... was this scrapped or put off until later? I'm really looking forward to this option. :)

Posted December 3rd, 2007 at 1:21pm by thirdopticaltool

You need to set the showFunction and hideFunction options as shown previously

Posted December 3rd, 2007 at 4:18pm by ManicPanda

Login or Register to Post