Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Twitter like Expanding Textarea box with Jquery

In this tutorial, we are going to discuss how to create Twitter like Expanding Textbox with Jquery. It is very simple and easy to use. Here we have used focus and focusout function of Jquery.

focus function :
When user focus on textaxrea box, then it will automatically expand the textarea box height to 90px.
// on focus textarea box...
$
("textarea").focus(function() {
$
(this).animate({
"height": "90px",
}, "fast");
$
(".EdgeButton").slideDown("fast");
});

focusout function :
When user focus out textaxrea box, then it will automatically collapse the textarea box height to 40px.
// on focus out textarea box...
$
("textarea").focusout(function() {
$
("textarea").animate({
"height": "40px",
}, "fast");
$
(".EdgeButton").slideUp("fast");
});

Expand and Collapse like Twitter's textarea

Lets see the complete example for textarea box expand and collapse using Jquery :





type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">

body
{
background
-color: #f1f1f1;
}
.main-container {
width
: 500px;
height
: 140px;
margin
: 0px auto;
background
: white;
padding
: 10px;
border
-radius: 10px;
}
.main-container:after {
content
: ".";
display
: block;
height
: 0;
clear
: both;
visibility
: hidden;
}
.EdgeButton {
border
-radius: 100px;
box
-shadow: none;
cursor
: pointer;
font
-size: 14px;
font
-weight: bold;
line
-height: 20px;
padding
: 6px 16px;
position
: relative;
text
-align: center;
white
-space: nowrap;
background
-color: #4AB3F4;
color
: white;
}
textarea
{
width
: 450px;
height
: 40px;
border
: solid 2px #bedff6;
font
-size: 14px;
}

type="text/javascript">
$
(document).ready(function() {

var getTextCount = $("textarea").val().length;

// on focus textarea box...
$
("textarea").focus(function() {
$
(this).animate({
"height": "90px",
}, "fast");
$
(".EdgeButton").slideDown("fast");

});
$
("textarea").keyup(function() {
getTextCount
= $("textarea").val().length;
});

// on focus out textarea box...
$
("textarea").focusout(function() {
if( getTextCount 0 ){
$
("textarea").animate({
"height": "40px",
}, "fast");
$
(".EdgeButton").slideUp("fast");

}
});

});




class="main-container">



style="float:right;margin-right:52px;">







Download Link :
https://github.com/skptricks/php-Tutorials/tree/master/Twitter%20like%20Expanding%20Textarea%20box%20with%20Jquery

Demo Link :
https://skptricks.github.io/learncoding/twitter-like-expanding-textarea-box-with-jquery/twitter%20like%20Expanding%20Textbox%20with%20Jquery.html

This is all about textarea box expand and collapse demo. Please do comment in comment box if you have any thing to write.



This post first appeared on Selenium Web Driver Tutorials, please read the originial post: here

Share the post

Twitter like Expanding Textarea box with Jquery

×

Subscribe to Selenium Web Driver Tutorials

Get updates delivered right to your inbox!

Thank you for your subscription

×