Facebook Timeline Design using JQuery and CSS.
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;
}

123 comments:

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

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

    ReplyDelete
  3. Thanx , how can we use it with database ?

    ReplyDelete
  4. gr8 .. very nice job

    ReplyDelete
  5. Srinivas Tamada you are a genius...

    ReplyDelete
  6. yes plz give a tuto with database also :P

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

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

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

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

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

    ReplyDelete
  12. 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.

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

    ReplyDelete
  14. Once again, Awesome!

    ReplyDelete
  15. 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?

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

    ReplyDelete
  17. why not connect to the database?

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

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

    ReplyDelete
  20. IE is DEAD !! huahahahaha.
    Nice !

    ReplyDelete
  21. Good tutorial, Best explanation, Great Tutor

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

    ReplyDelete
  23. wow... nice tutorial. thanks Srinivas:)

    ReplyDelete
  24. One word, genius1

    ReplyDelete
  25. Database edition with Wall Script 4.0

    ReplyDelete
  26. 非常的棒,感謝分享

    ReplyDelete
  27. Kewl.. Awesome.. nice script..

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

    ReplyDelete
  29. All demo's very nice...

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

    Just confuse cause still newby ;)

    ReplyDelete
  31. 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?

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




    good thenksss

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

    ReplyDelete
  34. 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.

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

    ReplyDelete
  36. it is very nice but IE 9 is not supporting

    ReplyDelete
  37. 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"

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

    ReplyDelete
  39. 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 !

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

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

    ReplyDelete
  42. your codes rock..!! sheer genius..!!

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

    ReplyDelete
  44. 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 !!!

    ReplyDelete
  45. Nice article....really a great tutorial

    ReplyDelete
  46. 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.

    ReplyDelete
  47. I, how about an horizontal version?
    Thank you

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

    ReplyDelete
  49. LOVE IT!! Thank you!!

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

    ReplyDelete
  51. nice i use it well

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

    ReplyDelete
  53. perfect. can we use this code in blogspot?

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

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

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

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

    ReplyDelete
  57. That's awesome! Thanks. :)

    ReplyDelete
  58. great work dude...thanks a lot

    ReplyDelete
  59. THANKYOU SO MUCH!

    ReplyDelete
  60. 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

    ReplyDelete
  61. That's Pretty Great !

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

    ReplyDelete
  62. will u plzz give d tuto for facebook like chat__?

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

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

    ReplyDelete
  65. 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?

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

    ReplyDelete
  67. Great tutorial, thanks dude!

    ReplyDelete
  68. Great tutorial, thanks dude!

    ReplyDelete
  69. thank ! amazing man

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

    ReplyDelete
  71. so useful tutorial.
    thanks!

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

    You're really awesome...

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

    ReplyDelete
  74. Yehaaa, great tutorial!

    ReplyDelete
  75. Can use it in my webpage? or only use in facebook?

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

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

    ReplyDelete
  78. i will be using it on my website

    ReplyDelete
  79. i work great but need some modification just i want it to load slowly

    ReplyDelete
  80. great work done here, very helpful for me

    ReplyDelete
  81. thanks for posting these amazing stuff.

    ReplyDelete