slight typo in usage:
new Fx.Slide2(el,{outHeight : 40});
should be:
new Fx.Slide(el,{outHeight : 40});
On Wed, May 13, 2009 at 4:20 PM, Paul Hunt <paulhun...@gmail.com> wrote:
> Nathan,Extremely well done. I appreciate the effort and will implement
> this change immediately. Thanks.
>
> On Wed, May 13, 2009 at 4:15 PM, nwhite <changereal...@gmail.com> wrote:
>
>>
>> Well your use case is a bit beyond the scope of Fx.Slide but Mootools
>> architecture makes it easy to adapt for your own solution:
>>
>> // start is the brains that all actions are routed through in
>> Fx.Slide so we need to modify it. All I did was copy the method from
>> Fx.Slide
>> Fx.Slide.implement({
>>
>> options : {
>> outHeight: 0 // a new option we can set to control the
>> action you want
>> },
>>
>> start : function(how,mode){
>> console.debug('override');
>> if (!this.check(how, mode)) return this;
>> this[mode || this.options.mode]();
>> var margin = this.element.getStyle(this.margin).toInt();
>> var layout = this.wrapper.getStyle(this.layout).toInt();
>> var caseIn = [[margin, layout], [0, this.offset]];
>> var caseOut = [[margin, layout],
>> [-this.offset+this.options.outHeight, this.options.outHeight]]; // added
>> changes here
>> var start;
>> switch (how){
>> case 'in': start = caseIn; break;
>> case 'out': start = caseOut; break;
>> case 'toggle': start = (layout == 0) ? caseIn :
>> caseOut;
>> }
>> return this.parent(start[0], start[1]);
>> }
>> });
>>
>> Usage is the same just pass the new option to get desired results:
>>
>> new Fx.Slide2(el,{outHeight : 40});
>>
>> The nice part about this new implementation is Fx.Slide now has more
>> functionality but at the same time doesn't break the interface, the default
>> remains exactly like old behavior.
>>
>>
>> Nathan
>>
>>
>>
>>
>> On Wed, May 13, 2009 at 2:54 AM, Paul <paulhun...@gmail.com> wrote:
>>
>>>
>>> Hi Daniel,
>>> I also thought about creating multiple divs that would slide in and
>>> out to achieve what I wanted but in the end, and because of the sheer
>>> number of panels and sliding menus I would have to maintain "complete"
>>> events for, I decided against it. I think your explanation proves my
>>> point on the confusion factor =)
>>>
>>> So my solution, the Yahoo library (http://developer.yahoo.com/yui/). I
>>> already use quite a few of their components so it was not surprise
>>> that they had exactly what I was looking for.
>>>
>>> For a really simple example check out:
>>> http://blog.jc21.com/staging/slideandhide.php
>>>
>>> The trick is in the line:
>>> var anim = new YAHOO.util.Anim('slider2',{height:{to:0}},
>>> 1,YAHOO.util.Easing.easeIn);
>>>
>>> change {height:{to:0}} to {height:{to:40}} and the slideout will
>>> remain open 40 pixels. Perfect!
>>>
>>> Good luck,
>>> Paul
>>>
>>>
>>> On May 13, 2:36 am, Annis McKenzie <annismcken...@googlemail.com>
>>> wrote:
>>> > I want to achieve something similar to this and the only way I can
>>> > think of, is creating another container where your menu is, so that
>>> > this div contains all the menu items that you want to be visible after
>>> > slideIn(). Sliding this one out also doesn't slide out the menu
>>> > portion to open it again. Man, that sounds like I couldn't understand
>>> > it myself:
>>> >
>>> > <div>
>>> > <div id="menu-item-container"></div> <== this one slides in and out
>>> > and contains the menu items you want to show when opening the menu
>>> > <div id="top-menu"></div> <== this one contains the buttons to slide
>>> > the menu item container in and out
>>> > </div>
>>> >
>>> > I Hope you get what I mean. :) Post back, if there's anything else.
>>> >
>>> > Cheers, Daniel
>>> >
>>> > On May 12, 6:30 pm, Paul <paulhun...@gmail.com> wrote:
>>> >
>>> > > Hello,
>>> > > I am trying to get a visual display to behave the way I want using
>>> > > Fx.Slide but I am having some problems.
>>> >
>>> > > Here's the effect that Im trying to achieve. I have a "Main" div and
>>> > > then my "Menu" div underneath that. When i click an image I want the
>>> > > "Menu" div to slideIn(). No problem so far.
>>> >
>>> > > The problem comes when I slideOut(). When I slide my "Menu" div out I
>>> > > actually want to keep the bottom 40px of it visible...i.e. I only
>>> want
>>> > > to partially slideOut() or slideOut() a certain height.
>>> >
>>> > > How can I do this?
>>> >
>>> > > Regards,
>>> > > Paul
>>>
>>
>>
>
