ginger/resizabletextarea

Resizable (as in webkit) textarea for MooTools

resizableTextarea

Resizable (+ as in webkit) textarea for MooTools

Cross Browser: IE6+, FF3+, Safari3+, Opera9+, Chrome

How to use

HTML
-----------
`<div class="textarea">`
	`<textarea cols="40" rows="5"></textarea>`
`</div>`

CSS
-----------
.textarea {
	padding: 5px 5px 16px;
	margin: 0 0 11px;
	border: 1px solid #808080;
	display: inline-block;
	position: relative;
}
.textarea textarea {
	margin: 0;
	padding: 0;
	float: left;
	width: 400px;
	height: 100px;
	border: 0;
	font: 12px/15px Arial, Helvetica, sans-serif;
	resize: none;
	overflow: auto;
	background: none;
}
.textarea .handler {
	position: absolute;
	bottom: 3px;
	right: 3px;
	width: 11px;
	height: 11px;
	background: url(../images/ico-handler.gif) no-repeat;
	overflow: hidden;
	cursor: se-resize;
}

JavaScript:
-----------
window.addEvent("domready", function() {
    var textarea = new resizableTextarea(element [, options]);
});

Arguments:
----------
	- element [element] - reference to the elements object
	- options [object]
		- handler [string] - class or node for handler. Default ".handler"
		- onResizeClass [string] - class for textarea during resizing. Default "resize"
		- modifiers {x:[boolean], y:[boolean] - horizontal, vertical or both
		- size {x:[integer, integer], y:[integer, integer]} - max, min width and height for textarea
		- onStart [function] - callback before resizing
		- onEnd [function] - callback after resizing
		- onResize [function] - callback during resizing

Screenshots

resizabletextarea's Issues

[Enhancemant] Change option verticalOnly

Change option "verticalOnly" to "mode" with these possible parameters:

• "vertical"
• "horizontal"
• "both" (default)

greetings Sunny

[Enhancement] Add option "minWidth" and "minHeight"

see title ;o)

resize any element

Hi Sergii

I'm looking at resizableTextarea and think it could resize not just textareas but any element.

I don't understand what you test on L82. Could you explain what it checks and what it does?
http://github.com/ginger/resizableTextarea/blob/98ab3b4cc730c6a300d715794b74110c6cc7dd38/Source/mootools.resizableTextarea.js#L82

thanks eni