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

124 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. Database edition with Wall Script 4.0

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

    ReplyDelete
  26. Kewl.. Awesome.. nice script..

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

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

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

    Just confuse cause still newby ;)

    ReplyDelete
  30. 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
  31. مشكووور والله يعطيك العافيه




    good thenksss

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

    ReplyDelete
  33. 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
  34. Any ideas on Database edition-Wall Script 4.0 Release Date?

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

    ReplyDelete
  36. 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
  37. While IE usage is down it is far from "dead". It still holds approx. 20% of the market. It should be supported.

    ReplyDelete
  38. 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
  39. Great information.. I love your articles.. thank you

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

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

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

    ReplyDelete
  43. 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
  44. Nice article....really a great tutorial

    ReplyDelete
  45. 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
  46. I, how about an horizontal version?
    Thank you

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

    ReplyDelete
  48. LOVE IT!! Thank you!!

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

    ReplyDelete
  50. nice i use it well

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

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

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

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

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

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

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

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

    ReplyDelete
  58. 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
  59. That's Pretty Great !

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

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

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

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

    ReplyDelete
  63. 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
  64. Yes i like the Facebook timeline too because it change the view and set a new trend for the users...

    ReplyDelete
  65. thank ! amazing man

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

    ReplyDelete
  67. so useful tutorial.
    thanks!

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

    You're really awesome...

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

    ReplyDelete
  70. Yehaaa, great tutorial!

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

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

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

    ReplyDelete
  74. i will be using it on my website

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

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

    ReplyDelete
  77. thanks for posting these amazing stuff.

    ReplyDelete

mailxengine Youtueb channel
Make in India