This is an example of how to create an extension which extends the Effect.Base class in scriptaculous, the example code is used in Gaia Ajax Widgets to make sure the Layout Widget is being resized as an effect when dragged.

Use as you wish!
I’ve MIT licensed the code for those that want to use it in their own projects…
It basically works more or less like a “normal scriptaculous effect” in that you instantiate it through New Effect.Re Size with the element and the options.
Though you CAN also use the static version (Effect.Re Size.Direct) to ditch the animations. In that case you don’t use new but use the Effect.Resize.Direct as a function taking the same arguments however as the new version…

Usage is e.g.:


new Effect.ReSize($('myElement'), {direction:'vert', amount:-150});

The above will make the element with the ID ‘myElement’ 150 vertical pixels smaller!
Note though that you DON’T pass the ‘id’ of the element but rather the concrete ‘element object’ to the constructor.


// script.aculo.us EffectResize.js

// Copyright(c) 2007 - Frost Innovation AS, http://ajaxwidgets.com
//
// EffectResize.js is freely distributable under the terms of an MIT-style license.
// For details, see the script.aculo.us web site: http://script.aculo.us/

/* Helper Effect for resizing elements...
 */
Effect.ReSize = Class.create();
Object.extend(Object.extend(Effect.ReSize.prototype, Effect.Base.prototype), {
  initialize: function(element) {
    this.element = element;
    if(!this.element) throw(Effect._elementDoesNotExistError);
    var options = Object.extend({ amount: 100, direction: 'vert', toSize:null }, arguments[1] || {});
    if( options.direction == 'vert' )
      this.originalSize = options.originalSize || parseInt(this.element.style.height);
    else
      this.originalSize = options.originalSize || parseInt(this.element.style.width);

    if( options.toSize != null )
      options.amount = options.toSize - this.originalSize;

    this.start(options);
  },
  setup: function() {
    // Prevent executing on elements not in the layout flow
    if(this.element.getStyle('display')=='none') { this.cancel(); return; }
  },
  update: function(position) {
    if( this.options.direction  'vert' ){
      this.element.setStyle({height: this.originalSize+(this.options.amount*position)+'px'});
    } else {
      this.element.setStyle({width: this.originalSize+(this.options.amount*position)+'px'});
    }
  },
  finish: function(){
    if( this.options.direction  ‘vert’ ){
      this.element.setStyle({height: this.originalSize+this.options.amount+’px’});
    } else {
      this.element.setStyle({width: this.originalSize+this.options.amount+’px’});
    }
  }
});

	Effect.ReSize.Direct = function(element, options){
  switch(options.direction){
    case ‘vert’:
      var oldHeight = parseInt(element.style.height, 10);
      oldHeight += options.amount;
      element.style.height = (oldHeight+’px’);
      break;
    case ‘horz’:
      var oldWidth = parseInt(element.style.width, 10);
      oldWidth += options.amount;
      element.style.width = (oldWidth+’px’);
      break;
    default:
      throw “Unsupported enum in Effect.ReSize.Direct…!!”;
  }
}

Elijah Lofgren: Thanks for sharing this!
Here is a version that works with Prototype 1.4.0_rc3

// script.aculo.us EffectResize.js

// Copyright(c) 2007 - Frost Innovation AS, http://ajaxwidgets.com
//
// EffectResize.js is freely distributable under the terms of an MIT-style license.
// For details, see the script.aculo.us web site: http://script.aculo.us/

// Modified by Elijah Lofgren to work with Prototype 1.4.0_rc3
/* Helper Effect for resizing elements...
 */
Effect.ReSize = Class.create();
Object.extend(Object.extend(Effect.ReSize.prototype, Effect.Base.prototype), {
  initialize: function(element) {
    this.element = element;
    if(!this.element) throw(Effect._elementDoesNotExistError);
    var options = Object.extend({ amount: 100, direction: 'vert', toSize:null }, arguments[1] || {});
    if( options.direction == 'vert' )
      this.originalSize = options.originalSize || parseInt(this.element.style.height);
    else
      this.originalSize = options.originalSize || parseInt(this.element.style.width);

    if( options.toSize != null ) {
        options.amount = options.toSize - this.originalSize;
        console.log('amount: ' + options.amount);
    }

    this.start(options);
  },
  setup: function() {
    // Prevent executing on elements not in the layout flow
    if(this.element.style.display  'none') { this.cancel(); return; }
  },
  update: function(position) {
    if( this.options.direction  ‘vert’ ){
      this.element.style.height = this.originalSize+(this.options.amountposition)+’px’;
    } else {
      this.element.style.width = this.originalSize+(this.options.amountposition)+’px’;
    }
  },
  finish: function(){
    if( this.options.direction ==  ‘vert’ ){
      this.element.style.height = this.originalSize+this.options.amount+’px’;
    } else {
      this.element.style.width = this.originalSize+this.options.amount+’px’;
    }
  }
});