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.