Hi, I have a div { position: fixed;left: 50%;top: 50%; }
now I want to set marginLeft to (-whatever / 2) + "px" but with an
animation like effect.scale. is this possible?
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
hehe and here the solution :-)
writing those effects for aculos is much simplier than I expected!
maybe someone will put this in the right place:
Effect.Margin = Class.create();
Object.extend(Object.extend(Effect.Margin.prototype,
Effect.Base.prototype), {
initialize: function(element) {
this.element = $(element);
if(!this.element) throw(Effect._elementDoesNotExistError);
var options = Object.extend({
top: 0,
left: 0,
bottom: 0,
right: 0,
mode: ''absolute''
}, arguments[1] || {});
this.start(options);
},
setup: function() {
this.element.makePositioned();
this.originalTop
parseFloat(this.element.getStyle(''marginTop'') ||
''0'');
this.originalLeft
parseFloat(this.element.getStyle(''marginLeft'') ||
''0'');
this.originalBottom
parseFloat(this.element.getStyle(''marginBottom'') ||
''0'');
this.originalRight
parseFloat(this.element.getStyle(''marginRight'') ||
''0'');
if(this.options.mode != ''absolute'') {
// absolute movement, so we need to calc deltaX and deltaY
this.options.top -= this.originalTop;
this.options.left -= this.originalLeft;
this.options.bottom -= this.originalBottom;
this.options.right -= this.originalRight;
}
},
update: function(position) {
this.element.setStyle({
marginTop: Math.round(this.options.top * position +
this.originalTop) + ''px'',
marginLeft: Math.round(this.options.left * position +
this.originalLeft) + ''px'',
marginBottom: Math.round(this.options.bottom * position +
this.originalBottom) + ''px'',
marginRight: Math.round(this.options.right * position +
this.originalRight) + ''px''
});
}
});
new Effect.Margin(''testdiv'', { top: 50, duration: 2 });
ah and an example page is here: http://www.baldursoft.de/effect.margin.php
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
*I''m not entirely sure, as I haven''t used it yet*, but wouldn''t Morph do exactly what you need? :) -Nicolas On 8/31/07, AlexL <alex-PFDjRTEs7zk@public.gmane.org> wrote:> > hehe and here the solution :-) > writing those effects for aculos is much simplier than I expected! > maybe someone will put this in the right place: > > > Effect.Margin = Class.create(); > Object.extend(Object.extend(Effect.Margin.prototype, > Effect.Base.prototype), { > initialize: function(element) { > this.element = $(element); > if(!this.element) throw(Effect._elementDoesNotExistError); > var options = Object.extend({ > top: 0, > left: 0, > bottom: 0, > right: 0, > mode: ''absolute'' > }, arguments[1] || {}); > this.start(options); > }, > setup: function() { > this.element.makePositioned(); > this.originalTop > parseFloat(this.element.getStyle(''marginTop'') || ''0''); > this.originalLeft > parseFloat(this.element.getStyle(''marginLeft'') || ''0''); > this.originalBottom > parseFloat(this.element.getStyle(''marginBottom'') || ''0''); > this.originalRight > parseFloat(this.element.getStyle(''marginRight'') || ''0''); > if(this.options.mode != ''absolute'') { > // absolute movement, so we need to calc deltaX and deltaY > this.options.top -= this.originalTop; > this.options.left -= this.originalLeft; > this.options.bottom -= this.originalBottom; > this.options.right -= this.originalRight; > } > }, > update: function(position) { > this.element.setStyle({ > marginTop: Math.round(this.options.top * position + > this.originalTop) + ''px'', > marginLeft: Math.round(this.options.left * position + > this.originalLeft) + ''px'', > marginBottom: Math.round(this.options.bottom * position + > this.originalBottom) + ''px'', > marginRight: Math.round(this.options.right * position + > this.originalRight) + ''px'' > }); > } > }); > > new Effect.Margin(''testdiv'', { top: 50, duration: 2 }); > > ah and an example page is here: http://www.baldursoft.de/effect.margin.php > > > > >--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
oh yeah you are right, looks like it can do just about anything. nice effect! allthough my version supports relative and absolute margin changes ;-) (I guess I will use morph from now on) thx --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---