Facebook Timeline Design using JQuery and CSS.

{ 118 comments }

I know what my readers are expecting from 9lessons blog, after long time I'm going to discuss about Jquery usage. Facebook timeline design makes big revolution in social networking world and it gives new feel to the user profile pages. In this post I want to explain how simple I had implemented this design with Jquery and CSS. Try this demo with modern browsers like Chrome, Firefox and Safari (IE is dead).

Facebook Timeline Design using JQuery and CSS.

Download Script

Live Demo

Step 1 - HTML Layout

First create a DIV element with attribute ID value container. The layar contains of multiple DIV elements attribute class value item.
HTML

Normal CSS Floats.

CSS

#container{width:860px; margin: 0 auto; }
.item {
width: 408px;
margin: 20px 10px 10px 10px;
float: left;
background-color:#ffffff;
border:solid 1px #B4BBCD;
min-height:50px;
text-align:justify;
word-wrap:break-word;
}

Step 2 - Avoid Spaces

I used jQuery Masonry plugin for adjusting the empty gaps.

After applying Masonry plugin.

Step 3 - Timeline Navigator

Now create a timeline_container DIV element inside the container DIV. This layer contain a DIV element attribute classes value timeline and plus.
HTML

<div id="container">
// Timeline Navigator
<div class="timeline_container">
<div class="timeline">
<div class="plus"></div>
</div>
</div>

<div class="item">1</div>
--------
--------

</div>

JavaScript
$(".timeline_container").mousemove(function(){})- timeline_container is the class name of timeline navigator DIV tag. Using $('.plus').css() - applying style background image plus.png.

$('.timeline_container').mousemove(function(e)
{
var topdiv=$("#containertop").height();
var pag= e.pageY - topdiv-26;
$('.plus').css({"top":pag +"px", "background":"url('images/plus.png')","margin-left":"1px"});}).
mouseout(function()
{
$('.plus').css({"background":"url('')"});
});

Timeline Navigator CSS

.timeline_container{
width: 16px;
text-align: center;
margin: 0 auto;
cursor:pointer;
display: block;
}
.timeline{
margin: 0 auto;
background-color:#e08989;
display: block;
float: left;
height: 100%;
left: 428px;
margin-top: 10px;
position: absolute;
width: 4px;
}
.timeline:hover{cursor: pointer;margin: 0 auto;}
.timeline div.plus{width: 14px;height: 14px;position: relative;left: -6px;}

Step 4 - Injecting Arrow Points

This is most interesting part finding $('#container').find('.item') div position and injecting arrows if position 0px rightCorner else leftCornet

function Arrow_Points()
{
var s = $('#container').find('.item');
$.each(s,function(i,obj){
var posLeft = $(obj).css("left");
$(obj).addClass('borderclass');
if(posLeft == "0px")
{
html = "<span class='rightCorner'></span>";
$(obj).prepend(html);
}
else
{
html = "<span class='leftCorner'></span>";
$(obj).prepend(html);
}
});
}

CSS

.rightCorner {
background-image: url("images/right.png");
display: block;
height: 15px;
margin-left: 408px;
margin-top: 8px;
padding: 0;
vertical-align: top;
width: 13px;
z-index:2;
position: absolute;
}
.leftCorner{
background-image: url("images/left.png");
display: block;
height: 15px;
width: 13px;
margin-left: -13px;
margin-top: 8px;
position: absolute;
z-index:2;
}

Step 5 - Delete Block

Added common anchor tag class name deletebox inside the item DIV.

JavaScript
Contains javascipt code. $(".deletebox").live('click',function(){} - deletebox is the class name of anchor tag (X). Using $(this).attr("id") calling delete button value. Here every delete action container will reload with fresh arrow point why because of item DIVs postions shuffling.

$(".deletebox").live('click',function()
{
if(confirm("Are your sure?"))
{
$(this).parent().fadeOut('slow');
//Remove item block
$('#container').masonry( 'remove', $(this).parent() );
//Reload masonry plugin
$('#container').masonry( 'reload' );
//Hiding existing Arrows
$('.rightCorner').hide();
$('.leftCorner').hide();
//Injecting fresh arrows
Arrow_Points();
}
return false;
});

Step 6 - Status Popup

Create a popup DIV element inside the container DIV. This layer contains textbox id='update' and input ID update_button.
HTML

JavaScript
$(".timeline_container").live('click',function(){} - timeline_container is the class name of timeline navigator element DIV. Here too same thing happen like delete action re-arranging container DIVs using masonry plugin and injecting fresh arrow points.

//Timeline navigator on click action
$(".timeline_container").click(function(e)
{
var topdiv=$("#containertop").height();
//Current Postion
$("#popup").css({'top':(e.pageY-topdiv-33)+'px'});
$("#popup").fadeIn(); //Popup block show
//Textbox focus
$("#update").focus();
});

//Mouseover no action
$("#popup").mouseup(function() {return false});
//Outside action of the popup block
$(document).mouseup(function(){$('#popup').hide();});

//Update button action
$("#update_button").live('click',function()
{
//Textbox value
var x=$("#update").val();
//Ajax Part
$("#container").prepend('<div class="item"><a href="#" class="deletebox">X</a>'+x+'</div>');
//Reload masonry
$('#container').masonry( 'reload' );
//Hiding existing arrows
$('.rightCorner').hide();
$('.leftCorner').hide();
//Injecting fresh arrows
Arrow_Points();
//Clear popup textbox value
$("#update").val('');
//Popup hide
$("#popup").hide();
return false;
});

CSS

#popup{
display: block;width: 408px;
float: left;margin-top:10px;
background-color:#ffffff;
border:solid 1px #A9B6D2;
min-height:60px;display:none;
position:absolute;margin:10px;
}