how to make a timeline using html, css, javascript?

Is it possible to make a timeline using html, css & javascript/jquery ??

Kindly reply with the links of some useful tutorials ..

  • Chrome Media Query w/ Scrollbars Change
  • Changing CSS Values with Javascript
  • How to: Reduce font-size if a line breaks
  • How to move a div in semi circle
  • Change order element's fadeIn based on their ids
  • Circle bounce bug
  • CSS File: SyntaxError: expected expression, got '.'
  • Print text in a full-screen overlay?
  • Assign ID to marker in leaflet
  • Jquery for duplicate tabs
  • Issue with Hide / Show Jquery on fixed positioned div
  • Fake CRT effect on Canvas
  • 4 Solutions collect form web for “how to make a timeline using html, css, javascript?”

    I found this tutorial useful.
    Straight JS though.

    Kindness,

    D

    Here is a simple vertical timeline with css transitions.

    Just copy and paste.
    http://jsfiddle.net/yinnette/XdQ5Y/

    Here is the HTML:

                <!-- You will need to convert css to LESS -->
                <div class="timeline">
                    <div class="timeline-item active">
                        <div class="year">2008 <span class="marker"><span class="dot"></span></span>
                        </div>
                        <div class="info">That song the artist formerly known as prince sang no longer applies.</div>
                    </div>
                    <div class="timeline-item">
                        <div class="year">2008 <span class="marker"><span class="dot"></span></span>
                        </div>
                        <div class="info">The in-house Gawker chat room is filled with photos of Rob Ford, and for one reason: Rob Ford takes a good goddamn photo.</div>
                    </div>
                    <div class="timeline-item">
                        <div class="year">2008 <span class="marker"><span class="dot"></span></span>
                        </div>
                        <div class="info">That song the artist formerly known as prince sang no longer applies.</div>
                    </div>
                    <div class="timeline-item">
                        <div class="year">2008 <span class="marker"><span class="dot"></span></span>
                        </div>
                        <div class="info">The in-house Gawker chat room is filled with photos of Rob Ford, and for one reason.The in-house Gawker chat room is filled with photos of Rob Ford, and for one reason.The in-house Gawker chat room is filled with photos of Rob Ford, and for one reason.</div>
                    </div>
                </div>
    

    Here is the CSS:

                div {
                    font-family: Helvetica, Arial, sans-serif;
                    box-sizing: border-box;
                }
                .timeline {
                    width: 400px;
                }
                .timeline .timeline-item {
                    width: 100%;
                }
                .timeline .timeline-item .info, .timeline .timeline-item .year {
                    color: #eee;
                    display: block;
                    float:left;
                    -webkit-transition: all 1s ease;
                    -moz-transition: all 1s ease;
                    transition: all 1s ease;
                }
                .timeline .timeline-item.close .info, .timeline .timeline-item.close .year {
                    color: #ccc;
                    -webkit-transition: all 1s ease;
                    -moz-transition: all 1s ease;
                    transition: all 1s ease;
                }
                .timeline .timeline-item .year {
                    font-size: 24px;
                    font-weight: bold;
                    width: 22%;
                }
                .timeline .timeline-item .info {
                    width: 100%;
                    width: 78%;
                    margin-left: -2px;
                    padding: 0 0 40px 35px;
                    border-left: 4px solid #aaa;
                    font-size: 14px;
                    line-height: 20px;
                }
                .timeline .timeline-item .marker {
                    background-color: #fff;
                    border: 4px solid #aaa;
                    height: 20px;
                    width: 20px;
                    border-radius: 100px;
                    display: block;
                    float: right;
                    margin-right: -14px;
                    z-index: 2000;
                    position: relative;
                }
                .timeline .timeline-item.active .info, .timeline .timeline-item:hover .info {
                    color: #444;
                    -webkit-transition: all 1s ease;
                    -moz-transition: all 1s ease;
                    transition: all 1s ease;
                }
                .timeline .timeline-item.active .year, .timeline .timeline-item:hover .year {
                    color: #9DB668;
                }
                .timeline .timeline-item .marker .dot {
                    background-color: white;
                    -webkit-transition: all 1s ease;
                    -moz-transition: all 1s ease;
                    transition: all 1s ease;
                    display: block;
                    border: 4px solid white;
                    height: 12px;
                    width: 12px;
                    border-radius: 100px;
                    float: right;
                    z-index: 2000;
                    position: relative;
                }
                .timeline .timeline-item.active .marker .dot, .timeline .timeline-item:hover .marker .dot {
                    -webkit-transition: all 1s ease;
                    -moz-transition: all 1s ease;
                    transition: all 1s ease;
                    background-color: #9DB668;
                    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2);
                }
    

    Here is the JQuery:

                $(".timeline-item").hover(function () {
                    $(".timeline-item").removeClass("active");
                    $(this).toggleClass("active");
                    $(this).prev(".timeline-item").toggleClass("close");
                    $(this).next(".timeline-item").toggleClass("close");
                });
    

    Beware with FireFox you need put margin-left at 86px on “.timeline”

     .timeline .timeline-item .info 
         {
             width: 100%;
             width: 78%;
             margin-left: 86px;
             padding: 0 0 40px 35px;
             border-left: 4px solid #aaa;
             font-size: 14px;
             line-height: 20px;
           }