blog.swapnilsarwe.com

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:

extra space: the value by which textarea should Xpand when it reaches the limit.
limit to xpand: the maximum value after which textarea should not expand
others: might try to put in all the options which james have made available
most important : to make it more efficient and robust and compatible with every browser and every situation

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.

Xpander (without animation): Xpander without animation
Xpander (with animation): Xpander with animation

Download