Thursday, August 30, 2012

Twitter like Expanding Textarea using jQuery and CSS

You all must have noticed the Expanding Tweet Box on Twitter, when we click on it to Tweet our message, the textarea expands dynamically and the icons for Image Upload, Location and Tweet button appears. In this Simple Tutorial we have implemented it using jQuery and CSS.



  index.php  


<div id="container">
<div id="box">
<div id="logo"><img src='1.png'></div>
<div><textarea id="tweet" placeholder="Compose new Tweet..."></textarea></div>
<div id="button_bar">
<div id="icons"><span><img src='camera.jpg' title='Add an Image'/></span>&nbsp; <span><img src='location.png' title='Add your Location'/></span></div>
<div><input type='submit'  value=' Tweet ' class="btn" /> </div>
</div>
</div>
</div>


  Styling in <style> tag 


#container
{
padding-top:100px;
width:300px;
margin:0 auto;
}
#logo
{
margin-bottom:10px;
}
#box
{
width:250px;
}
#tweet
{
border:solid 1px #dddddd;
width:250px;
height:35px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
overflow: auto;
resize: none;
padding:5px;
-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;
}
#tweet:hover
{
border:solid 1px #aaaaaa;
}
.btn
{
float:right;
cursor:pointer;
padding:5px;
margin-top:5px;
color:#ffffff;
font-weight:bold;
background-color: #49afcd;
background-repeat: repeat-x;
border-color: #2f96b4 #2f96b4 #1f6377;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;
}
#icons
{
float:left;
margin-top:10px;
margin-left:4px;
}
#button_bar
{
display:none;
}



  Javascript  


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
   });
$(function() 
{
$("#tweet").focus(function()
{
$(this).animate({"height": "70px",}, "fast" );
$("#button_bar").show();
return false;
});
});
</script>


I hope this tutorial will help you in redesigning your textboxes and make them more stylish like Twitter. We will also add this Update into our Previous Twitter like Dynamic Tweet Update Script.



No comments:

Post a Comment