JSFiddle - React, Tailwind, and code Playground

by rohanbhangui

HTML

<div class="container">
    <div class="timelineItem" data-date="2013/4/30">
    </div>
    <div class="timelineItem" data-date="2002/2/12">
    </div>
    <div class="timelineItem" data-date="2013/3/24">
    </div>
    <div class="timelineItem" data-date="2011/8/3">
    </div>
    <div class="timelineItem" data-date="2012/10/5">
    </div>
    <div class="timelineItem" data-date="2005/9/28">
    </div>
  </div>

CSS

* {
    margin: 0px;
    padding: 0px;
    font-family: Helvetica, Arial, sans-serif;
}

.container
{
    min-width: 600px;
    max-width: 1200px;
    margin: 50px auto auto auto;
    background: url('http://www.dpereyra.com/scripts/dpSocialTimeline/images/light/timeline.png') repeat-y;
    background-position: 50%;
/*    border: 1px solid #0000ff;*/
    z-index: -10;
}

.timelineItem
{
    background: url('http://www.dpereyra.com/scripts/dpSocialTimeline/images/light/pointer.png') no-repeat;

/*    text-align: center;*/
/*    border: 1px solid #ff0000;*/
    width: 10px;
    height: 10px;
    position: absolute;
    left: 50%;
    margin-left: -5px;
    margin-top: -5px;
}

JavaScript

(function ($) {
  
  function leapYear(year)
  {
    return ((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0);
  }

  function addArr(array)
  {
    var numDays = 0;
    for (var i = array.length - 1; i >= 0; i--) {
      numDays += array[i];
    };

    return numDays;
  }

  $.fn.timeline = function( options ) {

    var container = this;

    // This is the easiest way to have default options.
    var settings = $.extend({
      timelineItemClass: ".item",
      dayPixelAmount: 1
    }, options );

    //for the timeline line
    var containerHeight;

    //for getting the total number of days from data-date
    var totalDays;

    $(settings.timelineItemClass).each(function(index) {
      var currYear = parseInt($(this).attr("data-date").split("/")[0]);
      var currMonth = parseInt($(this).attr("data-date").split("/")[1]);
      var currDay = parseInt($(this).attr("data-date").split("/")[2]);

      var Date1 = new Date (currYear, currMonth, currDay);
      var Date2 = new Date (2014, 1, 1);
      var deltaDays = Math.floor((Date2.getTime() - Date1.getTime())/(1000*60*60*24));

      console.log(deltaDays);

      var verticalOffset = deltaDays*settings.dayPixelAmount;
      
      $(this).css("margin-top", verticalOffset);

      //set the intital value of container height 
      if(index == 0)
      {
        containerHeight = verticalOffset;
      }
      else if (index > 0)
      {
        if(verticalOffset > containerHeight)
        {
          containerHeight = verticalOffset;
        }
      }
    });

    $(".container").css("height", containerHeight);
  };

}( jQuery ));



$(document).ready(function () {

  $(".container").timeline({
  	timelineItemClass: ".timelineItem",
  	dayPixelAmount: 0.5
  });

});