Timeline Design using CSS and Jquery
Wall Script
Follow Me:
Monday, June 30, 2014

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.

Timeline Design CSS and Jquery


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":"Srinivas",
"message":"9lessons Programming Blog http://www.9lessons.info . ",
"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 */
}
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


21 comments:

  1. Flop back effect is a awesome idea, Thanks for Sharing a worth timeline script.

    ReplyDelete
  2. nice idea sir! awsome pulling json data ! into the stream ! great

    ReplyDelete
  3. another informative article thank you

    ReplyDelete
  4. Very awsome, I like your website, very rich of knowledge. We can always find new things to discover. Congratulation Man. Thank you!

    ReplyDelete
  5. simple and great work..thanks for sharing..

    ReplyDelete
  6. Thank you Srinivas Tamada. Usefull, clear explanation, beautifull, flexible and effective (just as we are used too with 9lessons.info ;-)

    ReplyDelete
  7. How can I reduce the left-margin space of my images. Because after i had already aligned the image position to the left, the mages are still a little not in sraight line with the sentenses margin. please check the photo
    http://3.bp.blogspot.com/-JyxuqYTVqS0/U_YNcInyAhI/AAAAAAAAAa4/fnnH5vOl38M/s1600/Ilustration.png

    ReplyDelete
  8. @George Steven

    Give margin-left:10px

    ReplyDelete
  9. @Srinivas Tamada

    I mean something to do with CSS definition to adjust how images are positioned (I need a CSS code. something that may look like this code. .imagePositon { margin-left: -0.5em; }

    ReplyDelete
  10. I have done it myself. I found this code in my HTML
    .post-body img {
    max-width:640px;
    max-height:auto;
    padding: 8px;
    }

    that i used a long time ago to automatically make define the image px to 640. The padding was set to 8px , so i've changed it to 0px.

    ReplyDelete
  11. Thanks Srinivas Tamada for your this post which is very useful for all web developers .

    ReplyDelete
  12. Thanks Mr. Tamada but i have a problem , i cant load users.json so i decided to use php. And what should i do if i want to add some post to timeline like twter ?

    ReplyDelete
  13. how do i retrieve data from mysql table and put to jason and use in this script?

    ReplyDelete

Make in India