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();

Download now

Interface 1.2 146kb (source files, compressed files)
jQuery 1.1.2 19 kb

MediaSecure