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…
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;
}
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.
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.
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!..
I love seeing websites that understand the value of providing a quality resource for free. i like it.