# Expanding Textareas jQuery Plugin

## Usage

### Easy Way

    <script src='expanding.js></script>
    <textarea class='expanding'></textarea>

No extra JavaScript calls needed if you already have the 'expanding' class on the textarea.

### Manual Initialization

If you'd like to manually call the plugin instead, use:

    <script>
        $("#element").expandingTextarea();
    </script>

See the project page for an explanation of how it works.

## Highlights

What makes this plugin cool?

- Expanding Text Areas Made Elegant
- Mobile Friendly
- Wide browser support. Works in IE6+, Safari, Chrome, Firefox, Opera
- No `cols` hacks, or counting characters
- Easy to style
- Resize Friendly. Content automatically resizes without using the window.resize event or JavaScript to calculate sizes! Resize your browser window to make this switch from one line to two, or two lines to three. Try copying and pasting more content in then resizing.

## Examples

Almost all customization of the expandingTextareas plugin is simply done in CSS. Here are some of the things you can do:

### Minimum Height

Sometimes you may want to start off with a couple of lines to make it obvious that there is a textarea. This is easy - just use CSS to add a min height to the textarea and the .textareaClone, like so:

    textarea, .textareaClone {
        min-height: 6em;
    }

### Maximum Height

Set a `max-height` on the textarea to get scrolling after a certain size. This is done just like the min height example above:

    textarea, .textareaClone {
        max-height: 8em;
    }

### Static Width

Just set a static width on the textarea, and the pre tag will snap to fit it!

    textarea, .textareaClone {
        width: 400px;
    }

### Custom font properties

All fonts, colors, and spacings can be set to whatever you want, and the plugin will automatically copy the styles over to the invisible pre tag.

This font is styled differently, but the resizing still works

### Custom borders

Custom border sizes on the textarea are handled as well

### Proportional paddings, margins, and widths

Percentages are a little tricky. Firefox seems to have some problems rendering percentage paddings and margins on textareas, it is probably best if you avoid this technique. Using ems for margin and padding seems to work fine. You can use percentages on widths in all browsers, as you place the CSS rule on both elements, like so:

    textarea, .textareaClone {
        padding: 1em;
        margin: 1em;
        width: 50%;
    }

### Centering

Centering the textarea is actually pretty easy, just set a width and a `margin: 0 auto;` on the container. Make sure your textarea has 100% width with border-box sizing too!

    .expandingText {
        width: 75%;
        margin: 0 auto;
    }

    textarea {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      width: 100%;
    }

### Destroying

Allows for removing the expanding functionality.

    <script>
        $("#element").expandingTextarea('destroy');
    </script>

This textarea is currently expanding... But you can change that. ↓

### Callbacks

#### `resize`

Sometimes other parts of your application need to be notified when a textarea changes its height (e.g., to move out of its way!). You can dispatch such notifications through callback functions passed in when you first initialize the plug-in, like so:

    <script>
        $("#element").expandingTextarea({
            resize: callback
        });
    </script>

This textarea will log changes below ↓
Current Height: