<script src='expanding.js></script>
<textarea class='expanding'></textarea>
No extra JavaScript calls needed if you already have the 'expanding' class on the textarea.
<script>
$("#element").expandingTextarea();
</script>
See the project page for an explanation of how it works.
What makes this plugin cool?
cols
hacks, or counting charactersAlmost all customization of the expandingTextareas plugin is simply done in CSS. Here are some of the things you can do:
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;
}
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;
}
Just set a static width on the textarea, and the pre tag will snap to fit it!
textarea, .textareaClone {
width: 400px;
}
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.
Custom border sizes on the textarea are handled as well
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 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%;
}
Allows for removing the expanding functionality.
<script>
$("#element").expandingTextarea('destroy');
</script>
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>