Wednesday, May 19, 2010

Facebook Like Expanding TextBox with Jquery

5/19/2010

Facebook like expanding textbox adds beauty as well as functionality to your web applications. But creating such a box is not that much easy for novice programmers. But if you try a bit then you will find that it can be created with a little trick. I have created such an expanding box for you.
The code is easy to understand. What I have done is I trapped the document.click() event. On this event I have determined the ID of the element on which click occured. If click occured on the textbox itself, just expand it without doing anything. If the click occured somewhere else on the page just animate the textbox to its previous dimensions.
Even if you find some problem in understanding this script, please write to me...
Now enjoy the live demo...




Live Demo   Download Script

Jquery Code

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
 var expand = function ()
 {
  $("#comment").animate({"height": "75px"}, "fast" );
  $("#btn_div").slideDown("fast");
  return false;
 };
 var collapse = function ()
 {
  $("comment").animate({"height": "30px"}, "fast" );
  $("#btn_div").slideUp("fast");
  return false;
 };
 
 $("#comment").focus(function()
 {
  expand();
 });

 $(document).click(function(event)
 {
  var $thisid=(event.target).id;
     if ($thisid == 'comment')
  {
   return false;
  }
     else if ($thisid == 'share_btn')
  {
   return false;
  }
  else
  {
   $("#comment").animate({"height": "30px"}, "fast" );
   $("#btn_div").slideUp("fast");
   return false;
  }
 });
});
</script>
<body>
<form method="post" action="">
<textarea  id="comment"></textarea>
<div id="btn_div">
 <input type="submit" id="share_btn" value=" Share "/>
</div>
</form>
</body>

CSS Code

#comment
{
width:450px; height:30px;
border:solid 1px #999999;
border-bottom:solid 2px #999999;
border-right:solid 2px #999999;
font-size:12px;
font-family:Georgia, "Times New Roman", Times, serif;
padding:5px;
color:#6C6C6C;
overflow:hidden;
}
#share_btn
{
background-color:#006699;
color:#ffffff;
font-size:13px;
font-weight:bold;
padding:4px;
}
#btn_div
{
display:none;
}

Written by

Arvind is a web developer, programmer and blogger. He has expertise in PHP, Magento, WordPress, jQuery, JavaScript, HTML5 and CSS3. He loves to develop good looking websites with strong backend.

4 comments :

  1. This is my first time i visit here. I found so many entertaining stuff in your blog, I guess I am not the only one having all the leisure here! Keep up the good work.

    ReplyDelete
  2. Thanks for sharing these info with us! his is a great site. I really like it. Thank you for the site. May God bless you in all your works.

    ReplyDelete
  3. Thank you for sharing This knowledge.Excellently written article, if only all bloggers offered the same level of content as you, the internet would be a much better place. Please keep it up!..

    ReplyDelete
  4. I love seeing websites that understand the value of providing a quality resource for free. i like it.

    ReplyDelete

We would love to hear from you...

 

© 2014 Web Speaks . All rights resevered. Designed by Templateism