Jump to:

17452 Posts in 4473 Topics by 1971 members

Archive

SilverStripe Forums » Archive » Demo: Smooth resizing effect for sidebar sections. What do you think?

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

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

Page: 1 2
Go to End
Author Topic: 4893 Views
  • elijahlofgren
    Avatar
    Google Summer of Code Hacker
    222 Posts

    Demo: Smooth resizing effect for sidebar sections. What do you think? Link to this post

    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

  • Tim
    Avatar
    Core Development Team
    201 Posts

    Re: Demo: Smooth resizing effect for sidebar sections. What do you think? Link to this post

    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.

  • Ingo
    Avatar
    Forum Moderator
    801 Posts

    Re: Demo: Smooth resizing effect for sidebar sections. What do you think? Link to this post

    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.

  • elijahlofgren
    Avatar
    Google Summer of Code Hacker
    222 Posts

    Re: Demo: Smooth resizing effect for sidebar sections. What do you think? Link to this post

    > 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

  • Sam
    Avatar
    Administrator
    679 Posts

    Re: Demo: Smooth resizing effect for sidebar sections. What do you think? Link to this post

    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.

  • Sean
    Avatar
    Forum Moderator
    921 Posts

    Re: Demo: Smooth resizing effect for sidebar sections. What do you think? Link to this post

    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

  • elijahlofgren
    Avatar
    Google Summer of Code Hacker
    222 Posts

    Re: Demo: Smooth resizing effect for sidebar sections. What do you think? Link to this post

    > 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

  • elijahlofgren
    Avatar
    Google Summer of Code Hacker
    222 Posts

    Re: Demo: Smooth resizing effect for sidebar sections. What do you think? Link to this post

    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

    4893 Views
Page: 1 2
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.