CSS, HTML, Jquery, Tutorials

Create a Timeline Design using CSS and Jquery

Timeline design is the modern-day internet fashion that visualizes the facts in an thrilling manner. Today I want to speak about approximately how to design a timeline in a simple way with JSON records feed , that the usage of CSS pseudo factors which include :before and :after. Pseudo elements are used to apply special effects to selectors. This put up is a combination of my previous post, please take a brief examine this demo and try demo script along with your XAMP or WAMP server or any server you are using.

Download Code           Demo
The ::before selector inserts content earlier than the content of the chosen detail(s). CSS Code: [code language=”html” title=”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; } [/code] Status Update HTML Code:- [code language=”html” title=”Status Update HTML 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 src="//www.youtube.com/embed/FalHdi2DkEg" width="560" height="315"></iframe>", "time":"28 seconds ago" }, ………….. ………….. ………….. ] }[/code]   index.html Contains Jquery and JavaScript code, here $.getJSON parse the JSON data object. [code language=”javascript” title=”index.html”] <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22js%2Fjquery.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" /> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22js%2Fjquery.linkify.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" /> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22js%2Fjquery.livequery.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" /> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%24(document).ready(function()%0A%7B%0A%0A%2F%2FFormatting%20the%20text%20that%20contains%20URLs%20(text%20to%20link)%0A%24(%22.sttext%22).livequery(function%20()%0A%7B%0A%24(this).linkify(%7B%20target%3A%20%22_blank%22%7D)%3B%0A%7D)%3B%0A%0A%2F%2FParsing%20JSON%20object.%20%0A%24.getJSON(%22users.json%22%2C%20function(data)%0A%7B%0Avar%20totalCount%3D5%3B%0Avar%20jsondata%3D”%3B%0A%24.each(data.Messages%2C%20function(i%2C%20M)%0A%7B%0A%2F%2FGenerating%20random%20numbers%20for%20different%20dot%20colors%20%0Avar%20num%20%3D%20Math.ceil(Math.random()%20*%20totalCount%20)%3B%0Ajsondata%20%2B%3D’%3C%2Fp%3E%0A%3Cdiv%20class%3D%22stbody%22%3E%3Cp%3E’%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2B’%3Cspan%20class%3D%22timeline_square%20color’%2Bnum%2B’%22%3E%3C%2Fspan%3E’%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2B’%3C%2Fp%3E%0A%3Cdiv%20class%3D%22stimg%22%3E%3Cimg%20src%3D%22’%2BM.avatar%2B’%22%20%2F%3E%3C%2Fdiv%3E%0A%3Cp%3E’%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2B’%3C%2Fp%3E%0A%3Cdiv%20class%3D%22sttext%22%3E%3Cp%3E%3Cspan%20class%3D%22stdelete%22%3EX%3C%2Fspan%3E’%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2B’%3Cb%3E’%2BM.user%20%2B’%3C%2Fb%3E%3Cbr%2F%3E’%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2BM.message%2B’%3C%2Fp%3E%0A%3Cdiv%20class%3D%22sttime%22%3E’%2BM.time%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2B’%3C%2Fdiv%3E%0A%3Cdiv%20class%3D%22stexpand%22%3E’%2BM.embed%2B’%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A%3Cp%3E’%3B%0A%7D)%3B%0A%24(jsondata).appendTo(%22%23updates%22)%3B%0A%7D)%3B%0A%0A%2F%2FDelete%20record%0A%24(‘body’).on(%22click%22%2C%22.stdelete%22%2Cfunction()%0A%7B%0Avar%20A%3D%24(this).parent().parent()%3B%0AA.addClass(%22effectHinge%22)%3B%0AA.delay(500).fadeOut(%22slow%22%2Cfunction()%7B%0A%24(this).remove()%3B%0A%7D)%3B%0A%7D)%3B%0A%0A%0A%7D)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" /> //HTML Code <div id="updates"></div> [/code]
CSS code [code language=”css” title=”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 */ } [/code]