How To Create a 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.

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

<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":"Michael",
"message":"QuickMySupport Current Affairs Blog <br/>https://quickmysupport.com/category/current-affairs-in-english/ ",
"avatar":"https://quickmysupport.com/wp-content/uploads/2019/02/current_affairs_2019.jpg",
"embed":"",
"time":"45 seconds ago"
},
{
"user":"John",
"message":"QuickMySupport Programming Blog. https://quickmysupport.com/category/php/",
"avatar":"https://quickmysupport.com/wp-content/uploads/2019/03/php.png",
"embed":"",
"time":"8 minute ago"
},
{
"user":"David",
"message":"QuickMySupport Mathematics Blog https://quickmysupport.com/category/maths/",
"avatar":"https://quickmysupport.com/wp-content/uploads/2018/10/quick.jpg",
"embed":"",
"time":"20 minute 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>

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 */
}