The Resize Utility allows you to make an HTML element resizable.

{{>getting-started}}

Simple Resize

You can create a simple Resize instance by including the `resize` module or `base-resize` submodule and using the following code:

``` YUI().use('resize', function(Y) { var resize = new Y.Resize({ //Selector of the node to resize node: '#demo' }); }); ```

Events

Resize provides useful events to allow the implementer to control the end-user experience.

Event Preventable Stoppable Bubbles Description
`resize:start` yes yes yes Handles the resize start event. Fired when the user begins dragging a handle.
`resize:resize` yes yes yes Handles the resize event. Fired with every native `mousemove` event when the handle is being dragged; this could be as often as once for every pixel of movement.
`resize:align` yes yes yes Handles the resize align event.
`resize:end` yes yes yes Handles the resize end event. Fired when the user releases the handle from the drag operation.
`resize:mouseUp` yes yes yes Handles the resize `mouseup` event. Fired when a `mouseup` event happens on a handle.

Module Descriptions

Resize for YUI 3 has been broken up into several modules to allow you, as the implementer, to target the specific functionality you want — and omit the functionality you're not using.

Module Name Description
`resize-base` This is the base Resize class; use this submodule for your simplest use case, where constraints, ratios, and proxies are not required.
`resize-constrain` Adds constraining & ratio support.
`resize-proxy` Adds proxy support, via `dd-proxy`.

Resize Plugin for Widgets

Along with the standalone utility, a Resize plugin is available and can be plugged into Y.Node or Y.Widget instances. The plugin can be created by adding `resize-plugin` in your use statement, and then plugging in `Y.Plugin.Resize`.

``` YUI().use('overlay', 'resize-plugin', function(Y) { var overlay = new Y.Overlay({ width: "200px", height: "300px", srcNode: "#overlay", visible: "true", centered: "true" }); //Plug in the resizability plugin overlay.plug(Y.Plugin.Resize); overlay.render(); }); ```

Listening to events on a widget

With the resize plugin being plugged into a Y.Widget instance, resize events can be listened to under the `resize` namespace. The resize plugin will automatically change `width` and `height` attributes on the widget (and the `x` , `y` attributes if your widget uses `Y.WidgetPosition`).

``` YUI().use('overlay', 'resize-plugin', function(Y) { overlay.plug(Y.Plugin.Resize); overlay.render(); overlay.resize.on('resize:resize', function(event) { //this function will be called on resize. }); }); ```