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;
}
4 comments
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.
We would love to hear from you...