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