Facebook-Like Status Update Effect With JQuery and CSS

Copying a famous website’s effects isn’t as hard as it used to be thanks to open source frameworks and libraries.

In this post you will see how easy it is to copy facebook’s status update effect using JQuery. See the result in the video below and scroll down to see the code.

httpv://www.youtube.com/watch?v=oCvkb8aNuys

The Effect

The first thing I had to do was brake down the interface into several components:

  • status textbox
  • update button
  • and stream of updates

After this breakdown the logic follows:

  • user clicks update button
  • new status is prepended to the stream ( the new status has an opacity of  0 )
  • the opacity of the new status is animated from 0 to a higher value

I highlighted prepend and animated because JQuery has functions that can do this and in fact have these names.

The User Interface

As I said the UI is very simple, it involves a textbox, button and an empty or pre-filled stream of updates.

I will wrap the statuses in a <p> tag with class “status”.

<p>
<textarea id="status"></textarea>
</p>
<p>
<button id="update">Update</button>
</p>

<div id="stream">
   <p class="status">
    This is a status that exists when the page loads
  </p>
</div>

The CSS

New updates will not initially appear on the stream but they will appear right away using an animation.

.status
{
border: solid 1px #eeeeee;
padding: 20px;
}
.newStatus{
opacity: 0;
}

The JQuery

Now that this UI is ready let’s talk about how prepend and animate work.

prepend

Prepend is easy to use, you basically specify an element to be the container of whatever content you want to prepend to it.

$(container).prepend(content);

animate

The animate function is a little more complex than prepend. This function requires that you pass it the properties you wish to animate to, in our case we want to animate the opacity to 3.0, the second parameter is the time you want the animation to take.

$(document).ready(function(){
	var newStatus;
	var minLength=1;
	$("button#update").click(function(){
		newStatus=$.trim($("textarea#status").val()); // get status
		
		if(newStatus.length>minLength)
		{
			$("div#stream").prepend('<p class="status newStatus">'+newStatus+'</p>');
			$('.newStatus').animate({opacity: 3.0}, 5000); // set opacity and animation time
			$("textarea#status").val('').focus(); // clear status box and focus on textbox
		}
		else
		{
			alert("no status!");
		}
		
	});
});

The Full Code

Copy, paste, modify and share this code.

<html>
<head>
<style type="text/css">
.status
{
border: solid 1px #eeeeee;
padding: 20px;
}
.newStatus{
opacity: 0;
}
</style>
</head>
<body>
<p>
<textarea id="status"></textarea>
</p>
<p>
<button id="update">Update</button>
</p>

<div id="stream">

</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	var newStatus;
	var minLength=1;
	$("button#update").click(function(){
		newStatus=$.trim($("textarea#status").val()); // get status
		
		if(newStatus.length>minLength)
		{
			$("div#stream").prepend('<p class="status newStatus">'+newStatus+'</p>');
			$('.newStatus').animate({opacity: 3.0}, 5000);
			$("textarea#status").val('').focus(); // clear status box
		}
		else
		{
			alert("no status!");
		}
		
	});
});
</script>
</body>
</html>
blog comments powered by Disqus