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

Examples