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

By default handles are displayed when the mouse is near the edge of the element. To make the handles displayed all the time, add a class "yresizable-pinned" to the element. Note: depending on your element you may need to apply "adjustments" (see below) to get the handles to look right when pinned.

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

var resizer = new YAHOO.ext.Resizable('element-id', {
    resizeChild : false, // true to resize the firstChild or an id/element to resize
    adjustments : [0, 0],
    minWidth : 5,
    minHeight : 5,
    maxWidth : 10000,
    maxHeight : 10000,
    widthIncrement : 0, // snapping
    heightIncrement : 0, // snapping
    enabled : true,
    animate : false, // (ignored if resizeChild is true)
    duration : .35,
    dynamic : false, // true for real time sizing instead of proxy resizing
    multiDirectional : false, // true for 4 way adjustments
    disableTrackOver : false, // disable mouse over tracking for pinned resizers
    easing = YAHOO.util.Easing.easeOutStrong
});
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 Resizable
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)
  corner : YAHOO.ext.Element Resizable
The corner handle
  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
  east : YAHOO.ext.Element Resizable
The east handle
  enabled : Boolean Resizable
false to disable resizing
  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
  north : YAHOO.ext.Element Resizable
The north handle
  resizeChild : YAHOO.ext.Element Resizable
True to resizeSize the first child or id/element to resize
  south : YAHOO.ext.Element Resizable
The south handle
  west : YAHOO.ext.Element Resizable
The west handle
  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) : void Observable
Fires the specified event with the passed parameters (minus the event name).
  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 adjustments
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.

corner

public YAHOO.ext.Element corner
The corner handle
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.

east

public YAHOO.ext.Element east
The east handle
This property is defined by Resizable.

enabled

public Boolean enabled
false to disable resizing
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.

north

public YAHOO.ext.Element north
The north handle
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.

south

public YAHOO.ext.Element south
The south handle
This property is defined by Resizable.

west

public YAHOO.ext.Element west
The west handle
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:
  • 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.

Copyright © 2006 Jack Slocum. All rights reserved.