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