Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Archive /

Our old forums are still available as a read-only archive.

Moderators: martimiz, Sean, biapar, Willr, Ingo, simon_w

Demo: Smooth resizing effect for sidebar sections. What do you think?


Go to End
Reply


10 Posts   5021 Views

Avatar
elijahlofgren

Google Summer of Code Hacker, 222 Posts

27 June 2007 at 5:22am

Yesterday Sean mentioned that I could apply an "accordian effect" to the 3 sections in the left sidebar of "Site Content": http://blogs.grf-design.com/archives/2006/04/accordion_effec.html

I assumed that we wanted to allow multiple sections to be open at a time, so I started experimenting and had fun playing around with it late into last night. :)

Using a combination of Effect.Morph and Effect.Blind Up, I got
smooth resizing working quite nicely by making these changes:
http://www.elijahlofgren.com/silverstripe/patches/Left-Frame-Sections-Smooth-Resize-cms-gsoc-r37367.patch

However, Effect.Morph (quite an amazing thing) requires
"script.aculo.us V1.7 and later" so I used Prototype 1.5.1.1 and script.aculo.us 1.7.1 beta 3: to try it out.

Here is a demo where you can actually click the white "+" and "-" icons to try it. I think the effect is quite pleasing instead of the current jerkiness:
http://www.elijahlofgren.com/silverstripe/demos/smooth-sidebar-resizing.html

Note: The demo works in Safari 3, Firefox 2, but not in IE6 or IE7. Also, the demo Admin panel is not functional.

If you guys think it is a good idea a nice effect, I will look into upgrading Prototype and script.aculo.us and getting it working in IE.

Let me know what you think! :)

Thanks,

Elijah

Avatar
Tim

Core Development Team, 201 Posts

27 June 2007 at 11:33am

Hi Elijah,

This looks fantastic - a major improvement over the past implementation :-)

Re using more modern version of Prototype and script.aculo.us, upgrading these is no trivial exercise. I've asked Ingo to give you some guidance around this as we've looked into this in the past.

Avatar
Ingo

Forum Moderator, 801 Posts

27 June 2007 at 11:51am

Edited: 27/06/2007 11:55am

first of all, looks awesome - you're really bringing silverstripe forward, and we're all excited to merge these changes back and amaze our clients and the community with the new flashy interface :)

i've just downloaded accordion.js from the original url, it just uses the scriptaculous v1.0 API:
http://wiki.script.aculo.us/scriptaculous/show/Effect.Parallel
http://wiki.script.aculo.us/scriptaculous/show/Effect.SlideDown

where did you implement Effect.Morph? in which file did you save the accordion code in your example? can't find accordion.js in there...
do we really need the morph-effect, or can we achieve this with "traditional" scriptaculous-animation as well?

migrating to prototype v1.5.1 is a huge task in silverstripe, as we customized prototype v1.4rc1 quite heavily. while this will happen at some point (i've already started), there's too much side-effects and testing involved to upgrade just for having a single effect working :)
in the same run, we will upgrade scriptaculous to the latest version.

in case you really need morph, you can try to separate the functionality out of scriptaculous v1.7 and put it in prototype_improvements.js.

Avatar
elijahlofgren

Google Summer of Code Hacker, 222 Posts

27 June 2007 at 2:24pm

> first of all, looks awesome - you're really bringing silverstripe forward, and we're all excited to merge these changes back and amaze our clients and the community with the new flashy interface :)

Thanks! I'm enjoying it. :)

> i've just downloaded accordion.js from the original url, it just uses the scriptaculous v1.0 API:
http://wiki.script.aculo.us/scriptaculous/show/Effect.Parallel
http://wiki.script.aculo.us/scriptaculous/show/Effect.SlideDown

I didn't actually use accordion.js at all. I just the idea to use Effect.Blind Up from that.

> where did you implement Effect.Morph? in which file did you save the accordion code in your example? can't find accordion.js in there...
do we really need the morph-effect, or can we achieve this with "traditional" scriptaculous-animation as well?

As shown in the patch linked to above, I change this line in cms/javascript/SideTabs.js from:
this.tabs.linkedPane.style.height = eachHeight + 'px';
to:
this.tabs.linkedPane.morph('height: ' + eachHeight + 'px;');

I think it might be possible to achieve the same effect with the current version of scriptaculous, I was just having trouble making the still open sections grow larger smoothly when a section is closed.

> migrating to prototype v1.5.1 is a huge task in silverstripe, as we customized prototype v1.4rc1 quite heavily.

I thought this might be the case. Not something I want to attempt at this point. :)

> in case you really need morph, you can try to separate the functionality out of scriptaculous v1.7 and put it in prototype_improvements.js.

Thanks! I may look into that tomorrow if I can't get smooth box size increasing working using traditional effects.

Eagerly awaiting tomorrow so I can start working on this,

Elijah

Avatar
Sam

Administrator, 685 Posts

28 June 2007 at 10:47am

The accordion effects are cool, but I think they're a bit slow. You probably want 0.3sec - 0.5sec for the effect, or it gets in the way of people using the system.

Avatar
Sean

Forum Moderator, 922 Posts

28 June 2007 at 11:47am

Edited: 28/06/2007 11:50am

I think it would be perfect if it was slightly faster. It's a welcome thing, considering at the moment it's very jagged when you click the tabs.

Great work though Elijah, and I'm glad to see you're enjoying it. :-)

Cheers,
Sean

Avatar
elijahlofgren

Google Summer of Code Hacker, 222 Posts

28 June 2007 at 5:15pm

> The accordion effects are cool, but I think they're a bit slow. You probably want 0.3sec - 0.5sec for the effect, or it gets in the way of people using the system.
> I think it would be perfect if it was slightly faster. It's a welcome thing, considering at the moment it's very jagged when you click the tabs.

I'll see what I can do. I agree that it needs to be fast. I'll experiment with setting the resize effect duration to a shorter time.

I didn't work on this today, because I worked on moving the 'Delete' and 'Move Files' buttons in the File & Images again. Feedback requested:
http://www.silverstripe.com/google-summer-of-code-forum/flat/1607?showPost=1791#post1791

Thanks for all the time you guys have put into helping me with all my questions! :)

Good night,

Elijah

Avatar
elijahlofgren

Google Summer of Code Hacker, 222 Posts

29 June 2007 at 3:57pm

Today I found Effect.ReSize, which eliminated my need for Effect.Morph:
http://wiki.script.aculo.us/scriptaculous/show/Effect+Resize+Extension
I was able to easily modify it to work with our current version of Prototype. :)

In order to make it faster, I made it only apply Effect.ReSize when a section is closed or opened, not when the page is loaded or resized. In addition, I set the effect duration to 0.4 sec. Let me know if you think that should be changed.

Here are the changes I've made to add smooth resizing to the sections:
http://www.elijahlofgren.com/silverstripe/diffs/Left-Frame-Sections-Smooth-Resize-with-Effect-ReSize-cms-gsoc-2007-06-28-2250.diff

Here is a new demo, showing the faster resize effect:
http://elijahlofgren.com/silverstripe/demos/fast-smooth-sidebar-resize.html

I have tested with Firefox2, IE6, IE7, and Safari 3 and it seems to work well in each of those browsers.

What do you think?

If you guys think this is good, I will clean up the code and plan on committing it tomorrow.

Good night,

Elijah

Go to Top