MooTools

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

Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.