f30ee734ac0ee8b792c77ab3bc42494fcddb1508hajma<div class="intro">

f30ee734ac0ee8b792c77ab3bc42494fcddb1508hajma<p>The Resize Utility allows you to make an HTML element resizable.</p>

f30ee734ac0ee8b792c77ab3bc42494fcddb1508hajma</div>

f30ee734ac0ee8b792c77ab3bc42494fcddb1508hajma

f30ee734ac0ee8b792c77ab3bc42494fcddb1508hajma{{>getting-started}}

<h2 id="simple">Simple Resize</h2>

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

```

YUI().use('resize', function(Y) {

var resize = new Y.Resize({

//Selector of the node to resize

node: '#demo'

});

});

```

<h2 id="events">Events</h2>

<p>Resize provides useful events to allow the implementer to control the end-user experience.</p>

<table>

<thead>

<tr>

<th>Event</th>

<th>Preventable</th>

<th>Stoppable</th>

<th>Bubbles</th>

<th>Description</th>

</tr>

</thead>

<tbody>

<tr>

<td>`resize:start`</td>

<td>yes</td>

<td>yes</td>

<td>yes</td>

<td>Handles the resize start event. Fired when the user begins dragging a handle.</td>

</tr>

<tr>

<td>`resize:resize`</td>

<td>yes</td>

<td>yes</td>

<td>yes</td>

<td>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.</td>

</tr>

<tr>

<td>`resize:align`</td>

<td>yes</td>

<td>yes</td>

<td>yes</td>

<td>Handles the resize align event.</td>

</tr>

<tr>

<td>`resize:end`</td>

<td>yes</td>

<td>yes</td>

<td>yes</td>

<td>Handles the resize end event. Fired when the user releases the handle from the drag operation.</td>

</tr>

<tr>

<td>`resize:mouseUp`</td>

<td>yes</td>

<td>yes</td>

<td>yes</td>

<td>Handles the resize `mouseup` event. Fired when a `mouseup` event happens on a handle.</td>

</tr>

</tbody>

</table>

<h2 id="modules">Module Descriptions</h2>

<p>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.</p>

<table>

<thead>

<tr>

<th>Module Name</th>

<th>Description</th>

</tr>

</thead>

<tbody>

<tr>

<td nowrap="nowrap">`resize-base`</td>

<td>This is the base Resize class; use this submodule for your simplest use case, where constraints, ratios, and proxies are not required.</td>

</tr>

<tr>

<td nowrap="nowrap">`resize-constrain`</td>

<td>Adds constraining &amp; ratio support.</td>

</tr>

<tr>

<td nowrap="nowrap">`resize-proxy`</td>

<td>Adds proxy support, via `dd-proxy`.</td>

</tr>

</tbody>

</table>

<h2 id="resize-plugins">Resize Plugin for Widgets</h2>

<p>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`.</p>

```

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();

});

```

<h3>Listening to events on a widget</h3>

<p>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`).</p>

```

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.

});

});

```