Textarea automatic resizing
A fantastic Jquery plugin called elastic has been released Google Code (Jquery Elastic). It allows the resizing of textareas as you type. Below is an example.
As you can see, the textarea expands as you type, to a maximum of 250px. This is fantastic as it allows you to see much more clearly what you are typing and make changes where necessary.
To use the plugin we can assign the elastic function directly on all our textareas or on individual textareas.
/* assign to all textareas */
$(textarea).elastic();
/* or assign to individual textareas */
$('#expandable-textarea').elastic();
There are a couple of problems with the above code. By setting the elastic function on all our textareas we may accidently set it on a textarea that we do not wish to expand. If we set it on individual textareas then it is time consuming. The third problem is if we don't set a max-height property on our textarea, the textrea will expand indefinitely. I don't particularly like that functionality and always prefer to set a max-height property.
This lead me to create a small javascript snippet that allows the elastic plugin to work automatically and only if a max-height property has been set.
$('textarea').each(function() {
if (parseInt($(this).css('max-height')) > 0) {
$(this).elastic();
}
});
If you use the javascript snippet and the elastic plugin, you can set the expandable textareas from your CSS files by using the max-height property. If you don't set this property then your textarea will not expand. Therefore you won't have to worry about the javascript ever again.
