I've figured it out by myself. Here's the code (made a slide-extend.js
file). I'm quite sure there's some better way to do it, but I'm in a
hurry, and for me, it works. What I 've done is simply to change the
props that are processed. Doesn't change element's marginTop anymore.
Changes only wrapper's height and marginTop instead.
Fx.SlideExt = new Class({
Extends: Fx,
options: {
mode: 'vertical'
},
initialize: function(element, options){
this.addEvent('complete', function(){
this.open = (this.wrapper['offset' +
this.layout.capitalize()] !=
0);
if (this.open && Browser.Engine.webkit419)
this.element.dispose
().inject(this.wrapper);
}, true);
this.element = this.subject = document.id(element);
this.parent(options);
var wrapper = this.element.retrieve('wrapper');
this.wrapper = wrapper || new Element('div', {
styles: $extend(this.element.getStyles('margin',
'position'),
{overflow: 'hidden'})
}).wraps(this.element);
this.now = [];
this.open = true;
},
vertical: function(){
this.margin = 'margin-top';
this.layout = 'height';
this.wrMargin = 'margin-top'
this.offset = this.element.offsetHeight;
},
horizontal: function(){
this.margin = 'margin-left';
this.layout = 'width';
this.wrMargin = 'margin-right'
this.offset = this.element.offsetWidth;
},
set: function(now){
this.wrapper.setStyle(this.layout,now[1]);
this.wrapper.setStyle(this.wrMargin,now[2]);
return this;
},
compute: function(from, to, delta){
return [0, 1, 2].map(function(i){
return Fx.compute(from[i], to[i], delta);
});
},
start: function(how, mode){
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 wrMargin = this.wrapper.getStyle(this.wrMargin).toInt();
var caseIn = [[margin, layout, wrMargin], [0, this.offset, 0]];
var caseOut = [[margin, layout, wrMargin], [this.offset, 0,
this.offset]];
var start;
switch (how){
case 'in': start = caseIn; break;
case 'out': start = caseOut; break;
case 'toggle': start = (layout == 0) ? caseIn : caseOut;
}
//console.log('ok',this.parent);
return this.parent(start[0], start[1], start[2]);
},
slideIn: function(mode){
return this.start('in', mode);
},
slideOut: function(mode){
return this.start('out', mode);
},
hide: function(mode){
this[mode || this.options.mode]();
this.open = false;
return this.set([this.offset, 0, this.offset]);
},
show: function(mode){
this[mode || this.options.mode]();
this.open = true;
return this.set([0, this.offset, 0]);
},
toggle: function(mode){
return this.start('toggle', mode);
}
});
Element.Properties.slide = {
set: function(options){
var slide = this.retrieve('slide');
if (slide) slide.cancel();
return this.eliminate('slide').store('slide:options',
$extend({link:
'cancel'}, options));
},
get: function(options){
if (options || !this.retrieve('slide')){
if (options || !this.retrieve('slide:options'))
this.set('slide',
options);
this.store('slide', new Fx.SlideExt(this, this.retrieve
('slide:options')));
}
return this.retrieve('slide');
}
};
On 24 Lug, 12:01, stratboy <[email protected]> wrote:
> Hi, anyone knows a mod of Fx.Slide that lets me to slide an element
> from bottom to top instead of top to bottom? I googled for it but
> found anything..
