Print Friendly

# Class YAHOO.ext.Resizable

Package: | YAHOO.ext
Class: | Resizable
Extends: | Observable
Defined In: | Resizable.js

Applies drag handles to an element to make it resizable. The drag handles are inserted into the element and positioned absolute. Some elements, such as a textarea or image, don't support this. To overcome that, you can wrap the textarea in a div and set "resizeChild" to true (or the id of the textarea), or set wrap:true in your config and the element will be wrapped for you automatically.

Here's a Resizable with every possible config option and it's default value:

    var resizer = new YAHOO.ext.Resizable('element-id', {
        resizeChild : false,
        adjustments : [0, 0],
        minWidth : 5,
        minHeight : 5,
        maxWidth : 10000,
        maxHeight : 10000,
        enabled : true,
        wrap: false, // true to wrap the element
        width: null, // initial size
        height: null, // initial size
        animate : false,
        duration : .35,
        dynamic : false,
        handles : false,
        multiDirectional : false,
        disableTrackOver : false,
        easing : YAHOO.util.Easing ? YAHOO.util.Easing.easeOutStrong : null,
        widthIncrement : 0,
        heightIncrement : 0,
        pinned : false,
        width : null,
        height : null,
        preserveRatio : false,
        transparent: false,
        minX: 0,
        minY: 0,
        draggable: false
    });
    resizer.on('resize', myHandler);

To hide a particular handle, set it's display to none in CSS, or through script:
resizer.east.setDisplayed(false);

## Public Properties

Property | Defined By
--- | ---
| adjustments : Array/String | Resizable
String "auto" or an array [width, height] with values to be added to the resize operation's new size.
| animate : Boolean | Resizable
True to animate the resize (not compatible with dynamic sizing)
| disableTrackOver : Boolean | Resizable
true to disable mouse tracking. This is only applied at config time.
| draggable : Boolean | Resizable
convenience to initialize drag drop.
| duration : Float | Resizable
Animation duration
| dynamic : Boolean | Resizable
True to resize the element while dragging instead of using a proxy
| easing : YAHOO.util.Easing | Resizable
Animation easing
| enabled : Boolean | Resizable
false to disable resizing
| handles : String | Resizable
String consisting of the resize handles to display. Valid handles are n (north), s (south) e (east), w (west), ne (n...
| height : Number | Resizable
The initial height for the element
| heightIncrement : Number | Resizable
The increment to snap the height resize in pixels (dynamic must be true)
| maxHeight : Number | Resizable
The maximum height for the element
| maxWidth : Number | Resizable
The maximum width for the element
| minHeight : Number | Resizable
The minimum height for the element
| minWidth : Number | Resizable
The minimum width for the element
| minX : Number | Resizable
The minimum allowed page X for the element (only used for west resizing, defaults to 0)
| minY : Number | Resizable
The minimum allowed page Y for the element (only used for north resizing, defaults to 0)
| pinned : Boolean | Resizable
true to pin the resize handles. This is only applied at config time.
| preserveRatio : Boolean | Resizable
true to preserve the initial size ratio.
| resizeChild : YAHOO.ext.Element | Resizable
True to resizeSize the first child or id/element to resize
| transparent : Boolean | Resizable
true for transparent handles. This is only applied at config time.
| width : Number | Resizable
The initial width for the element
| widthIncrement : Number | Resizable
The increment to snap the width resize in pixels (dynamic must be true)

## Public Methods

Method | Defined By
--- | ---
| Resizable(`String/HTMLElement/YAHOO.ext.Element el`, `Object config`) | Resizable
Create a new resizable component
| addListener(`String eventName`, `Function handler`, [`Object scope`], [`boolean override`]) : void | Observable
Appends an event handler to this element
| delayedListener(`String eventName`, `Function handler`, [`Object scope`], [`Number delay`]) : Function | Observable
Appends an event handler to this element that is delayed the specified number of milliseconds.
| fireEvent(`String eventName`, `Object... args`) : Boolean | Observable
Fires the specified event with the passed parameters (minus the event name).
| getEl() : YAHOO.ext.Element | Resizable
Returns the element this component is bound to.
| getResizeChild() : YAHOO.ext.Element | Resizable
Returns the resizeChild element (or null).
| purgeListeners() : void | Observable
Removes all listeners for this object
| removeListener(`String eventName`, `Function handler`, [`Object scope`]) : void | Observable
Removes a listener
| resizeTo(`Number width`, `Number height`) : void | Resizable
Perform a manual resize

## Public Events

Event | Defined By
--- | ---
| beforeresize : (`YAHOO.ext.Resizable this`, `YAHOO.ext.EventObject e`) | Resizable
Fired before resize is allowed. Set enabled to false to cancel resize.
| resize : (`YAHOO.ext.Resizable this`, `Number width`, `Number height`, `YAHOO.ext.EventObject e`) | Resizable
Fired after a resize.

## Property Details

### adjustments

`public Array/String adjustments`
String "auto" or an array [width, height] with values to be added to the resize operation's new size.
This property is defined by Resizable.

### animate

`public Boolean animate`
True to animate the resize (not compatible with dynamic sizing)
This property is defined by Resizable.

### disableTrackOver

`public Boolean disableTrackOver`
true to disable mouse tracking. This is only applied at config time.
This property is defined by Resizable.

### draggable

`public Boolean draggable`
convenience to initialize drag drop.
This property is defined by Resizable.

### duration

`public Float duration`
Animation duration
This property is defined by Resizable.

### dynamic

`public Boolean dynamic`
True to resize the element while dragging instead of using a proxy
This property is defined by Resizable.

### easing

`public YAHOO.util.Easing easing`
Animation easing
This property is defined by Resizable.

### enabled

`public Boolean enabled`
false to disable resizing
This property is defined by Resizable.

### handles

`public String handles`
String consisting of the resize handles to display. Valid handles are n (north), s (south) e (east), w (west), ne (northeast), nw (northwest), se (southeast), sw (southwest) and all (which applies them all). If this is blank it defaults to "e,s,se". Handles can be delimited using a space, comma or semi-colon. This is only applied at config time.
This property is defined by Resizable.

### height

`public Number height`
The initial height for the element
This property is defined by Resizable.

### heightIncrement

`public Number heightIncrement`
The increment to snap the height resize in pixels (dynamic must be true)
This property is defined by Resizable.

### maxHeight

`public Number maxHeight`
The maximum height for the element
This property is defined by Resizable.

### maxWidth

`public Number maxWidth`
The maximum width for the element
This property is defined by Resizable.

### minHeight

`public Number minHeight`
The minimum height for the element
This property is defined by Resizable.

### minWidth

`public Number minWidth`
The minimum width for the element
This property is defined by Resizable.

### minX

`public Number minX`
The minimum allowed page X for the element (only used for west resizing, defaults to 0)
This property is defined by Resizable.

### minY

`public Number minY`
The minimum allowed page Y for the element (only used for north resizing, defaults to 0)
This property is defined by Resizable.

### pinned

`public Boolean pinned`
true to pin the resize handles. This is only applied at config time.
This property is defined by Resizable.

### preserveRatio

`public Boolean preserveRatio`
true to preserve the initial size ratio.
This property is defined by Resizable.

### resizeChild

`public YAHOO.ext.Element resizeChild`
True to resizeSize the first child or id/element to resize
This property is defined by Resizable.

### transparent

`public Boolean transparent`
true for transparent handles. This is only applied at config time.
This property is defined by Resizable.

### width

`public Number width`
The initial width for the element
This property is defined by Resizable.

### widthIncrement

`public Number widthIncrement`
The increment to snap the width resize in pixels (dynamic must be true)
This property is defined by Resizable.

## Constructor Details

### Resizable

`public function Resizable(`String/HTMLElement/YAHOO.ext.Element el`, `Object config`)`
Create a new resizable component
Parameters:

- `el` : String/HTMLElement/YAHOO.ext.Element
  The id or element to resize
- `config` : Object
  configuration options

## Method Details

### addListener

`public function addListener(`String eventName`, `Function handler`, [`Object scope`], [`boolean override`])`
Appends an event handler to this element
Parameters:

- `eventName` : String
  The type of event to listen for
- `handler` : Function
  The method the event invokes
- `scope` : Object
  (optional) The scope (this object) for the handler
- `override` : boolean
  (optional) If true, scope becomes the scope

Returns:

- `void`

This method is defined by Observable.

### delayedListener

`public function delayedListener(`String eventName`, `Function handler`, [`Object scope`], [`Number delay`])`
Appends an event handler to this element that is delayed the specified number of milliseconds.
Parameters:

- `eventName` : String
  The type of event to listen for
- `handler` : Function
  The method the event invokes
- `scope` : Object
  (optional) The scope (this object) for the handler
- `delay` : Number
  (optional) The number of milliseconds to delay

Returns:

- `Function`
  The wrapped function that was created (can be used to remove the listener)

This method is defined by Observable.

### fireEvent

`public function fireEvent(`String eventName`, `Object... args`)`
Fires the specified event with the passed parameters (minus the event name).
Parameters:

- `eventName` : String
- `args` : Object...
  Variable number of parameters are passed to handlers

Returns:

- `Boolean`
  returns false if any of the handlers return false otherwise it returns true

This method is defined by Observable.

### getEl

`public function getEl()`
Returns the element this component is bound to.
Parameters:

- None.

Returns:

- `YAHOO.ext.Element`

This method is defined by Resizable.

### getResizeChild

`public function getResizeChild()`
Returns the resizeChild element (or null).
Parameters:

- None.

Returns:

- `YAHOO.ext.Element`

This method is defined by Resizable.

### purgeListeners

`public function purgeListeners()`
Removes all listeners for this object
Parameters:

- None.

Returns:

- `void`

This method is defined by Observable.

### removeListener

`public function removeListener(`String eventName`, `Function handler`, [`Object scope`])`
Removes a listener
Parameters:

- `eventName` : String
  The type of event to listen for
- `handler` : Function
  The handler to remove
- `scope` : Object
  (optional) The scope (this object) for the handler

Returns:

- `void`

This method is defined by Observable.

### resizeTo

`public function resizeTo(`Number width`, `Number height`)`
Perform a manual resize
Parameters:

- `width` : Number
- `height` : Number

Returns:

- `void`

This method is defined by Resizable.

## Event Details

### beforeresize

`public event beforeresize`
Fired before resize is allowed. Set enabled to false to cancel resize.
Subscribers will be called with the following parameters:

- `this` : YAHOO.ext.Resizable
- `e` : YAHOO.ext.EventObject
  The mousedown event

This event is defined by Resizable.

### resize

`public event resize`
Fired after a resize.
Subscribers will be called with the following parameters:

- `this` : YAHOO.ext.Resizable
- `width` : Number
  The new width
- `height` : Number
  The new height
- `e` : YAHOO.ext.EventObject
  The mouseup event

This event is defined by Resizable.

Copyright © 2006 Jack Slocum. All rights reserved.