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=".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>
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./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>
- Should the headline not be "jQuery code to resize textarea with animation effect on focus gain"?? – davidkonrad Commented Oct 10, 2013 at 18:51
-
2
What browsers do you need to support? You could do this entirely with CSS if your supported list is modern thanks to CSS transitions and the
:focuspseudo class. – Mister Epic Commented Oct 10, 2013 at 18:53 - As for what @ChrisHardie said, I have that example down in answers. – Giovanni Silveira Commented Oct 10, 2013 at 19:13
-
1
Others have shown examples of changing height, but you can animate rows if that's what you prefer:
$('#txt').animate({rows:15}, 500);– doog abides Commented Oct 10, 2013 at 19:17
5 Answers
Reset to default 10If 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/MHC8T/
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
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/FMp4a/
For more information about the $.animate() see this page in the jQuery API documentation...
http://api.jquery./animate/
Try this
$('textarea.expand').focus(function ()
{
$(this).animate({ height: "4em" }, 500);
});
for more information check
"http://jsfiddle/Y3rMM/"
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/FMp4a/10/