YUI Library Examples: Resize Utility (beta): Simple Resize

Setting up the element that we are going to resize

We are just going to make the element #resize resizable.

Note that we have placed the CSS property overflow: hidden on the first element inside to keep the text from escaping when we resize.


1	#resize {
2	border: 1px solid black;
3	height: 100px;
4	width: 200px;
5	background-color: #fff;
6	}
7	#resize div.data {
8	overflow: hidden;
9	height: 100%;
10	width: 100%;
11	}
	view plain \| print \| ?


1	<div id="resize">
2	<div class="data">
3	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
4	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p>
5	</div>
6	</div>
	view plain \| print \| ?

Creating the resize instance

By default, the Resize Utility assumes that you want to resize the element from 3 handles. Right, Bottom & Bottom Right. You can change this by setting the handles configuration attribute. See the API docs for more information.


1	(function() {
2	var Dom = YAHOO.util.Dom,
3	Event = YAHOO.util.Event;
4
5	var resize = new YAHOO.util.Resize('resize');
6	})();
	view plain \| print \| ?

YUI Library Examples: Resize Utility (beta): Simple Resize

Setting up the element that we are going to resize

Creating the resize instance

Resize Utility (beta) Examples:

More Resize Utility (beta) Resources: