Search code examples
javascripttextareayui3

How to shrink a TextArea


i am using YUI 3.1 Library from Yahoo and also the TextExpander to let a TextArea to grow up when a user type.

The code below initialize the TextArea:

YUI({gallery: 'gallery-2010.03.23-17-54'
    }).use("node", 'gallery-text-expander', function(Y) {
    Y.one('#myTextArea').plug(Y.TextExpander);
});

It's work perfectly but now i have a question in this scenario:

1) The user type, the TextArea grow up for many rows and then the message is post to the server.

2) After the post, i clean the TextArea with $('myTextArea').value='' but it's not shrink as expected and still have many rows when in real must back to the original size.

I notice inside the code of the TextExpander (http://yuilibrary.com/gallery/buildtag/text-expander/gallery-2010.03.23-17-54) exist a method called "shrink_area" but how i can call this method $('myTextArea').shrink_area() ? (i know is a wrong line of code but i need to obtain something like this) or what is the best way ?

Thanks in advance for the suggestions and tips.


Solution

  • Oh well i solved the problem myself.

    So instead to try to call the internal method of the plugged class (that was nice to know how to do, probably using a custom namespace) i wrote a little function that do the trick.

    1) first of all i set the CSS property min-height in the class

    2) after clear the TextArea i set the height as the min-height

    the code below shown the function that do the trick

    function shrinkTextArea(element) {
        // clear
        $(element).value ='';
    
        // shrink
        $(element).style.height = $(element).style.minHeight;
    }