4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync<div class="intro">

4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync<p>This example shows the simple use case where we make an overlay resizable.</p>

4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync</div>

4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync

4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync<div class="example">

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

4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync</div>

4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync

4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync<h3>Setting up the Node</h3>

4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync<p>First we create the HTML for an overlay along with the other content ont he page</p>

4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync

4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync```

4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync{{>simple-resize-plugin-html}}

4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync```

4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync

4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync<p>Next, we give that element some CSS to make it visible.</p>

4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync

4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync```

4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync{{>simple-resize-plugin-css}}

4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync```

4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync

4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync<h3>Setting up the YUI Instance</h3>

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

4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync

4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync```

4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsyncYUI().use('resize-plugin');

4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync```

4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync

4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync<h3>Making the Widget Resizable</h3>

4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync

4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync<p>When the resizable button is pressed, we plug the `Y.Overlay` instance with `Y.Plugin.Resize`.</p>

4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync

4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync```

4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsyncoverlay.plug(Y.Plugin.Resize);

4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync```

4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync

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

4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync

4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync