The jQuery UI .resizable() function allows the visitor to resize elements with their mouse. This is good for thinkgs like textareas, where the user wants to increase the box while they are typing.

Below is a simple example of a <div> element that can be resized by applying .resizable().


Other options for .resizeable()

There are some other effects that you use with the .resizable() function:

♦ animate: have the resizable element slowly & smoothly resize to the selected size.

♦ constrain: constrain the amount the element can be resized to its containing element.

♦ helper: this shows a dashed blue outline of the resized element while dragging the edge

♦ maxHeight, minHeight, maxWidth and minWidth: set the maximum/minimum height at width in pixels

♦ preserve aspect ratio: keep the height to width ratio the same as the box is enlarged (good for images)

♦ snap to grid: resize to a fixed amount of pixels

♦ synchronous resize: while you resize one element, a separate element resizes the same amount simultaneously.