CODEWITHSUNDEEP
javascriptjquery
Aaron
Aaron

Reputation: 434

jQuery: making a textarea slide out when rows are changed?

I have a text area box that expands from 3 to 17 rows when the user enters so many characters as well as on a button click.

SetNewSize(); function is the called via onkeyup and expands the text area when the length becomes greater than 50.

morespace(); function is called via the button.

I would like to slide the box out when this happens, any ideas?

Thanks here is my code:

function SetNewSize(textarea){
if (textarea.value.length > 50)
{
    textarea.rows = 17;
}
else
{
    textarea.rows = 3;
}}

function morespace(){
var thetxt = document.getElementById('more').value;
var box = document.forms["myForm"]["comment"];
if(box.rows == 3)
{
    $("#emailme").fadeOut(800);
    box.rows = 17;
    document.getElementById('more').innerHTML = "less space?";
}
else
{
    $("#emailme").fadeIn(800);
    box.rows = 3;
    document.getElementById('more').innerHTML = "more space?";
}}

Upvotes: 1

Views: 1504

Answers (3)

Isochronous
Isochronous

Reputation: 1090

Well, the quick answer is use something someone already made: https://github.com/gurglet/jQuery-Textarea-Autoresize-Plugin

But if you want to roll your own, I'll update my reply in a moment with the code you need.

Updated Answer: Assuming you have this HTML:

<button id="emailme">Email me</button>
<form id="myForm">
    <input id="more" name="more" type="text">
    <textarea id="comment" name="comment" rows="3">

    </textarea>
</form>

You could then use this script:

(function(){
    var BIG = 17,
        SMALL = 3,
        currentSize = SMALL,
        changeSize = function(rows) {
            var $more = $("#more"),
                thetxt = $more.val(),
                $box = $("#comment"),
                currentRows = $box.prop("rows"),
                boxRowHeight = $box.height()/currentRows,
                newHeight = rows * boxRowHeight;

            if (rows === currentRows) return;       

            return $box.animate({'height': newHeight }, 500 , "swing", function(){
                $more.val((currentRows > rows) ? "more space?" : "less space?");
                $box.prop("rows", rows);
                currentSize = rows;
            }).promise();
        },
        setNewSize = function(event) {
            var $area = $(event.target);
            if ($area.val().length > 50 && currentSize === SMALL) {
                changeSize(BIG);
                currentSize = BIG ;
            } 
        };



    $("#comment").bind("keyup", setNewSize);

    $("#more").click(function(){
        if (currentSize === BIG) {
            $.when(changeSize(SMALL)).then(function(){
                $("#emailme").fadeIn(800);
            });
        }else{
            $.when(changeSize(BIG)).then(function(){
                $("#emailme").fadeOut(800);
            });            
        }

    });            
}​)();​

JSFiddle Link: http://jsfiddle.net/isochronous/fvtY7/

Upvotes: 0

Louis Loudog Trottier
Louis Loudog Trottier

Reputation: 487

You could also use jquery's attr() like so:

$('#comment').attr('rows', 17);

Where rows represent the attribute to cahnge and 17 the value to set. To get the number of rows currently used you use:

   var rows = $('#comment').attr('rows');

Upvotes: -1

koostudios
koostudios

Reputation: 171

By "slide the box out", I'm guessing you mean animate it. While you may not be able to animate textarea rows in jQuery, you can animate the height of the textarea to give the user more room. For example, you trigger something like this:

$('#comment').animate({'height': '+=40'},200);

This will add 40 pixels of height every time it is triggered and it animates it smoothly. If you want to add a number rows, you could simply calculate how large you want the textarea to become and then animate it to that height.

Here's a JSFiddle link for this action and you may want to check out the jQuery animate API.

Upvotes: 3

Related Questions