Been a while I have a wonderment how facebook can create something that as cool as its status update. If you're unsure what I'm talking about maybe this will help you: every time you write your status and submit it, you will find the list of your feed moved slide down. I thought it was really cool! Then when I was working on my online application I accidentally thought about it again and suddenly I found the idea behind that cool feature. And here's how I do it..

1. Set the template

   In order to make it works, we need to set up THE template which means I need to have THE form and (I call it) THE feed, which is a place to where the new status would beautifully appear.

   THE FORM would look something like this

   <form action="javascript:void(0);">
  <textarea name="status"></textarea><br />
  <input type="button" name="update" value="update" />
</form>

   and THE FEED would look something like this

   <div class="the-feed" style="height: 100px; width: 300px; border:1px solid black;">
  <ul>
    <li>Last Feed</li>
  </ul>
</div>

2. Call / include jQuery

   yup, I use jQuery to help me achiving this feature. and I used the one that Google kept on its server

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

3. Create THE SNIPPET/FUNCTION

   Now this small snippet will handle the interactive update ala facebook

   var interactiveUpdate = function(id,update) {
  var idparam = '.'+ id + ' ul li:first-child';

  // insert new list onto the first child of ul and hide it
  $(idparam).before('<li style="display:none;">'+update+'</li>');

  // display the hidden first child using jQuery's effect slideDown()
  $(idparam).slideDown("slow");
}

   This snippet contains three important parameters: id, update, and ul.

   • id : is the reference name of the class in the div form. In this case I use "example-status-1422" - just to make sure that the tag's class is unique.
   • update : is the desired string to be inserted in THE FEED. You can use html tag if you want.
   • ul or ol : if in THE LOG part you are using <ul> then in the javascript function you should also use ul or if you use <ol> then in the javascript function ol it is.

4. Prepare the function to generate the snippet

   Using jQuery's rules, I made a function that will execute every time the "update" button is clicked. This function would look something like this

   $(function(){updateStatus();});

var updateStatus = function() {
   // Set the event if the button is clicked
  $('input[name="update"]').click(function() {

    // grab the status
    var stat = $('textarea[name="status"]').val();

    // call the interactiveUpdate snippet
    interactiveUpdate('the-feed',stat);
  });
}

5. Putting everything altogether and.. DONE!

   Let's try it, shall we... (try to type something in THE FORM and press the "update" button. then, keep an eye on THE FEED)

   THE FORM:

   THE FEED:

   • Last Feed

This tutorial does not actually connect the snippet to the database and store the updated status. However, you can insert additional script that will send query using AJAX and display the status if the storing process is successful.

Download

All of these codes can be downloaded here. I have included jquery as well, so you can try it immediately once you have downloaded and unziped the package.

Compatibility

I have tested this technique using the following browsers:

• Google Chrome 3.0.195.27
• Firefox 3.5.3
• Opera 10.00
• Safari 4.0.3
• IE 8.0.6001

If you find any bug and/or the example does not work in any specific browser, please let me know :)