Example: 8-way Image Resize

Setting up the Node

First we need to create an image to resize; we wrap the image in another element to provide some CSS hooks.

<div id="demoContainer" class="yui3-resize-knob">
	<img id="demo" src="../assets/resize/team.jpg" alt="Eduardo Lundgren, Nate Cavanaugh and the YUI Team at Yahoo">
</div>

Setting up the YUI Instance

Next, we need to create our YUI instance and tell it to load the resize module.

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 element.

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

Adding the Constrained Plugin

Now we add the ResizeConstrained plugin. This plugin will allow you to limit the resize dimensions in special ways.

YUI().use('resize', function(Y) {
    var resize = new Y.Resize({
        //Selector of the node to resize
        node: '#demo'
    });   
	resize.plug(Y.Plugin.ResizeConstrained, {
		constrain: '#demoContainer',
		minHeight: 50,
		minWidth: 50
	});
});

Adding CSS

Image resize operations typically have their own visual treatment and therefore require slightly different drag handles in order to be discoverable and intuitive. Here is CSS that provides a common image-resize visual treatment:

#demo {
	display: block; // fixes image misalignment
	height: 121px;
	width: 182px;
	position: absolute;
	top: 100px;
	left: 100px;
}

#demoContainer {
	position: relative;
	height: 333px;
	width: 500px;
    border: 1px solid black;
}

/* knob handles demo */

.yui3-resize-knob .yui3-resize-handle-tr,
.yui3-resize-knob .yui3-resize-handle-br,
.yui3-resize-knob .yui3-resize-handle-tl,
.yui3-resize-knob .yui3-resize-handle-bl,
.yui3-resize-knob .yui3-resize-handle-b,
.yui3-resize-knob .yui3-resize-handle-t,
.yui3-resize-knob .yui3-resize-handle-l,
.yui3-resize-knob .yui3-resize-handle-r {
	border: 1px solid #808080;
	background-color: #F2F2F2;
	height: 6px;
	width: 6px;
}

.yui3-resize-knob .yui3-resize-handle-b,
.yui3-resize-knob .yui3-resize-handle-t {
	left: 45%;
}

.yui3-resize-knob .yui3-resize-handle-l,
.yui3-resize-knob .yui3-resize-handle-r {
	top: 45%;
}

.yui3-resize-knob .yui3-resize-handle-t,
.yui3-resize-knob .yui3-resize-handle-tr,
.yui3-resize-knob .yui3-resize-handle-tl {
	top: -4px;
}

.yui3-resize-knob .yui3-resize-handle-b,
.yui3-resize-knob .yui3-resize-handle-br,
.yui3-resize-knob .yui3-resize-handle-bl {
	bottom: -4px;
}

.yui3-resize-knob .yui3-resize-handle-l,
.yui3-resize-knob .yui3-resize-handle-bl,
.yui3-resize-knob .yui3-resize-handle-tl {
	left: -4px;
}

.yui3-resize-knob .yui3-resize-handle-r,
.yui3-resize-knob .yui3-resize-handle-br,
.yui3-resize-knob .yui3-resize-handle-tr {
	right: -4px;
}

.yui3-resize-knob .yui3-resize-handle-inner {
	background: none;
	height: 6px;
	width: 6px;
}