Interface elements for jQuery - Documentation - Resizable

Resizable

Create a resizable element with a number of advanced options including callback, dragging, ratio.

example

Options:

handlers	Hash	mandatory	hash with keys for each resize direction (e, es, s, sw, w, nw, n) and value string selection
minWidth	Integer	optional	the minimum width that element can be resized to
maxWidth	Integer	optional	the minimum width that element can be resized to
maxWidth	Integer	optional	the maximum width that element can be resized to
minHeight	Integer	optional	the minimum height that element can be resized to
maxHeight	Integer	optional	the maximum height that element can be resized to
minTop	Integer	optional	the minmum top position to wich element can be moved to
minLeft	Integer	optional	the minmum left position to wich element can be moved to
maxRight	Integer	optional	the maximum right position to wich element can be moved to
maxBottom	Integer	optional	the maximum bottom position to wich element can be moved to
ratio	Float	optional	the ratio between width and height to constrain elements sizes to that ratio
dragHandle	Mixed	optional	true to make the element draggable, string selection for drag handle
onDragStart	Function	optional	A function to be executed whenever the dragging starts
onDragStop	Function	optional	A function to be executed whenever the dragging stops
onDrag	Function	optional	A function to be executed whenever the element is dragged
onStart	Function	optional	A function to be executed whenever the element starts to be resized
onStop	Function	optional	A function to be executed whenever the element stops to be resized
onResize	Function	optional	A function to be executed whenever the element is resized

Code sample:

$('#resizeMe').Resizable(
	{
		minWidth: 50,
		minHeight: 50,
		maxWidth: 400,
		maxHeight: 400,
		minTop: 50,
		minLeft: 50,
		maxRight: 700,
		maxBottom: 500,
		dragHandle: true,
		handlers: {
			se: '#resizeSE',
			e: '#resizeE',
			ne: '#resizeNE',
			n: '#resizeN',
			nw: '#resizeNW',
			w: '#resizeW',
			sw: '#resizeSW',
			s: '#resizeS'
		}
	}
)

ResizableDestroy

A Resizable can be destroyed at anytime.

Code sample:

$('#resizeMe').ResizableDestroy();