Text Expander

Last Updated: Sunday, November 8th, 2009
A YUI3 plugin script for expanding/shrinking textareas as users input text.

Requirements

This script uses YUI 3.

How to Use

To use the script include YUI 3 and then the expander script. Attach the expander to whatever nodes you want it to apply with the YUI plug method.

Here is an example of attaching it to all the textareas on the page.

<script type=”text/javascript” src=”http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js”></script>
<script type=”text/javascript” src=”expander.js”></script>
<script type=”text/javascript”>
YUI().use(“node”, function(Y) {
    Y.all(“textarea”).plug(Y.TextExpander);
});

</script>

Examples

View additional examples of the Text Expander here.

Configuration Attributes

Name Type Default Value Description
line_height integer null Specify how tall the text lines are for expanding. The script does it's best to figure out the correct size, but it can be overridden with the specific size.
max_height integer null The maximum height that the textarea can grow to in pixels. If not specified the default is either 25 lines, if it can be determined, or else 450 pixels.
min_height integer null The minimum height the textarea can shrink to. If not specified then it will be set to the starting size of the textarea.

Download

File File Type Description
gallery-text-expander-debug.js Javascript The readable source code.
gallery-text-expander-min.js Javascript The minimized javascript source code.

Tested On

Firefox 3.6
Chrome
Safari 4
IE 7, 8

License

This code is licensed under a BSD license. You can view the license here. In essence you are free to do what you want with the code.
blog comments powered by Disqus