9lessons programming blog
Loading Search
9lessons Bring Friends
Wall Script
Follow Me:
Monday, January 30, 2012

Facebook Timeline Design using JQuery and CSS.

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
<div id="container">

<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>

</div>

Normal CSS Floats.
Facebook Timeline Design using  JQuery and CSS.

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.

<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="jquery.masonry.min.js"/>
<script type="text/javascript" >
$(function()
{
// masonry plugin call
$('#container').masonry({itemSelector : '.item',});
});
</script>

After applying Masonry plugin.
Facebook Timeline Design using  JQuery and CSS.

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>

Facebook Timeline Design using  JQuery and CSS.

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);
}
});
}

Facebook Timeline Design using  JQuery and CSS.

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.
<div id="container">

<div class="item">
<a href='#' class='deletebox'>X</a>
1
</div>
<div class="item">
<a href='#' class='deletebox'>X</a>
2
</div>
-----------
-----------
-----------

</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
<div id="container">

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

<div id="popup" class='shade'>
<div class="Popup_rightCorner" > </div>
What's Up?
<textarea id='update'></textarea>
<input type='submit' value=' Update ' id='update_button'/>
</div>

</div>

Facebook Timeline Design using  JQuery and CSS.

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;
}
Comments
{ 118 comments }
Anonymous said...

great

Sharvy Ahmed said...

Very Nice! :-)

youngbobby said...

Wow! Great one mate.

الإمبراطور وحيد said...

thats great !

Anonymous said...

u rock mann!!

Sanchit said...

Wow gr8 tutorial.I was just thinking about facebook time line in jquery and u have done it.Thanks!!!

Mohit Bumb said...

That's what I'm expecting from This Blog.
Love jQuery Tutorials

Anonymous said...

Thanx , how can we use it with database ?

Anonymous said...

gr8 .. very nice job

Sandeep Kumar said...

Very Nice Srinivas

סטפין נאדאר said...

rocking shreeeee ;)

Ares said...

Srinivas Tamada you are a genius...

Bhargav Anadkat said...

Thanks,It is nice tutorial.

Anonymous said...

thanks

סטפין נאדאר said...

yes plz give a tuto with database also :P

swangsuresh said...

Very Nice Rocking Srinivas

Jobsbox said...

Great

konejoksk said...

OMG I doit this but on PHP , MYSQL and css3 but this is awesome! U Rock man!

Anonymous said...

very very nice

Srinivas Tamada said...

Sure, I will release the PHP + MySQL Database edition.

Er.Bijay Bhandari said...

nice!!!waiting for your php/mysql edn...

milad said...

how about some jquery animations over deleting post (hiding the tag) ...

prasanjit said...

very nice and advanced.Thanks for showing such kind of design with simple example

Anonymous said...

One bug - when you click on the timeline and add a new entry it doesn't appear on the timeline where you selected but at the top. Still - really good job.

Manussawin said...

Nice

Jano Sousa said...

Hello Srinivas,
I can translate your article into Portuguese and post on my blog with your credit divided?

Anonymous said...

Once again, Awesome!

Anonymous said...

Is there any way you could do a tutorial tying this in with the Wall Script 4.0 for those of us who bought it?

Herman said...

Awesome, waiting for the PHP + MySQL edition! :)

Anonymous said...

love

agus said...

why not connect to the database?

Anonymous said...

wow...this very usefull for developers...nice

kangtanto said...

wow.... this is the article that i've been waiting for.

Taufiq said...

IE is DEAD !! huahahahaha.
Nice !

Hiren Modhvadia said...

Good tutorial, Best explanation, Great Tutor

Anonymous said...

this can work in IE just add the appropiate DOCTYPE decleration all it all works as expected .. cool job

Nhận làm website said...

thank I like it !

Ary Wibowo said...

wow... nice tutorial. thanks Srinivas:)

Anonymous said...

gooooooooooooood

Anonymous said...

One word, genius1

Srinivas Tamada said...

Database edition with Wall Script 4.0

Virendra Rajput said...

Awesomeeeeeeee!!!!!

Anonymous said...

非常的棒,感謝分享

Brya Tan said...

Good, Nice script Srinivas

rikoy said...

nice

Jai said...

Kewl.. Awesome.. nice script..

Anonymous said...

Great tutorial

Arjuna nikawela said...

great article... awesom,thanks

TechnoLifer said...

Good tutorial with great examples. just gonna open the demo..

Anonymous said...

Cooolllll..

PopularBlogSite said...

This is awesome! Thanks Man.

Anonymous said...

All demo's very nice...

venida said...

It's Great, but there we can using on fb? or....

Just confuse cause still newby ;)

Anonymous said...

Nice!!!!

Pickle said...

If each of the divs are the same size (height), is there a simple way to offset the array points so that each row's arrows aren't on top of each other?

Gopal said...

very nice

خقق said...

مشكووور والله يعطيك العافيه




good thenksss

vou said...

excellent thank you, been looking for something like this. Gonna play with it and hopefully add some php in it too.

facebook status said...

This is a professional lettering, wow, it is outstanding I'm alarmed in these right,I have launch it very useful, stare give confidence to you as soon as likely to inform your works! we will always carry on.

Xiabili said...

great!!!

Anonymous said...

Any ideas on Database edition-Wall Script 4.0 Release Date?

Anonymous said...

it is very nice but IE 9 is not supporting

Shirasad said...

Very nice....

Anonymous said...

i dint understand this script howsoever i tried 2 understand it.... :(

the explainations are direct pro level... can i get some beginner level explainations... i dint understand the start itself, how many java scripts are involved or how manny css... well i dont blame anybody, cuz am myself a rookie in scripts n designing...but still hoping some replies to anonymous "cool guy"

Anonymous said...

While IE usage is down it is far from "dead". It still holds approx. 20% of the market. It should be supported.

Fl0 said...

Hi from Nepal :) I turns your awesome Facebook jquery timeline tutorial in a dynamic Wordpress Timeline http://bit.ly/PinTL :) Not linked yet to 9lessons but two articles on my bitpxl blog talk about this timeline tutorial... Thanks !

Cuma said...

Great information.. I love your articles.. thank you

Anonymous said...

Yes, support of IE is needed. Many still uses it.

Anonymous said...

your codes rock..!! sheer genius..!!

Michael said...

Great work. but how can i add a divider i the middel af the list. like at new year og at a birhtday.

توبيكات said...

Great tutorial ..!

موقع توبيكات said...

Great tutorial ..!

SquiDi said...

Srinivas Tamada said: "Try this demo with modern browsers like Chrome, Firefox and Safari (IE is dead)."

go to demo line 271 = index.html

change from => $('#container').masonry({itemSelector : '.item',});

change to => $('#container').masonry({itemSelector : '.item'});

and it works also fine in IE !!!

Anonymous said...

Nice

prasad said...

Nice article....really a great tutorial

rajiv said...

This is a nice way of explanation of the topic . I need a help from you to manage JPEG on Prestashop.
Kindly help me out.

Anonymous said...

I, how about an horizontal version?
Thank you

turgon said...

Will it be legal to use it in an application? Won't facebook sue me if i use it in a commercial app?

Anonymous said...

Great!!!

Đầu Gấu said...

Great, tks bro :)

Soumya said...

very nice..
thanks

kOky said...

LOVE IT!! Thank you!!

Tendai P.L.Gomo said...

This is so cool. Can be even cooler if it connected to a database..

Anonymous said...

thanks man

Anonymous said...

nice i use it well

phphunger said...

excellent tutorial...eagerly waiting for database version....

Day Milovich said...

perfect. can we use this code in blogspot?

Anonymous said...

HI,
Will you be releasing the version of this with the mysql db tables?
thx

Mangalamurthy Bhat said...

hi thanks a lot for tutor, I did it in my site :)

http://www.burningsoul.in/timeline.php

Phan Chính Dũng said...

When add method $.post or ajax, I don't remove item masonry.

Anonymous said...

Thx !

Anonymous said...

That's awesome! Thanks. :)

Anonymous said...

great work dude...thanks a lot

Anonymous said...

THANKYOU SO MUCH!

Alok Jain said...

Each block on timeline have a pointer (arrow) and a dot, these dots are overlapping when blocks are on same position. For example first 2 blocks in the demo page.

I do not want these dots to overlap, instead i want to add margin top to the blocks where they have same top position on timeline. How can i achieve this using jquery?

I have placed my question of stackexchange.com too
http://stackoverflow.com/questions/12935446/fix-overlapping-pointer-on-facebook-timeline-effect

Anonymous said...

That's Pretty Great !

I Just read it and i think i can do it sometime

Amarjeet Singh said...

will u plzz give d tuto for facebook like chat__?

همس العراق said...



THANKYOU SO MUCH!

>>><<<

احمد said...

تسلم ايدك ياسطي

Mail Forwarding said...

when blocks are on same position. For example first 2 blocks in the demo page.

Anonymous said...

Great. i really like you dude... Best of luck

Watt said...

Very nice script ! Thx

gleenk said...

Nice but how can i do if i have different size box for different days? Is it possible to refer to something like date to order them?

cliknfind said...

Very Nice! :-)

marquee hire london said...

Yes i like the Facebook timeline too because it change the view and set a new trend for the users...

Calipso said...

Great tutorial, thanks dude!

Calipso said...

Great tutorial, thanks dude!

Anonymous said...

thank ! amazing man

graf said...

You should checkout .delegate instead of using .live. :)

loethen said...

so useful tutorial.
thanks!

Anonymous said...

Ablo ka dablo :) Jibidin Jakka pakka chin.... :D Thanks...

You're really awesome...

John Quimera said...

Tamada... Your are a genius! Thanks, is possible to make responsive?

Anonymous said...

Yehaaa, great tutorial!

Goo Cip said...

wow

Anonymous said...

nice

Lim Socheat said...

Can use it in my webpage? or only use in facebook?

Anonymous said...

Nice,
I search a evolutive version with separate (year for exemple). Do you an exemple ?
Thanks

العاب said...

very nice but need more imporovement like make it responsive for mobile device
thank you

Post a Comment