I received a email request from my reader that asked to me how to implement Facebook like expanding textbox with Jquery. So I had developed a simple tutorial. Take a look at this live demo
Download Script 
Live DemoJavascript Code
It works with Jquery latest version 1.4.2. $('#content').focus(function(){} - content is the ID of the textbox. Using $(this).animate() expanding textbox height and using $("#button_block").slideDown() showing the update button.
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
$("#content").focus(function()
{
$(this).animate({"height": "85px",}, "fast" );
$("#button_block").slideDown("fast");
return false;
});
$("#cancel").click(function()
{
$("#content").animate({"height": "30px",}, "fast" );
$("#button_block").slideUp("fast");
return false;
});
});
</script>
//HTML Code
<form method="post" action="">
<textarea id="content"></textarea>
<div id="button_block">
<input type="submit" id="button" value=" Share "/>
<input type="submit" id='cancel' value=" cancel" />
</div>
</form>
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
$("#content").focus(function()
{
$(this).animate({"height": "85px",}, "fast" );
$("#button_block").slideDown("fast");
return false;
});
$("#cancel").click(function()
{
$("#content").animate({"height": "30px",}, "fast" );
$("#button_block").slideUp("fast");
return false;
});
});
</script>
//HTML Code
<form method="post" action="">
<textarea id="content"></textarea>
<div id="button_block">
<input type="submit" id="button" value=" Share "/>
<input type="submit" id='cancel' value=" cancel" />
</div>
</form>
CSS Code
#content
{
width:450px; height:30px;
border:solid 2px #006699;
font-size:14px;
}
#button
{
background-color:#006699;
color:#ffffff;
font-size:13px;
font-weight:bold;
padding:4px;
}
#cancel
{
background-color:#dedede;
color:#000;
font-size:13px;
padding:4px;
margin-left:10px;
}
#button_block
{
display:none;
}
{
width:450px; height:30px;
border:solid 2px #006699;
font-size:14px;
}
#button
{
background-color:#006699;
color:#ffffff;
font-size:13px;
font-weight:bold;
padding:4px;
}
#cancel
{
background-color:#dedede;
color:#000;
font-size:13px;
padding:4px;
margin-left:10px;
}
#button_block
{
display:none;
}
Using testking 350-030 tutorials and testking 646-204 live demos, learn how to expand facebook textbox using jQuery. Become expert using our free testking 70-649 resources related to CSS, JavaScript and jQuery.
Very nice! Thanks for sharing. Greets from the Netherlands.
ReplyDeleteVery nice. One thing though... you should make it expand it back up if the user clicks somewher else rather than the white space IF user has not entered any text in.
ReplyDeleteExcellent, just as always!! 9 lessons is the best Jquery page I've ever found, congrats from Mexico!!!
ReplyDeletesweet deal man...you are creating some VERY cool and useful things on this site...kudos my friend =]
ReplyDelete@ Alberto Rechy
ReplyDeleteThank You
@I have learn a lot from this 9 lessons.
ReplyDeletei real appreciate Srinivas Tamada,You are so blessed.
This is wonderful post.
What about post data?
ReplyDeleteHow to fetch and post SQL?
What about post data?
ReplyDeleteHow to insert/fetch from database?
OK... ignoring my previous post... <_<
ReplyDeletethis sucks.
Hi Srinivas
ReplyDeleteThis is an excellent one....
This is awesome. I just can't figure out how to make it work with multiple textareas....help?
ReplyDeleteI'm sorry, but this form can't send any data?! How can i fetch the post data?
ReplyDeleteThanks for helping me
thanks dude..
ReplyDeleteNice but textbox not really expanding but just scrolling ;)
ReplyDeleteSuperb Srinivas Tamada, 9lessons is my fave Jquery Page. Indonesian siad Thanks for U a Lot.
ReplyDeleteVery nice script..... this will be very useful thanx
ReplyDeletethanks for the info and explanation provided
ReplyDeleteWow! Its nice... I'll add this trick to my website. You're awesome !
ReplyDeleteAwesome thanks! Can someone please share how to put the default "what's up" value? And have it vanish on click.
ReplyDeletenot work in IE7, getting errors on page...
ReplyDeleteWork in Firefox but not in Internet Explorer 8.
ReplyDeletexcellent codes................
ReplyDeletefrm KkK-146
If you are searching for a more mature version here you can find one http://fer-menta.blogspot.com/2010/12/jquery-expanding-textarea.html
ReplyDeleteIt is a port from a dojo widget and work very well for me ;)
I am impressed by the watermark javascript , the hiding and showing is fine , but watermark is good
ReplyDeleteI am a Mexican Too!
ReplyDeleteHi i have problem with this script... It works perfect, but to first textarea on page. Is possible to change this script to work with multiple textareas ?
ReplyDeletenice, but one question, how to clean when you give cancel bottom?
ReplyDeletenice,can you do for auto growing text area
ReplyDeleteThnx.. a lot for Awesome script!!!
ReplyDeleteits really useful.
Thanks a lot
ReplyDeleteIs there anyway to not use id's so that you can make multiple ones on your website?
ReplyDeleteIt's been my first coming, but surely 9lessons will become my fave Jquery page. thanks,
ReplyDeleteThanks for the post. but how to enable "share" button??
ReplyDelete