CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
Atish Bundhe
Atish Bundhe

Reputation: 545

javascript code to resize textarea with animation effect on focus gain

I am working with web application and I want to resize textarea with animation effect (smoothly resize) when the textarea gain focus.

I tried following code to resize textarea on focus gain but it does not smoothly resize.

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type='text/javascript'>
         function abc()
         {
           $('#txt').attr('rows',15);
         }
    </script>
</head>
<body>

<textarea id='txt' rows="4" onfocus='abc();' cols="50">
this is testing of textrea
</textarea>

</body>
</html>

Upvotes: 5

Views: 6525

Answers (5)

ScaryLooking
ScaryLooking

Reputation: 542

Try this...

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

$('#txt').blur(function() {
    $('#txt').animate({
        width: 160,
        height: 48
  }, 1000);
});

Example: http://jsfiddle.net/FMp4a/

For more information about the $.animate() see this page in the jQuery API documentation...

http://api.jquery.com/animate/

Upvotes: 2

Jaynesify
Jaynesify

Reputation: 19

I came up with a different answer, this way it auto adjusts to the size of the amount of content in the textarea instead of a fixed height

$('#txt').focus (function() {
    $(this).animate({
        height: $(this)[0].scrollHeight 
  }, 200);
});

$('#txt').blur(function() {
  $('#txt').animate({
    height: 40
  }, 200);
});

Example: http://jsfiddle.net/FMp4a/10/

Upvotes: 0

Ashish siwalkar
Ashish siwalkar

Reputation: 13

Try this 

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

for more information check 

  "http://jsfiddle.net/Y3rMM/"

Upvotes: 0

Giovanni Silveira
Giovanni Silveira

Reputation: 1281

If you dont need support for IE9 and older versions, pure CSS can solve your issue.

#txt {
    height:80px;
    transition: all 2s;
    -webkit-transition: all 2s; /* Safari */
}
#txt:focus {
    height:300px;
}

http://jsfiddle.net/MHC8T/

Upvotes: 10

Jonathan Marzullo
Jonathan Marzullo

Reputation: 7031

try this:

function abc()
{
       $('#txt').animate({'height':"+=100px"}, 400);
}

you can switch the height to whatever you want.. the +=100 is relative and will add 100px to the height of the textarea

also as an external event handler

$("#txt").bind("focusin",function abc(){
       $('#txt').animate({'height':"+=100px"}, 400);
});

hope that helps

Upvotes: 2

Related Questions