Facebook Wall Status Box using JQuery & CSS

Facebook Wall Status Box by default the status box will appear in small box and it will expand when the mouse cursor set the focus so i have developed it using JQuery and CSS. it is just simple trick.

Step 1

add this CSS inside the HEAD tag

body{ font-family:Arial; font-size:12px;}

#wallBoard{ margin:0 auto; width:800px; height:auto; border:solid #69F 1px; padding:10px;}

#title{margin:0 auto; width:460px; padding:0 0 30px 0;}

h1{ font-family:Tahoma, Geneva, sans-serif; color:#09C; font-weight:normal; margin:0 auto;}

#statusbox{ width:515px; height:auto; border:solid #EBEBEB 1px; margin:0 auto;}

.status{resize:none; width:500px; height:15px;padding:5px; margin:0 auto; border:0; outline:0; font-size:12px; font-family:Verdana, Geneva, sans-serif;
color:#000;}

.statusfocus{ height:50px;}

.postbarfocus{ position:absolute;}

.postbar{ width:511px; height:32px; padding:2px; background-color:#f2f2f2; margin-top:-3px; display:none; border-top:1px #e6e6e6 solid;}

.postbtn{ width:69px; padding:5px; background-color:#5b74a8; background-image:url(postbg.jpg); font-weight:bold; color:#FFF; border:1px solid #96b469;float:right; font-size:12px; cursor:pointer;}

Step 2

In Javascript write the focus function to status box and add the CSS class using addclass property and show the DIV.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>

<script>

$(document).ready(function(){
 
 $('.status').focus(function(){
  
  $('.status').addClass('statusfocus');
  $('.postbar').show();
  
 });
 
});

</script>

Step 3

<div id="wallBoard">
<div id="title"><h1>Lesson Cup @ Facebook Wall Status Box</h1></div>
<div id="statusbox">
<form action="" method="post" name="statusform">
<textarea name="status" class="status" id="status" placeholder="What's on your mind?" title="What's on your mind?"></textarea>
<div id="postbar" class="postbar">
<input name="post" type="submit" value="Post"  class="postbtn" />
</div>
</form>
</div>

Live Demo