Book Image

Mastering jQuery UI

By : Vijay Joshi
Book Image

Mastering jQuery UI

By: Vijay Joshi

Overview of this book

Table of Contents (19 chapters)
Mastering jQuery UI
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Creating the timeline markup from data


To create the required markup, we will iterate on the array defined for the timelineData property and fill the div with the id timeline. We will also resize the container div based on the value of the itemsToDisplay property. Other properties such as minYear, maxYear, currentYear, timelineWindowStartYear, and maxScrollYear will also be set.

In the timeline.js file, locate the createMarkup method and write this code to create the timeline:

$('.container').css({width: (objTimeline.itemsToDisplay*100)+'px'});
$('#rightOverlay').css({ width: ((objTimeline.itemsToDisplay * 100) - 100) + 'px' });
this.minYear = this.timelineData[0].year;
this.maxYear = this.timelineData[0].year;
var strYearDivs = '';
for(var i=0; i< this.timelineData.length; i++)
{

  strYearDivs+= '<div class="year">';
  strYearDivs+= '<strong>'+ this.timelineData[i].year + '</strong>';
  strYearDivs+= '<div class="numEvents">' + (this.timelineData[i].events.length...