Elastic Textarea jQuery plugin

Elastic makes your textareas grow and shrink to fit it’s content. It was inspired by the auto growing textareas on Facebook.

Attention! The css property ‘max-height’ will affect Elastic. Scrollbars will appear when the content is bigger than the set max height.

The usage of Elastic is very straight forward. All you have to do is to include Jquery and the javascript file containing the plugin and use the elastic function.

1. The HTML

<textarea id="description">This textarea is going to grow when you fill it with text. Just type a few more words in it and you will see.</textarea>

2. The CSS

textarea {
  padding: 10px;
  width: 300px;
  font-family: Arial, 'sans-serif';
}

3. The JS

$('#description').elastic();

Demo & Documentation

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s