Facebook like Expanding Textbox with Jquery.
Wall Script
Follow Me:
Sunday, March 07, 2010

Facebook like Expanding Textbox with Jquery.

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

Facebook like Expanding Textbox with Jquery.

Download Script     Live Demo

Javascript 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>



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;
}


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.
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


35 comments:

  1. Very nice! Thanks for sharing. Greets from the Netherlands.

    ReplyDelete
  2. Very 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.

    ReplyDelete
  3. Excellent, just as always!! 9 lessons is the best Jquery page I've ever found, congrats from Mexico!!!

    ReplyDelete
  4. sweet deal man...you are creating some VERY cool and useful things on this site...kudos my friend =]

    ReplyDelete
  5. @I have learn a lot from this 9 lessons.
    i real appreciate Srinivas Tamada,You are so blessed.
    This is wonderful post.

    ReplyDelete
  6. What about post data?
    How to fetch and post SQL?

    ReplyDelete
  7. What about post data?
    How to insert/fetch from database?

    ReplyDelete
  8. OK... ignoring my previous post... <_<
    this sucks.

    ReplyDelete
  9. Hi Srinivas

    This is an excellent one....

    ReplyDelete
  10. This is awesome. I just can't figure out how to make it work with multiple textareas....help?

    ReplyDelete
  11. I'm sorry, but this form can't send any data?! How can i fetch the post data?

    Thanks for helping me

    ReplyDelete
  12. Nice but textbox not really expanding but just scrolling ;)

    ReplyDelete
  13. Superb Srinivas Tamada, 9lessons is my fave Jquery Page. Indonesian siad Thanks for U a Lot.

    ReplyDelete
  14. Very nice script..... this will be very useful thanx

    ReplyDelete
  15. thanks for the info and explanation provided

    ReplyDelete
  16. Wow! Its nice... I'll add this trick to my website. You're awesome !

    ReplyDelete
  17. Awesome thanks! Can someone please share how to put the default "what's up" value? And have it vanish on click.

    ReplyDelete
  18. not work in IE7, getting errors on page...

    ReplyDelete
  19. Work in Firefox but not in Internet Explorer 8.

    ReplyDelete
  20. xcellent codes................
    frm KkK-146

    ReplyDelete
  21. 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

    It is a port from a dojo widget and work very well for me ;)

    ReplyDelete
  22. I am impressed by the watermark javascript , the hiding and showing is fine , but watermark is good

    ReplyDelete
  23. I am a Mexican Too!

    ReplyDelete
  24. Hi 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 ?

    ReplyDelete
  25. nice, but one question, how to clean when you give cancel bottom?

    ReplyDelete
  26. nice,can you do for auto growing text area

    ReplyDelete
  27. Thnx.. a lot for Awesome script!!!
    its really useful.

    ReplyDelete
  28. Is there anyway to not use id's so that you can make multiple ones on your website?

    ReplyDelete
  29. It's been my first coming, but surely 9lessons will become my fave Jquery page. thanks,

    ReplyDelete
  30. Thanks for the post. but how to enable "share" button??

    ReplyDelete

Make in India