#

Jump to Table of Contents

# Resize

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

## Getting Started

To include the source files for Resize and its dependencies, first load the YUI seed file if you haven't already loaded it.

    <script src="http://yui.yahooapis.com/3.10.3/build/yui/yui-min.js"></script>

Next, create a new YUI instance for your application and populate it with the modules you need by specifying them as arguments to the `YUI().use()` method. YUI will automatically load any dependencies required by the modules you specify.

    <script>
    // Create a new YUI instance and populate it with the required modules.
    YUI().use('resize', 'resize-plugin', function (Y) {
        // Resize is available and ready for use. Add implementation
        // code here.
    });
    </script>

For more information on creating YUI instances and on the `use()` method, see the documentation for the YUI Global Object.

## 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.
        });
    });