Timeline Design using CSS and Jquery

Timeline design is the current web trend that visualizes the data in an interesting way. Today I want to discuss about how to design a timeline in a simple way with JSON data feed , that using CSS pseudo elements such as :before and :after. Pseudo elements are used to apply special effects to selectors. This post is a combination of my previous post, please take a quick look at this demo and try demo script with your WAMP server.

Download Script     Live Demo

The ::before selector inserts content before the content of the selected element(s).

CSS Code

#updates
{
position:relative;
padding:20px 0px 20px 0px;
}
#updates:before
{
content: '';
position: absolute;
top: 0px;
bottom: 0px;
width: 5px;
background: #999999 ;
}

.timeline_square
{
width:12px;
height:12px;
display:block;
position: absolute;
left:-4px;
border-top:3px solid #e8eaed;
border-bottom:3px solid #e8eaed;
margin-top:-8px;
}

Status Update HTML Code
Check my previous postStatus Message Design with CSS

<div class="stbody">
<span class="timeline_square color1"></span>
<div class="stimg"><img src="profile.jpg" /></div>
<div class="sttext">
<span class="stdelete" title="Delete">X</span>
<b>Srinivas Tamada</b><br/>
9lessons Programming Blog
<div class="sttime">10 seconds aga.</div>
<div class="stexpand">
//Youtube IFrame Code
</div>
</div></div>

users.json
This contains Users data feed, you can generate this using PHP code.

{
"Messages":[
{
"user":"Nishant",
"message":"My name is Nishant . ",
"avatar":"srinivas.jpg",
"embed":"",
"time":"16 seconds ago"
},
{
"user":"Arun",
"message":"Everything is possible. ",
"avatar":"arun.jpg",
"embed":"",
"time":"18 seconds ago"
},
{
"user":"Joker",
"message":"If you are good at something, never do it for free",
"avatar":"joker.png",
"embed":"<iframe height='315' src='//www.youtube.com/embed/FalHdi2DkEg' width='560'></iframe>",
"time":"28 seconds ago"
},
..............
..............
..............
]
}

index.html
Contains Jquery and JavaScript code, here $.getJSON parse the JSON data object.

<script src="js/jquery.min.js"></script>
<script src="js/jquery.linkify.min.js"></script>
<script src="js/jquery.livequery.js"></script>
<script>
$(document).ready(function()
{

//Formatting the text that contains URLs (text to link)
$(".sttext").livequery(function ()
{
$(this).linkify({ target: "_blank"});
});

//Parsing JSON object. 
$.getJSON("users.json", function(data)
{
var totalCount=5;
var jsondata='';
$.each(data.Messages, function(i, M)
{
//Generating random numbers for different dot colors 
var num = Math.ceil(Math.random() * totalCount );
jsondata +='<div class="stbody">'
                +'<span class="timeline_square color'+num+'"></span>'
                +'<div class="stimg"><img src="'+M.avatar+'" /></div>'
                +'<div class="sttext"><span class="stdelete">X</span>'
                +'<b>'+M.user +'</b><br/>'
                +M.message+'<div class="sttime">'+M.time
                +'</div><div class="stexpand">'+M.embed+'</div></div></div>';
});
$(jsondata).appendTo("#updates");
});

//Delete record
$('body').on("click",".stdelete",function()
{
var A=$(this).parent().parent();
A.addClass("effectHinge");
A.delay(500).fadeOut("slow",function(){
$(this).remove();
});
});


});
</script>
//HTML Code
<div id="updates"></div>

Deleting record animation effect, please check my previous post CSS3 Animation Effects with Keyframes

CSS code
Random colors for timeline square points.

.color1
{
background-color:#f37160
}
.color2
{
background-color:#50b848
}
.color3
{
background-color:#f39c12
}
.color4
{
background-color:#0073b7
}
.color5
{
background-color:#00acd6
}
.effectHinge
{
animation:hinge 1s;
-webkit-animation:hinge 1s; /* Safari and Chrome */
}