Jump to Table of Contents

Example: Simple Resize

This example shows the simple use case where we make an HTML element resizable.

Resize Me

Setting up the Node

First we need to create an HTML element to make resizable.

<div id="demo">Resize Me</div>

Next, we give that element some CSS to make it visible.

#demo {
    height: 100px;
    width: 100px;
    border: 1px solid black;
    background-color: #8DD5E7;
    position: relative;
    padding: 1em;
    margin: 2em;
}

Setting up the YUI Instance

We need to create our YUI instance and tell it to load the resize module; for this simple use case, we could also use the base-resize submodule.

YUI().use('resize');

Making the Node Resizable

Now that we have a YUI instance with the resize module, we need to instantiate the Resize instance on this Node.

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

Upon instantiation, the element's drag handles will appear and the element is resizable via drag-and-drop.