35d039da10970deb9abb779286f19907ec86350cDav Glass<div class="intro">

35d039da10970deb9abb779286f19907ec86350cDav Glass<p>This example shows the simple use case where we make an HTML element resizable.</p>

35d039da10970deb9abb779286f19907ec86350cDav Glass</div>

35d039da10970deb9abb779286f19907ec86350cDav Glass

35d039da10970deb9abb779286f19907ec86350cDav Glass<div class="example">

35d039da10970deb9abb779286f19907ec86350cDav Glass {{>simple-resize-source}}

35d039da10970deb9abb779286f19907ec86350cDav Glass</div>

35d039da10970deb9abb779286f19907ec86350cDav Glass

35d039da10970deb9abb779286f19907ec86350cDav Glass<h3>Setting up the Node</h3>

35d039da10970deb9abb779286f19907ec86350cDav Glass<p>First we need to create an HTML element to make resizable.</p>

35d039da10970deb9abb779286f19907ec86350cDav Glass

35d039da10970deb9abb779286f19907ec86350cDav Glass```

35d039da10970deb9abb779286f19907ec86350cDav Glass{{>simple-resize-source-html}}

35d039da10970deb9abb779286f19907ec86350cDav Glass```

35d039da10970deb9abb779286f19907ec86350cDav Glass

35d039da10970deb9abb779286f19907ec86350cDav Glass<p>Next, we give that element some CSS to make it visible.</p>

35d039da10970deb9abb779286f19907ec86350cDav Glass

35d039da10970deb9abb779286f19907ec86350cDav Glass```

35d039da10970deb9abb779286f19907ec86350cDav Glass{{>simple-resize-source-css}}

35d039da10970deb9abb779286f19907ec86350cDav Glass```

35d039da10970deb9abb779286f19907ec86350cDav Glass

35d039da10970deb9abb779286f19907ec86350cDav Glass<h3>Setting up the YUI Instance</h3>

35d039da10970deb9abb779286f19907ec86350cDav Glass<p>We need to create our YUI instance and tell it to load the <code>resize</code> module; for this simple use case, we could also use the <code>base-resize</code> submodule.</p>

35d039da10970deb9abb779286f19907ec86350cDav Glass

35d039da10970deb9abb779286f19907ec86350cDav Glass```

35d039da10970deb9abb779286f19907ec86350cDav GlassYUI().use('resize');

35d039da10970deb9abb779286f19907ec86350cDav Glass```

35d039da10970deb9abb779286f19907ec86350cDav Glass

35d039da10970deb9abb779286f19907ec86350cDav Glass<h3>Making the Node Resizable</h3>

35d039da10970deb9abb779286f19907ec86350cDav Glass

35d039da10970deb9abb779286f19907ec86350cDav Glass<p>Now that we have a YUI instance with the <code>resize</code> module, we need to instantiate the <code>Resize</code> instance on this Node.</p>

35d039da10970deb9abb779286f19907ec86350cDav Glass

35d039da10970deb9abb779286f19907ec86350cDav Glass```

35d039da10970deb9abb779286f19907ec86350cDav Glass{{>simple-resize-source-js}}

35d039da10970deb9abb779286f19907ec86350cDav Glass```

35d039da10970deb9abb779286f19907ec86350cDav Glass

35d039da10970deb9abb779286f19907ec86350cDav Glass<p>Upon instantiation, the element's drag handles will appear and the element is resizable via drag-and-drop.</p>

35d039da10970deb9abb779286f19907ec86350cDav Glass