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 tagbody{ 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
No comments :
Post a comment