Once the presentation is completely loaded we can use the data-year
attribute of the timeline steps to generate the navigation bar with available years.
$(document).ready(function(){ var timeline_years=[]; $(".timeline").each(function(){ var year = $(this).attr("data-year"); if(($.inArray(year, timeline_years)) == -1){ timeline_years.push(year); $("#timeline_tracker").append("<span id='nav-"+year+"'data-year='"+year+"'>"+year+"</span>"); } }); });
Once the document is ready, we get the distinct years by traversing through the data-year
attribute of timeline steps and push it to an array. We use an inArray
function to identify the distinct years. Then, we add each year as control buttons to the timeline_tracker
container using jQuery's append
function.
Initially, the timeline_tracker
container is defined in the page with the display:none
attribute. Let's now see how we can...