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

{{>simple-resize-plugin-source}}

Setting up the Node

First we create the HTML for an overlay along with the other content ont he page

``` {{>simple-resize-plugin-html}} ```

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

``` {{>simple-resize-plugin-css}} ```

Setting up the YUI Instance

We need to create our YUI instance and tell it to load the resize-plugin module, along with the 'overlay' module; If we wanted the resize to be constrained, we would also need to include the 'resize-constrain' plugin.

``` YUI().use('resize-plugin'); ```

Making the Widget Resizable

When the resizable button is pressed, we plug the `Y.Overlay` instance with `Y.Plugin.Resize`.

``` overlay.plug(Y.Plugin.Resize); ```

Upon instantiation, the widget's drag handles will appear and the element is resizable via drag-and-drop. The widget will be notified of x, y, width and height changes.

Full Source

``` {{>simple-resize-plugin-js}} ```