Facebook like Expanding Textbox with Jquery.

Today i will show you how to implement Facebook like expanding textbox with Jquery.Thanks to d Josh Bush for his nice watermarkinput java script file and Srinivas Tamada to developed this script.
Facebook like Expanding Textbox with Jquery.
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>

[smProductImageAdd src="http://learneveryday.net/codecanyon/adverticement/add_codecnayon_smart-social-share-php.png" alt= "Smart Social Share" href="http://codecanyon.net/item/php-smart-social-share/202558" title="Smart Social Share (Php Plugin)" description="Smart Social share is a php plugin . Which helps you to give user to share your content with social book mark site. There are 4 plugin in this package." ref="marifdu"]

body
{
font-family:Arial, Helvetica, sans-serif;
}
#content
{
width:450px; height:30px;
border:solid 2px #006699;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;

}
#button
{
background-color:#3B5998;
color:#ffffff;
font-size:13px;
font-weight:bold;
padding:4px;
}
#cancel
{
background-color:#3B5998;
color:#ffffff;
font-size:13px;

padding:4px;
margin-left:10px;
}
#content
{
font-size:14px;

}
#button_block
{
display:none;


}

 

the coder

Got something to say? Go for it!

*

 
More in JQuery for beginner (3 of 4 articles)