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 component
| bufferedListener(`String eventName`, `Function handler`, [`Object scope`], [`Number millis`]) : Function | Observable
Appends an event handler to this component that is buffered. If the event is triggered more than once in the specifie...
| delayedListener(`String eventName`, `Function handler`, [`Object scope`], [`Number delay`]) : Function | Observable
Appends an event handler to this component that is delayed the specified number of milliseconds. This is useful for e...
| 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).
| on(`String eventName`, `Function handler`, [`Object scope`], [`boolean override`]) : void | Observable
Appends an event handler to this element (shorthand for addListener)
| 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 component
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.

### bufferedListener

`public function bufferedListener(`String eventName`, `Function handler`, [`Object scope`], [`Number millis`])`
Appends an event handler to this component that is buffered. If the event is triggered more than once in the specified time-frame, only the last one actually fires.
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
- `millis` : Number
  (optional) The number of milliseconds to buffer (defaults to 250)

Returns:

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

This method is defined by Observable.

### delayedListener

`public function delayedListener(`String eventName`, `Function handler`, [`Object scope`], [`Number delay`])`
Appends an event handler to this component that is delayed the specified number of milliseconds. This is useful for events that modify the DOM and need to wait for the browser to catch up.
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 (defaults to 1 millisecond)

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.

### on

`public function on(`String eventName`, `Function handler`, [`Object scope`], [`boolean override`])`
Appends an event handler to this element (shorthand for addListener)
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.

### 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.

yui-ext - Copyright © 2006 Jack Slocum. | Yahoo! UI - Copyright © 2006 Yahoo! Inc.
All rights reserved.