Effect Help

[Jerod Venema <jvenema (at) gmail.com>]

Hey Yehuda,

I've created some code for a core effect called "adjust" that handles margin and padding adjustments (as Danger was suggesting)...I expect using this adjust effect and a slightly modified BlindUp/Down you could do what you want. If nothing else it should help you get a bit more of an idea of some of the options available....

//BEGIN CODE

Effect.Adjust = Class.create();
Object.extend(Object.extend(Effect.Adjust.prototype, Effect.Base.prototype), {
  initialize: function(element, property) {
    this.element  = $(element);
    this.property = property;
    var options = Object.extend({
      toRight: null,
      toLeft: null,
      toTop: null,
      toBottom: null
    }, arguments[2] || {});
  
    this.originalRight
  = parseFloat(Element.getStyle(this.element, property + '-right')  || '0');
    this.originalLeft   = parseFloat(Element.getStyle(this.element, property + '-left') || '0');
    this.originalTop    = parseFloat(Element.getStyle
(this.element, property + '-top') || '0');
    this.originalBottom = parseFloat(Element.getStyle(this.element, property + '-bottom') || '0');

    this.start(options);
  },
  update: function(position) {
    rightd = (this.originalRight * (1-position)) + (this.options.toRight * position); 
    leftd = (this.originalLeft * (1-position)) + (this.options.toLeft * position);
    topd = (this.originalTop * (1-position)) + (
this.options.toTop * position);
    bottomd = (this.originalBottom * (1-position)) + (this.options.toBottom * position);
    this.makeAdjustment(rightd, leftd, topd, leftd);
  },
  makeAdjustment: function(rightd, leftd, topd, bottomd) {
    if(this.options.toRight != null) { this.element.style[this.property + 'Right'] = rightd + "px"; }
    if(this.options.toLeft != null) { this.element.style[this.property+ 'Left'] = leftd + "px"; }
    if(this.options.toTop != null) { this.element.style[this.property + 'Top'] = topd + "px"; }
    if(this.options.toBottom != null) { this.element.style[this.property + 'Bottom'] = bottomd + "px"; }
  }
});

//sample effect...takes an element, changes the right margin to the specified size
Effect.ChangeRightMargin = function(element, to) {
  new Effect.Adjust(element, 'margin', {toRight: to});
}

//END CODE

Hope it helps...

-Jerod

On 2/13/06, Danger Stevens < scriptaculous (at) studiodanger.com> wrote:

I'm still trying to work out how to do a blind up to make an element appear and a blind down to disappear. I haven't been able to adequate decipher the core effects to figure out how to make it happen, although I can see that it'll require Effect.scale. Can anyone point me to documentation that'd help me along (other than the one on the main wiki, which hasn't helped enough), or describe how to go about doing it?

-- Yehuda Katz

I imagine you'll have to set up a way for the div's margin-top setting to be complementary to the div height.  In other words, as the blind-down progresses the margin-top gets larger, and the margin-top will have to start as the full div height for the blind-up and shrink as the Effect.scale increases the visible portion of the div.
Sorry I don't have the means to provide code for that, good luck though!

   - Danger

_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs (at) lists.rubyonrails.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs

_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs (at) lists.rubyonrails.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs