← Back Home

Text Area Auto Xpander

Before getting down to any conclusion about this post. Check out the the plugin by James Padolsey viz. jQuery plugin: ‘autoResize’ which is built under jQuery.

Well this post is just to imitate his plugin in my own way without any JS library. It does not have any options to set which user can configure with. But by this weekend I’ll try to make it more dynamic with several configurable options, which might include:

Updates:

Well friends, I have updated the snippet with some of the options like “extra space”, “delay to expand (available in XpanderAnim.js)” and “callback function (which executes everytime the textarea expands.)”

It is to be loaded on window.onload function, and it is applicable to all the textarea on the web page. The way you can add it to your web page is simple.

Example:

Xpander without animation

<script type="text/javascript" src="Xpander.js">
</script>
<script type="text/javascript">
    window.onload = function(){
        Xpander({
            xtraSpace: 15,
            callBack: function(){
                /* Your call back function*/
            }
        });
    }
</script>

Xpander with animation

<script type="text/javascript" src="XpanderAnim.js">
</script>
<script type="text/javascript">
    window.onload = function(){
        Xpander({
            xtraSpace: 15,
            delay: 10,
            callBack: function(){
                /* Your call back function */
            }
        });
    }
</script>

Demo

The following links and source files are updated with the latest code.

Download