Getting the code structure ready

Just as we saw in the last couple of chapters, we will continue with the object-literal pattern to organize our code. Our $(document).ready() section will have only a call to the init method of the object, which will encapsulate the rest of the functionality. We will first declare all the properties and methods required to make the timeline functional, and later implement each method.

Navigate to the js folder in your filesystem and open the timeline.js file. In this file, write the following code to set up our object and a $(document).ready() handler to call its init method:

$(function(){
  objTimeline.init();
});
var objTimeline = 
{
  itemsToDisplay : 5,
  minYear : 0,
  maxYear : 0,
  currentYear : 0,
  maxScrollYear : 0,
  timelineWindowStartYear : 0,
  windowLeft:0,
  isWindowOpen : false,
  timelineData : 
  [
    {
      year : 2001,
      events : ['Human Genome Sequence Revealed', 'World Economic Slowdown']
    },
    {
      year : 2002,
      events...