CODEWITHSUNDEEP
javascript
user3642988
user3642988

Reputation: 243

expand textarea when onFocus

I have number of textarea fileds and I want them all to expant when they are on focus

here is a demo of my code: http://jsfiddle.net/PU73y/

The issue is that they don't expand at the moment I click on them. why is that?

Thanks

<textarea id='txt1' class='txt' refID='1' style='height: 15px;'>this is testing of textrea  </textarea>


$(function() {
    $(".txt").focus(function(){
        var element = $(this);
        var refID = element.attr("refID");
    //  alert(refID);

        $('#txt' + refID).focus (function() {
            $('#txt' + refID).animate({
                width: 400,
                height: 200
            }, 1000);
        });

        $('#txt' + refID).blur(function() {
            $('#txt' + refID).animate({
                width: 400,
                height: 20
            }, 1000);
        });
    });
});

Upvotes: 1

Views: 668

Answers (4)

Ben
Ben

Reputation: 1143

This works: http://jsfiddle.net/PU73y/4/

Your problem was you created the listeners on $('#txt' + refID) only after the first focus.

Upvotes: 0

Dave Briand
Dave Briand

Reputation: 1734

http://jsfiddle.net/PU73y/3/

you were setting a second focus handlers inside your initial focus handler, so you needed to click again to trigger that handler. All i did in this fiddle was remove the inner handler:

$(function() {
    $(".txt").focus(function(){
        var element = $(this);
        var refID = element.attr("refID");
    //  alert(refID);


            $('#txt' + refID).animate({
                width: 400,
                height: 200
            }, 1000);


        $('#txt' + refID).blur(function() {
            $('#txt' + refID).animate({
                width: 400,
                height: 20
            }, 1000);
        });
    });
});

Upvotes: 0

putvande
putvande

Reputation: 15213

You can just do this with CSS, no need for JavaScript:

textarea {
    height: 15px;
}

textarea:focus {
    height: 200px;
    width: 400px; 
}

See Fiddle

Upvotes: 0

Anuja
Anuja

Reputation: 146

http://jsfiddle.net/Y3rMM/

CSS...

.expand {
    height: 1em;
    width: 50%;
    padding: 3px;
}

HTML...

<textarea class="expand" rows="1" cols="10"></textarea>

jQuery...

$('textarea.expand').focus(function () {
    $(this).animate({ height: "4em" }, 500);
});

SOmething like this will work.

Upvotes: 3

Related Questions