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).
Download Script 
Live DemoStep 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>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
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;
}
.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>
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.
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>
// 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('')"});
});
{
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;}
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 leftCornetfunction 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);
}
});
}
{
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;
}
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>
<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;
});
{
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>
<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>
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;
});
$(".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;
}
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;
}
Read these tips and attract more customers by improving your restaurant website design.
great
Very Nice! :-)
Wow! Great one mate.
thats great !
u rock mann!!
Wow gr8 tutorial.I was just thinking about facebook time line in jquery and u have done it.Thanks!!!
That's what I'm expecting from This Blog.
Love jQuery Tutorials
Thanx , how can we use it with database ?
gr8 .. very nice job
Very Nice Srinivas
rocking shreeeee ;)
Srinivas Tamada you are a genius...
Thanks,It is nice tutorial.
thanks
yes plz give a tuto with database also :P
Very Nice Rocking Srinivas
Great
OMG I doit this but on PHP , MYSQL and css3 but this is awesome! U Rock man!
very very nice
Sure, I will release the PHP + MySQL Database edition.
nice!!!waiting for your php/mysql edn...
how about some jquery animations over deleting post (hiding the tag) ...
very nice and advanced.Thanks for showing such kind of design with simple example
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.
Nice
Hello Srinivas,
I can translate your article into Portuguese and post on my blog with your credit divided?
Once again, Awesome!
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?
Awesome, waiting for the PHP + MySQL edition! :)
love
why not connect to the database?
wow...this very usefull for developers...nice
wow.... this is the article that i've been waiting for.
IE is DEAD !! huahahahaha.
Nice !
Good tutorial, Best explanation, Great Tutor
this can work in IE just add the appropiate DOCTYPE decleration all it all works as expected .. cool job
thank I like it !
wow... nice tutorial. thanks Srinivas:)
gooooooooooooood
One word, genius1
Database edition with Wall Script 4.0
Awesomeeeeeeee!!!!!
非常的棒，感謝分享
Good, Nice script Srinivas
nice
Kewl.. Awesome.. nice script..
Great tutorial
great article... awesom,thanks
Good tutorial with great examples. just gonna open the demo..
Cooolllll..
This is awesome! Thanks Man.
All demo's very nice...
It's Great, but there we can using on fb? or....
Just confuse cause still newby ;)
Nice!!!!
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?
very nice
مشكووور والله يعطيك العافيه
good thenksss
excellent thank you, been looking for something like this. Gonna play with it and hopefully add some php in it too.
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.
great!!!
Any ideas on Database edition-Wall Script 4.0 Release Date?
it is very nice but IE 9 is not supporting
Very nice....
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"
While IE usage is down it is far from "dead". It still holds approx. 20% of the market. It should be supported.
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 !
Great information.. I love your articles.. thank you
Yes, support of IE is needed. Many still uses it.
your codes rock..!! sheer genius..!!
Great work. but how can i add a divider i the middel af the list. like at new year og at a birhtday.
Great tutorial ..!
Great tutorial ..!
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 !!!
Nice
Nice article....really a great tutorial
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.
I, how about an horizontal version?
Thank you
Will it be legal to use it in an application? Won't facebook sue me if i use it in a commercial app?
Great!!!
Great, tks bro :)
very nice..
thanks
LOVE IT!! Thank you!!
This is so cool. Can be even cooler if it connected to a database..
thanks man
nice i use it well
excellent tutorial...eagerly waiting for database version....
perfect. can we use this code in blogspot?
HI,
Will you be releasing the version of this with the mysql db tables?
thx
hi thanks a lot for tutor, I did it in my site :)
http://www.burningsoul.in/timeline.php
When add method $.post or ajax, I don't remove item masonry.
Thx !
That's awesome! Thanks. :)
great work dude...thanks a lot
THANKYOU SO MUCH!
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
That's Pretty Great !
I Just read it and i think i can do it sometime
will u plzz give d tuto for facebook like chat__?
THANKYOU SO MUCH!
>>><<<
تسلم ايدك ياسطي
when blocks are on same position. For example first 2 blocks in the demo page.
Great. i really like you dude... Best of luck
Very nice script ! Thx
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?
Very Nice! :-)
Yes i like the Facebook timeline too because it change the view and set a new trend for the users...
Great tutorial, thanks dude!
Great tutorial, thanks dude!