From d859152cd42d7553cda877cc4dbbb73f2237a404 Mon Sep 17 00:00:00 2001
From: yCodeTech <31927084+yCodeTech@users.noreply.github.com>
Date: Thu, 5 Sep 2019 23:54:05 +0100
Subject: [PATCH 01/27] Fixed a bug and added a month name function.

- Fixed a bug that inconsistently and inaccurately calculates the width of the timeline on init, so the scrolling of the timeline was off slightly. (This was due to the function being called slightly before all elements had to chance to be created). Fixed with a 300s delay.
- Added a proper getMonthName function  to make it easier.
---
 JavaScript/horizontal_timeline.2.0.js | 155 ++++++++++++++------------
 1 file changed, 83 insertions(+), 72 deletions(-)

diff --git a/JavaScript/horizontal_timeline.2.0.js b/JavaScript/horizontal_timeline.2.0.js
index 707e49d..8714e5c 100644
--- a/JavaScript/horizontal_timeline.2.0.js
+++ b/JavaScript/horizontal_timeline.2.0.js
@@ -93,65 +93,69 @@ Docs at http://horizontal-timeline.ycodetech.co.uk
 		this._addFile(url, 'css');
 		
 		this._create();
-		
-		timelineComponents = {};
-		this._timelineComponents(timelineComponents);
-		
-		this.init.addIdsAndClasses = addIdsAndClasses;
-		this.init.addIdsAndClasses();
-		
-		function addIdsAndClasses() {
-			//** Adding IDs and Classes **//
-			if (timelineComponents['eventsContentList'].length == 1) {
-				timelineComponents['eventsContentList'].first().attr('id', 'first');
-				timelineComponents['timelineEvents'].first().addClass("first");
+	    
+		// Wait about 300s to make sure the all elements are created properly.
+		// Otherwise the width of the timeline would report as bigger than it actually is.
+		window.setTimeout($.proxy(function(){
+			timelineComponents = {};
+			this._timelineComponents(timelineComponents);
+
+			this.init.addIdsAndClasses = addIdsAndClasses;
+			this.init.addIdsAndClasses();
+
+			function addIdsAndClasses() {
+				//** Adding IDs and Classes **//
+				if (timelineComponents['eventsContentList'].length == 1) {
+					timelineComponents['eventsContentList'].first().attr('id', 'first');
+					timelineComponents['timelineEvents'].first().addClass("first");
+				}
+				else {
+					// Adds id to the first and last li of the event-content list respectively.
+					timelineComponents['eventsContentList']
+						.first().attr('id', 'first').end()
+						.last().attr('id', 'last');
+
+					// Adds class to the first and last timeline event dates respectively.
+					timelineComponents['timelineEvents']
+						.first().addClass("first").end()
+						.last().addClass("last");
+				}
+			}
+			//** Select the correct event **//
+
+			// If any events-content has .selected class...
+			if (timelineComponents['eventsContentList'].hasClass('selected')) {
+				    // Get date from data-date attribute
+				var date = timelineComponents['eventsContentSelected'].data('date'),
+				    // Find the event date matching the data-date
+				    selectedDate = timelineComponents['eventsWrapper'].find('a[data-date="'+date+'"]');
+
+				// Add .selected class to the matched element
+				selectedDate.addClass('selected');
+				// Update all previous dates for styling.
+				this._updateOlderEvents(selectedDate);
 			}
+			// If no class found at all...
 			else {
-				// Adds id to the first and last li of the event-content list respectively.
-				timelineComponents['eventsContentList']
-					.first().attr('id', 'first').end()
-					.last().attr('id', 'last');
-		
-				// Adds class to the first and last timeline event dates respectively.
-				timelineComponents['timelineEvents']
-					.first().addClass("first").end()
-					.last().addClass("last");
+				// Add .selected class to the first events-content and first event date respectively.
+				timelineComponents['eventsContent']
+					.find('li#first').addClass('selected').end()
+					.siblings('.timeline').find('.events').find('a.first').addClass('selected');			
 			}
-		}
-		//** Select the correct event **//
-			
-		// If any events-content has .selected class...
-		if (timelineComponents['eventsContentList'].hasClass('selected')) {
-			    // Get date from data-date attribute
-			var date = timelineComponents['eventsContentSelected'].data('date'),
-			    // Find the event date matching the data-date
-			    selectedDate = timelineComponents['eventsWrapper'].find('a[data-date="'+date+'"]');
-				
-			// Add .selected class to the matched element
-			selectedDate.addClass('selected');
-			// Update all previous dates for styling.
-			this._updateOlderEvents(selectedDate);
-		}
-		// If no class found at all...
-		else {
-			// Add .selected class to the first events-content and first event date respectively.
-			timelineComponents['eventsContent']
-				.find('li#first').addClass('selected').end()
-				.siblings('.timeline').find('.events').find('a.first').addClass('selected');			
-		}
-		
-		
-		// Assign a left postion to the single events along the timeline
-		this._setDatePosition(timelineComponents);
-		// Assign a width to the timeline
-		var timelineTotalWidth = this._setTimelineWidth(timelineComponents);
-		// Set the filling line to the selected event
-		this._updateFilling(timelineComponents['eventsWrapper']
-			.find('a.selected'), timelineComponents['fillingLine'], timelineTotalWidth);
-		// The timeline has been initialised - show it
-		this.$element.addClass('loaded');
-		
-		this._setup(self, timelineComponents, timelineTotalWidth);
+
+
+			// Assign a left postion to the single events along the timeline
+			this._setDatePosition(timelineComponents);
+			// Assign a width to the timeline
+			var timelineTotalWidth = this._setTimelineWidth(timelineComponents);
+			// Set the filling line to the selected event
+			this._updateFilling(timelineComponents['eventsWrapper']
+				.find('a.selected'), timelineComponents['fillingLine'], timelineTotalWidth);
+			// The timeline has been initialised - show it
+			this.$element.addClass('loaded');
+
+			this._setup(self, timelineComponents, timelineTotalWidth);
+		}, this), 300);	
     };	
 	/* Dynamically creates the timeline according to the amount of events. */
 	Timeline.prototype._create = function () {		
@@ -282,16 +286,13 @@ Docs at http://horizontal-timeline.ycodetech.co.uk
 			    yearDisplay = display == "year",
 			    // Find .events for the date display
 			    $eventDateDisplay = self.$element.find('.events'),
-			    // Create an array of the months, with the index 0 = null, 
-			    // so that we can get the month by its corresponding index number.
-			    months = [null, 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
-			    monthName = months,
 			    dateLink = '<a href="" data-date="'+ dataDate +'">',
 			    // For use with the addEvent plublic method
 			    // Finds the event with the specific date.
 			    $arrangementEvent = $eventDateDisplay.find('a[data-date="'+ arrangementDate +'"]');
 					
 			// Function to add the number suffix st, nd, rd, th (eg: 1st, 2nd, 3rd, 4th)
+			// Part of answer on StackOverflow: https://stackoverflow.com/a/15397495/2358222
 			function numSuffix(num) {
 				if (num > 3 && num < 21) return 'th'; 
 				switch (num % 10) {
@@ -301,6 +302,16 @@ Docs at http://horizontal-timeline.ycodetech.co.uk
 					default: return "th";
 				}
 			}
+			// Function to get the month name according to a number supplied.
+			// Answer on StackOverflow: https://stackoverflow.com/a/10996297/2358222
+			function getMonthName(num) {
+				// Create an array of the months, with the index 0 = null, 
+			    // so that we can get the month by its corresponding index number.
+				var monthNames = [null, "January", "February", "March", "April", "May", "June", 
+								   "July", "August", "September", "October", "November", "December" ];
+				return monthNames[num];
+			}
+			
 			var dateExists = $eventDateDisplay.children('a').map(function() {
 				return $(this).data('date');
 			    }).get();
@@ -356,16 +367,16 @@ Docs at http://horizontal-timeline.ycodetech.co.uk
 						else $arrangementEvent.before(dateLink + time +'</a>');
 					}
 					else if(dayMonthDisplay) { 
-						if (insertMethod == 'append') $eventDateDisplay.append(dateLink + dayPart + numSuffix(dayPart) + '<br>' + monthName[monthPart]+'</a>');
+						if (insertMethod == 'append') $eventDateDisplay.append(dateLink + dayPart + numSuffix(dayPart) + '<br>' + getMonthName(monthPart) +'</a>');
 						// For use with the addEvent method... creates new timeline events and places them where specified.
-						else if (insertMethod == 'after') $arrangementEvent.after(dateLink + dayPart + numSuffix(dayPart) + '<br>' + monthName[monthPart]+'</a>');
-						else $arrangementEvent.before(dateLink + dayPart + numSuffix(dayPart) + '<br>' + monthName[monthPart]+'</a>');
+						else if (insertMethod == 'after') $arrangementEvent.after(dateLink + dayPart + numSuffix(dayPart) + '<br>' + getMonthName(monthPart) +'</a>');
+						else $arrangementEvent.before(dateLink + dayPart + numSuffix(dayPart) + '<br>' + getMonthName(monthPart) +'</a>');
 					}
 					else if(monthYearDisplay) {
-						if (insertMethod == 'append') $eventDateDisplay.append(dateLink + monthName[monthPart] + '<br>' + yearPart +'</a>');
+						if (insertMethod == 'append') $eventDateDisplay.append(dateLink + getMonthName(monthPart) + '<br>' + yearPart +'</a>');
 						// For use with the addEvent method... creates new timeline events and places them where specified.
-						else if (insertMethod == 'after') $arrangementEvent.after(dateLink + monthName[monthPart] + '<br>' + yearPart +'</a>');
-						else $arrangementEvent.before(dateLink + monthName[monthPart] + '<br>' + yearPart +'</a>');
+						else if (insertMethod == 'after') $arrangementEvent.after(dateLink + getMonthName(monthPart) + '<br>' + yearPart +'</a>');
+						else $arrangementEvent.before(dateLink + getMonthName(monthPart) + '<br>' + yearPart +'</a>');
 					}
 					else if(yearDisplay) {
 						if (insertMethod == 'append') $eventDateDisplay.append(dateLink + yearPart +'</a>');
@@ -432,16 +443,16 @@ Docs at http://horizontal-timeline.ycodetech.co.uk
 						else $arrangementEvent.before(dateLink + date +'</a>');
 					}
 					else if(dayMonthDisplay) {
-						if (insertMethod == 'append') $eventDateDisplay.append(dateLink + dayPart + numSuffix(dayPart) + '<br>' + monthName[monthPart]+'</a>');
+						if (insertMethod == 'append') $eventDateDisplay.append(dateLink + dayPart + numSuffix(dayPart) + '<br>' + getMonthName(monthPart) +'</a>');
 						// For use with the addEvent method... creates new timeline events and places them where specified.
-						else if (insertMethod == 'after') $arrangementEvent.after(dateLink + dayPart + numSuffix(dayPart) + '<br>' + monthName[monthPart]+'</a>');
-						else $arrangementEvent.before(dateLink + dayPart + numSuffix(dayPart) + '<br>' + monthName[monthPart]+'</a>');
+						else if (insertMethod == 'after') $arrangementEvent.after(dateLink + dayPart + numSuffix(dayPart) + '<br>' + getMonthName(monthPart) +'</a>');
+						else $arrangementEvent.before(dateLink + dayPart + numSuffix(dayPart) + '<br>' + getMonthName(monthPart) +'</a>');
 					}	
 					else if(monthYearDisplay) {
-						if (insertMethod == 'append') $eventDateDisplay.append(dateLink + monthName[monthPart] + '<br>' + yearPart +'</a>');
+						if (insertMethod == 'append') $eventDateDisplay.append(dateLink + getMonthName(monthPart)  + '<br>' + yearPart +'</a>');
 						// For use with the addEvent method... creates new timeline events and places them where specified.
-						else if (insertMethod == 'after') $arrangementEvent.after(dateLink + monthName[monthPart] + '<br>' + yearPart +'</a>');
-						else $arrangementEvent.before(dateLink + monthName[monthPart] + '<br>' + yearPart +'</a>');
+						else if (insertMethod == 'after') $arrangementEvent.after(dateLink + getMonthName(monthPart) + '<br>' + yearPart +'</a>');
+						else $arrangementEvent.before(dateLink + getMonthName(monthPart) + '<br>' + yearPart +'</a>');
 					}
 					else if(yearDisplay) {
 						if (insertMethod == 'append') $eventDateDisplay.append(dateLink + yearPart +'</a>');

From dacc9a3589d212d971ef7b4a8315985afca94539 Mon Sep 17 00:00:00 2001
From: yCodeTech <31927084+yCodeTech@users.noreply.github.com>
Date: Fri, 6 Sep 2019 01:19:27 +0100
Subject: [PATCH 02/27] Update horizontal_timeline.2.0.js

---
 JavaScript/horizontal_timeline.2.0.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/JavaScript/horizontal_timeline.2.0.js b/JavaScript/horizontal_timeline.2.0.js
index 8714e5c..fd010b2 100644
--- a/JavaScript/horizontal_timeline.2.0.js
+++ b/JavaScript/horizontal_timeline.2.0.js
@@ -1621,7 +1621,13 @@ Docs at http://horizontal-timeline.ycodetech.co.uk
                     // pass options to our plugin constructor,
                     // and store the plugin instance
                     // in the elements jQuery data object.
-                    $.data(this, 'plugin_' + pluginName, {'originalEventsContent': $(this).find('.events-content').clone()[0], 'windowWidth': windowWidth, 'existingDates': dateExists, 'Timeline': new Timeline( this, options )});
+                    $.data(this, 'plugin_' + pluginName, 
+			   {'originalEventsContent': $(this).find('.events-content').clone()[0], 
+			    'windowWidth': windowWidth, 
+			    'existingDates': dateExists, 
+			    'Timeline': new Timeline(this, options)
+		    	   }
+		    );
                 }
             });
 

From a8dd0c3d580c39eba5790a965273d12fcc3532e8 Mon Sep 17 00:00:00 2001
From: yCodeTech <31927084+yCodeTech@users.noreply.github.com>
Date: Thu, 12 Sep 2019 23:05:05 +0100
Subject: [PATCH 03/27] Added a "To Do".

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index 9a46158..c8ef921 100644
--- a/README.md
+++ b/README.md
@@ -119,3 +119,4 @@ $('#example').horizontalTimeline({
 - Implement a namespaced object data attribute to accomodate the data-date and possibly the custom animations.
 - Add method to dynamically change existing dates and reposition them to reflect their new date order.
 - Add support for Right-to-Left.
+- Rename the disableButton to reflect the docs name of Inactive Button States.

From 7d1b02dd3041b3722df14124c12a2aec5f9f6e97 Mon Sep 17 00:00:00 2001
From: yCodeTech <31927084+yCodeTech@users.noreply.github.com>
Date: Fri, 13 Sep 2019 01:08:02 +0100
Subject: [PATCH 04/27] Deleted some unnecessary commented out code in refresh
 method.

---
 JavaScript/horizontal_timeline.2.0.js | 16 ++++------------
 1 file changed, 4 insertions(+), 12 deletions(-)

diff --git a/JavaScript/horizontal_timeline.2.0.js b/JavaScript/horizontal_timeline.2.0.js
index fd010b2..9a80959 100644
--- a/JavaScript/horizontal_timeline.2.0.js
+++ b/JavaScript/horizontal_timeline.2.0.js
@@ -1077,25 +1077,17 @@ Docs at http://horizontal-timeline.ycodetech.co.uk
 	 Timeline.prototype.refresh = function () {
 		this._timelineComponents(timelineComponents);
 		
+		// Removes first and last id attributes of the event-content list. 
 		timelineComponents['eventsContent']
-			// Removes first and last id attributes of the event-content list.
 			.find('#first').removeAttr('id').end()
 			.find('#last').removeAttr('id').end();
-			// Adds id to the first li of the event-content list.
-			//.find('li').first().attr('id', 'first').end()
-			// Adds id to the last li of the event-content list.
-			//.last().attr('id', 'last');
-			
+
+		// Removes first and last classes from the timeline event date	
 		timelineComponents['eventsWrapper']
-			// Removes first and last classes from the timeline event date
 			.find('.first').removeClass('first').end()
 			.find('.last').removeClass('last').end();
-			// Adds class to the first timeline event date.
-			//.find('a').first().addClass("first").end()
-			// Adds class to the last timeline event date.
-			//.last().addClass("last");
-			
 			
+		// Adds classes and IDs.	
 		this.init.addIdsAndClasses();	
 			
 		this._setDatePosition(timelineComponents);

From 0d1ba26553e766a876e7db6a7218c94685546887 Mon Sep 17 00:00:00 2001
From: yCodeTech <31927084+yCodeTech@users.noreply.github.com>
Date: Fri, 13 Sep 2019 01:14:00 +0100
Subject: [PATCH 05/27] Renamed _buttonDisable to __buttonStates

---
 JavaScript/horizontal_timeline.2.0.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/JavaScript/horizontal_timeline.2.0.js b/JavaScript/horizontal_timeline.2.0.js
index 9a80959..d3da2ac 100644
--- a/JavaScript/horizontal_timeline.2.0.js
+++ b/JavaScript/horizontal_timeline.2.0.js
@@ -1271,7 +1271,7 @@ Docs at http://horizontal-timeline.ycodetech.co.uk
 		this._setTransformValue(timelineComponents['eventsWrapper'], 'translateX', value+'px');
 
 		// Disable the buttons if necessary
-		this._buttonDisable(timelineComponents, value, totalTranslateValue);	
+		this._buttonStates(timelineComponents, value, totalTranslateValue);	
 	}
 	
 	Timeline.prototype._updateFilling = function (selectedEvent, filling, totalTranslateValue) {
@@ -1434,9 +1434,11 @@ Docs at http://horizontal-timeline.ycodetech.co.uk
 		// https://stackoverflow.com/a/14913306/2358222
 		return window.getComputedStyle(this.element,':before').content.replace(/'/g, "").replace(/"/g, "");
 	}
-		
-	// Function to add or remove disabled class to next button depending on whether the last item is selected or not	
-	Timeline.prototype._buttonDisable = function (timelineComponents, translateValue, totalTranslateValue){
+	
+	//** Button States **//
+	
+	// Function to add or remove inactive class to next button depending on whether the last item is selected or not	
+	Timeline.prototype._buttonStates = function (timelineComponents, translateValue, totalTranslateValue){
 		var nextButton = timelineComponents['timelineNavigation'].find('.next'),
 			prevButton = timelineComponents['timelineNavigation'].find('.prev'),
 			
@@ -1487,7 +1489,7 @@ Docs at http://horizontal-timeline.ycodetech.co.uk
 		if (translateValue == totalTranslateValue) rightButton.addClass('inactive');
 		// If not, then enable the scroll right button
 		else rightButton.removeClass('inactive');
-	} // End buttonDisable() function
+	} // End buttonStates() function
 	
 	// Function to add required js and css files dynamically
 	// (CDN URL of the plugin, file type JS or CSS, callback function)				 

From fab2303b4a1a696185a1625c51ae50e03ba66c06 Mon Sep 17 00:00:00 2001
From: yCodeTech <31927084+yCodeTech@users.noreply.github.com>
Date: Fri, 13 Sep 2019 14:19:27 +0100
Subject: [PATCH 06/27] Fixed the if useFontAwesomeIcons option

Upon adding the useFontAwesomeIcons option, I forgot to add an if statement around the css file. Line 89.
---
 JavaScript/horizontal_timeline.2.0.js | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/JavaScript/horizontal_timeline.2.0.js b/JavaScript/horizontal_timeline.2.0.js
index d3da2ac..6c8cd29 100644
--- a/JavaScript/horizontal_timeline.2.0.js
+++ b/JavaScript/horizontal_timeline.2.0.js
@@ -86,12 +86,13 @@ Docs at http://horizontal-timeline.ycodetech.co.uk
 		    contentList = this.$element.find('li');
 		if(contentList.length == 0) this.$element.css('opacity', 1).html('<h3>There are no events at this point in time.<br><br>Please add some content.</h3>');
 		
-		var url = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css";
-			
-		// Function to load the file
-		// (url, type)	
-		this._addFile(url, 'css');
-		
+	    	if (useFontAwesomeIcons == true) {
+			var url = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css";
+
+			// Function to load the file
+			// (url, type)	
+			this._addFile(url, 'css');
+    		}	
 		this._create();
 	    
 		// Wait about 300s to make sure the all elements are created properly.

From 4bce674b77ee29b13b382439a0fa39d668ef3155 Mon Sep 17 00:00:00 2001
From: yCodeTech <31927084+yCodeTech@users.noreply.github.com>
Date: Sat, 14 Sep 2019 01:00:29 +0100
Subject: [PATCH 07/27] Update horizontal_timeline.2.0.js

---
 JavaScript/horizontal_timeline.2.0.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/JavaScript/horizontal_timeline.2.0.js b/JavaScript/horizontal_timeline.2.0.js
index 6c8cd29..06deac6 100644
--- a/JavaScript/horizontal_timeline.2.0.js
+++ b/JavaScript/horizontal_timeline.2.0.js
@@ -1438,7 +1438,7 @@ Docs at http://horizontal-timeline.ycodetech.co.uk
 	
 	//** Button States **//
 	
-	// Function to add or remove inactive class to next button depending on whether the last item is selected or not	
+	// Function to add or remove inactive class.	
 	Timeline.prototype._buttonStates = function (timelineComponents, translateValue, totalTranslateValue){
 		var nextButton = timelineComponents['timelineNavigation'].find('.next'),
 			prevButton = timelineComponents['timelineNavigation'].find('.prev'),

From f63c197001c0445fb23fa208afd18cbffa4b2c47 Mon Sep 17 00:00:00 2001
From: yCodeTech <31927084+yCodeTech@users.noreply.github.com>
Date: Sat, 14 Sep 2019 01:08:29 +0100
Subject: [PATCH 08/27] Updated To Do

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index c8ef921..e940e55 100644
--- a/README.md
+++ b/README.md
@@ -119,4 +119,4 @@ $('#example').horizontalTimeline({
 - Implement a namespaced object data attribute to accomodate the data-date and possibly the custom animations.
 - Add method to dynamically change existing dates and reposition them to reflect their new date order.
 - Add support for Right-to-Left.
-- Rename the disableButton to reflect the docs name of Inactive Button States.
+~~- Rename the disableButton to reflect the docs name of Inactive Button States.~~

From 3476bc290968707e465a40e930e66678067f62d1 Mon Sep 17 00:00:00 2001
From: yCodeTech <31927084+yCodeTech@users.noreply.github.com>
Date: Sat, 14 Sep 2019 01:09:09 +0100
Subject: [PATCH 09/27] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index e940e55..fcbb7a3 100644
--- a/README.md
+++ b/README.md
@@ -119,4 +119,4 @@ $('#example').horizontalTimeline({
 - Implement a namespaced object data attribute to accomodate the data-date and possibly the custom animations.
 - Add method to dynamically change existing dates and reposition them to reflect their new date order.
 - Add support for Right-to-Left.
-~~- Rename the disableButton to reflect the docs name of Inactive Button States.~~
+-~~Rename the disableButton to reflect the docs name of Inactive Button States.~~

From cc80843db8acce0512fa796a7c244aa4c24af43a Mon Sep 17 00:00:00 2001
From: yCodeTech <31927084+yCodeTech@users.noreply.github.com>
Date: Sat, 14 Sep 2019 01:09:31 +0100
Subject: [PATCH 10/27] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index fcbb7a3..724b4db 100644
--- a/README.md
+++ b/README.md
@@ -119,4 +119,4 @@ $('#example').horizontalTimeline({
 - Implement a namespaced object data attribute to accomodate the data-date and possibly the custom animations.
 - Add method to dynamically change existing dates and reposition them to reflect their new date order.
 - Add support for Right-to-Left.
--~~Rename the disableButton to reflect the docs name of Inactive Button States.~~
+- ~~Rename the disableButton to reflect the docs name of Inactive Button States.~~

From 2db2746eaff2e461a5055a013783a0773f7a2b39 Mon Sep 17 00:00:00 2001
From: yCodeTech <31927084+yCodeTech@users.noreply.github.com>
Date: Sat, 14 Sep 2019 01:17:26 +0100
Subject: [PATCH 11/27] Fixed the useFontAwesomeIcons option again.

---
 JavaScript/horizontal_timeline.2.0.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/JavaScript/horizontal_timeline.2.0.js b/JavaScript/horizontal_timeline.2.0.js
index 06deac6..a01574c 100644
--- a/JavaScript/horizontal_timeline.2.0.js
+++ b/JavaScript/horizontal_timeline.2.0.js
@@ -86,7 +86,7 @@ Docs at http://horizontal-timeline.ycodetech.co.uk
 		    contentList = this.$element.find('li');
 		if(contentList.length == 0) this.$element.css('opacity', 1).html('<h3>There are no events at this point in time.<br><br>Please add some content.</h3>');
 		
-	    	if (useFontAwesomeIcons == true) {
+	    	if (this.settings.useFontAwesomeIcons == true) {
 			var url = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css";
 
 			// Function to load the file

From 8e1f9604b4cd9cd3823201e7282b3db9bc5f32e2 Mon Sep 17 00:00:00 2001
From: yCodeTech <31927084+yCodeTech@users.noreply.github.com>
Date: Sat, 14 Sep 2019 01:42:17 +0100
Subject: [PATCH 12/27] Fixed a bug

Fixed a bug that when no buttons are rendered/added, then the timeline appears not to have a width for some reason, (added min-width) line 57.
---
 css/horizontal_timeline.2.0.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/css/horizontal_timeline.2.0.css b/css/horizontal_timeline.2.0.css
index 412d782..919e02e 100644
--- a/css/horizontal_timeline.2.0.css
+++ b/css/horizontal_timeline.2.0.css
@@ -54,6 +54,7 @@ html, body {
 	/* Fixed up a bug where if the date display was split into two lines 
 	half of the top was cut off (Changed the height to accomodate) */
 	height: 80px;
+	min-width: 100%;
 	overflow: hidden;
 	-ms-flex: 1 1 auto!important;
     	flex: 1 1 auto!important;

From a870b41695d616faa61d0ed3c2bee6b842915cc8 Mon Sep 17 00:00:00 2001
From: yCodeTech <31927084+yCodeTech@users.noreply.github.com>
Date: Sat, 14 Sep 2019 01:58:34 +0100
Subject: [PATCH 13/27] Fixed a bug

Fixed a bug where the timeline would apparently have no width when the buttons are disabled. Line 221.
---
 JavaScript/horizontal_timeline.2.0.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/JavaScript/horizontal_timeline.2.0.js b/JavaScript/horizontal_timeline.2.0.js
index a01574c..1594e59 100644
--- a/JavaScript/horizontal_timeline.2.0.js
+++ b/JavaScript/horizontal_timeline.2.0.js
@@ -218,8 +218,13 @@ Docs at http://horizontal-timeline.ycodetech.co.uk
 						 .find("#rightNav").append($nextButton).append($scrollRightButton);
 		}
 		// Otherwise, both button sets are disabled and we just need to add the timelineEventsWrapper.
-		else $timeline.append($timelineEventsWrapper);
-		
+		else {
+			$timeline.append($timelineEventsWrapper);
+			// Add a 100% min-width to the events-wrapper if the buttons are disabled.
+			// Stops the timeline from disappearing due to apparent no width.
+			$timeline.find('.events-wrapper').css("min-width", "100%");
+		}
+			
 		// Autoplay buttons	
 		// If autoplay is true, create the pause button
 		if (this.settings.autoplay == true)	

From 56370270622380a20196ebb6ff86ed38b03d0811 Mon Sep 17 00:00:00 2001
From: yCodeTech <31927084+yCodeTech@users.noreply.github.com>
Date: Sat, 14 Sep 2019 01:59:56 +0100
Subject: [PATCH 14/27] Removed the min-width

Removed previous bug fix min-width due to it actually not working. Fixed with JS instead.
---
 css/horizontal_timeline.2.0.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/css/horizontal_timeline.2.0.css b/css/horizontal_timeline.2.0.css
index 919e02e..412d782 100644
--- a/css/horizontal_timeline.2.0.css
+++ b/css/horizontal_timeline.2.0.css
@@ -54,7 +54,6 @@ html, body {
 	/* Fixed up a bug where if the date display was split into two lines 
 	half of the top was cut off (Changed the height to accomodate) */
 	height: 80px;
-	min-width: 100%;
 	overflow: hidden;
 	-ms-flex: 1 1 auto!important;
     	flex: 1 1 auto!important;

From 5307934cce1e2085149bf53fa3aea0fd261e01ca Mon Sep 17 00:00:00 2001
From: yCodeTech <31927084+yCodeTech@users.noreply.github.com>
Date: Sat, 14 Sep 2019 14:01:20 +0100
Subject: [PATCH 15/27] Fixed a bug

Fixed a bug that shows the horizontal (x) scrollbar when translating the event content, added a overflow-x: hidden to stop this. Line 18.
---
 css/horizontal_timeline.2.0.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/css/horizontal_timeline.2.0.css b/css/horizontal_timeline.2.0.css
index 412d782..f25b2bb 100644
--- a/css/horizontal_timeline.2.0.css
+++ b/css/horizontal_timeline.2.0.css
@@ -15,6 +15,7 @@ html, body {
 	Also fixes the fixed flexbox elements from moving along with the transforms.*/
 	height: auto;
 	overflow: auto;
+	overflow-x: hidden;
 }
 .horizontal-timeline {
 	opacity: 0;

From af02c8c94b59c64239fbdffb2a7fbf4f946b909a Mon Sep 17 00:00:00 2001
From: yCodeTech <31927084+yCodeTech@users.noreply.github.com>
Date: Sat, 14 Sep 2019 14:15:30 +0100
Subject: [PATCH 16/27] Added CSS

Added some text CSS for the event content. Line 211.
---
 css/horizontal_timeline.2.0.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/css/horizontal_timeline.2.0.css b/css/horizontal_timeline.2.0.css
index f25b2bb..90e613b 100644
--- a/css/horizontal_timeline.2.0.css
+++ b/css/horizontal_timeline.2.0.css
@@ -208,6 +208,9 @@ html, body {
 	border-radius: 20px;
 	opacity: 0;
 	
+	font-size: 16pt;
+	text-align: center;
+	
 	-webkit-touch-callout: none; /* iOS Safari */
 	-webkit-user-select: none; /* Safari */
 	-khtml-user-select: none; /* Konqueror HTML */

From aa0cba4ed6605e773287c656083c01b4cd897862 Mon Sep 17 00:00:00 2001
From: yCodeTech <31927084+yCodeTech@users.noreply.github.com>
Date: Sun, 15 Sep 2019 13:36:33 +0100
Subject: [PATCH 17/27] Added new option: dateOrder

---
 JavaScript/horizontal_timeline.2.0.js | 100 ++++++++++++++++++++------
 1 file changed, 80 insertions(+), 20 deletions(-)

diff --git a/JavaScript/horizontal_timeline.2.0.js b/JavaScript/horizontal_timeline.2.0.js
index 1594e59..3a80782 100644
--- a/JavaScript/horizontal_timeline.2.0.js
+++ b/JavaScript/horizontal_timeline.2.0.js
@@ -38,6 +38,7 @@ Docs at http://horizontal-timeline.ycodetech.co.uk
 		minimalFirstDateInterval: true,
 			
 		dateDisplay: "dateTime", // dateTime, date, time, dayMonth, monthYear, year
+		dateOrder: "normal", // normal, reverse
 			
 		autoplay: false,
 		autoplaySpeed: 8, // Sec
@@ -138,10 +139,28 @@ Docs at http://horizontal-timeline.ycodetech.co.uk
 			}
 			// If no class found at all...
 			else {
-				// Add .selected class to the first events-content and first event date respectively.
-				timelineComponents['eventsContent']
-					.find('li#first').addClass('selected').end()
-					.siblings('.timeline').find('.events').find('a.first').addClass('selected');			
+				// If dateOrder is normal (Ascending)... start from the left.
+				if (this.settings.dateOrder == "normal") {
+					// Add .selected class to the first events-content and first event date respectively.
+					timelineComponents['eventsContent']
+						.find('li#first').addClass('selected').end()
+						.siblings('.timeline').find('.events').find('a.first').addClass('selected');	
+				}
+				// Else dateOrder is reverse (Descending)... start from the right.
+				else if (this.settings.dateOrder == "reverse") {
+					// Add .selected class to the last event.
+					timelineComponents['eventsWrapper'].find('a.last').addClass('selected');
+
+						// Find the selected event
+					var selectedEvent = timelineComponents['eventsWrapper'].find('a.selected'),
+						// Get the selected event's date.
+						selectedDate = selectedEvent.data('date');
+					
+					// Find the selected event's content using the date and add selected class to the content.
+					timelineComponents['eventsContent'].find('li[data-date="'+selectedDate+'"]').addClass('selected');
+					
+					this._updateOlderEvents(selectedEvent);	
+				}
 			}
 
 
@@ -237,39 +256,50 @@ Docs at http://horizontal-timeline.ycodetech.co.uk
 		this._create.date(this, 'append');
 		// (instance, insertMethod (append, before, after [last 2 for addEvent method]), date to insert before/after [from addEvent method])
 		function createDate(self, insertMethod, arrangementDate) {
+			
+			// If dateOrder is normal (starting from the left).
+			if (self.settings.dateOrder == "normal") {
+				// Find the event content.
+				var	$element = 	self.$element.children('.events-content').find('li');
+			}
+			// Else if dateOrder is reverse (starting from the right).  
+			else if (self.settings.dateOrder == "reverse") {
+				var $element = $(self.$element.children('.events-content').find('li').get().reverse());
+			}
+			
 			/* dateTime = the date and time */
 			if(self.settings.dateDisplay == "dateTime") {
-				self.$element.children('.events-content').find('li').each(function() {
+				$element.children('.events-content').find('li').each(function() {
 					self._create.eventDateDisplay(self, $(this), "dateTime", insertMethod, arrangementDate);
 				});
 			}
 			/* date = the date only */
 			else if (self.settings.dateDisplay == "date") {
-				self.$element.children('.events-content').find('li').each(function() {	
+				$element.children('.events-content').find('li').each(function() {	
 					self._create.eventDateDisplay(self, $(this), "date", insertMethod, arrangementDate);
 				});
 			}
 			/* time = the time only */
 			else if (self.settings.dateDisplay == "time") {
-				self.$element.children('.events-content').find('li').each(function() {	
+				$element.children('.events-content').find('li').each(function() {	
 					self._create.eventDateDisplay(self, $(this), "time", insertMethod, arrangementDate);
 				});
 			}
 			/* dayMonth = the day and monthName only */
 			else if (self.settings.dateDisplay == "dayMonth") {
-				self.$element.children('.events-content').find('li').each(function() {
+				$element.children('.events-content').find('li').each(function() {
 					self._create.eventDateDisplay(self, $(this), "dayMonth", insertMethod, arrangementDate);
 				});
 			}
 			/* monthYear = the monthName and year only */
 			else if (self.settings.dateDisplay == "monthYear") {
-				self.$element.children('.events-content').find('li').each(function() {
+				$element.children('.events-content').find('li').each(function() {
 					self._create.eventDateDisplay(self, $(this), "monthYear", insertMethod, arrangementDate);
 				});		
 			}			
 			/* year = the year only */
 			else if (self.settings.dateDisplay == "year") {
-				self.$element.children('.events-content').find('li').each(function() {
+				$element.children('.events-content').find('li').each(function() {
 					self._create.eventDateDisplay(self, $(this), "year", insertMethod, arrangementDate);
 				});
 			}
@@ -668,16 +698,25 @@ Docs at http://horizontal-timeline.ycodetech.co.uk
 								
 						//if percentTime is equal or greater than 100
 						if(percentTime >= 100){
-							// If the current index is equal to the total number of events 
-							if(current == this._setup.autoplay.countEvents()) {
+							// If dateOrder is normal AND the current index is equal to the total number of events 
+							// OR dateOrder is reverse AND current index is equal to 1 ...
+							if((this.settings.dateOrder == "normal" && current == this._setup.autoplay.countEvents()) || (this.settings.dateOrder == "reverse" && current == 1)) {
 								// Go back to the start of the cycle. 
 								this._showNewContent(timelineComponents, autoplayTimelineTotalWidth, 'start');
 								// Recalculate the current index to make sure it's reset back to 1 (the start).
 								current = timelineComponents['eventsWrapper'].find('.selected').index();	
 							}
 							else {
-							  // Go to next event content.
-							  this._showNewContent(timelineComponents, autoplayTimelineTotalWidth, 'next');
+								// If dateOrder is normal.
+								if (this.settings.dateOrder == "normal") {
+									// Go to next event content.
+									this._showNewContent(timelineComponents, autoplayTimelineTotalWidth, 'next');
+								}
+								// Else if dateOrder is reverse.
+								else if (this.settings.dateOrder == "reverse") {
+									// Go to next event content.
+									this._showNewContent(timelineComponents, autoplayTimelineTotalWidth, 'prev');
+								}
 							}
 							// Add 1 to the current index
 							current++;
@@ -1236,16 +1275,37 @@ Docs at http://horizontal-timeline.ycodetech.co.uk
 	Timeline.prototype._showNewContent = function (timelineComponents, timelineTotalWidth, string) {
 		// Show prev/next content
 			// Find the .selected content
-		var visibleContent =  timelineComponents['eventsContent'].find('.selected'),
-			// Find the prev/next content
-			newContent = (string == 'next') ? visibleContent.next() : visibleContent.prev();
-		// If a prev/next content exists...
-		if (newContent.length > 0) {
+		var visibleContent =  timelineComponents['eventsContent'].find('.selected');
+		
+		// If dateOrder is normal...
+		if (this.settings.dateOrder == "normal")
+			// Find the prev/next content for detection later.
+			var newContent = (string == 'next') ? visibleContent.next() : visibleContent.prev();
+		// If dateOrder is reverse
+		else if (this.settings.dateOrder == "reverse") 
+			// Find the prev/next content in reverse fore detection later.
+			var newContent = (string == 'next') ?  visibleContent.prev() : visibleContent.next();
+
+		// If a prev/next content exists
+		// OR dateOrder is reverse AND string is start (for Autoplay)...
+		// This determines whether we can navigate prev or next. 
+		if (newContent.length > 0 || (this.settings.dateOrder == "reverse" && string == 'start')) {
 			// Find the .selected event
 			var selectedDate = timelineComponents['eventsWrapper'].find('.selected'),
 				newEvent;
 			// If start... (For Autoplay), find the first event	 
-			if(string == 'start') newEvent = timelineComponents['eventsWrapper'].find('.first');
+			if(string == 'start') {
+				// If the dateOrder is normal (starting from the left)...
+				if (this.settings.dateOrder == "normal") {
+					// Find the first event.
+					newEvent = timelineComponents['eventsWrapper'].find('.first');
+				}
+				// Else if the dateOrder is reverse (starting from the right)...
+				else if (this.settings.dateOrder == "reverse") {
+					// Find the last event.
+					newEvent = timelineComponents['eventsWrapper'].find('.last');
+				}
+			}
 			// If next, find the next event from the current selected event
 			else if (string == 'next') newEvent = selectedDate.next('a');
 			// If prev, find the prev event from the current selected event

From f42214f294af8ec14c3753124ec391a3759c0838 Mon Sep 17 00:00:00 2001
From: yCodeTech <31927084+yCodeTech@users.noreply.github.com>
Date: Sun, 15 Sep 2019 13:39:48 +0100
Subject: [PATCH 18/27] Added new option, dateOrder

---
 README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/README.md b/README.md
index 724b4db..4043807 100644
--- a/README.md
+++ b/README.md
@@ -24,6 +24,7 @@ Version 2.0 adds functionality that has been previously requested for the origin
    - Added new options for the button icons.
    - Added new options to disable the buttons.
    - Added an option for custom date display text.
+   - Added an option, dateOrder, allowing the use of reversing the date display.
 
 For full documentation please check out the [Horizontal Timeline 2.0 website](http://horizontal-timeline.ycodetech.co.uk/)
 
@@ -87,6 +88,7 @@ $('#example').horizontalTimeline({
    minimalFirstDateInterval: true,
 
    dateDisplay: "dateTime",  // dateTime, date, time, dayMonth, monthYear, year
+   dateOrder: "normal", // normal, reverse
 
    autoplay: false,
    autoplaySpeed: 8,  // Sec

From f74634a2f9ed684b9cf5c295629cf64c9286bce4 Mon Sep 17 00:00:00 2001
From: yCodeTech <31927084+yCodeTech@users.noreply.github.com>
Date: Mon, 16 Sep 2019 22:18:31 +0100
Subject: [PATCH 19/27] Update horizontal_timeline.2.0.css

---
 css/horizontal_timeline.2.0.css | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/css/horizontal_timeline.2.0.css b/css/horizontal_timeline.2.0.css
index 90e613b..49cd1f7 100644
--- a/css/horizontal_timeline.2.0.css
+++ b/css/horizontal_timeline.2.0.css
@@ -44,7 +44,7 @@ html, body {
 /* Timeline */
 .horizontal-timeline .timeline {
 	position: relative;
-	height: 100px;
+	height: auto;
 	margin: 0 auto;
 	display: flex;
 	-ms-flex-wrap: wrap;
@@ -139,11 +139,11 @@ html, body {
 .timeline-navigation {
 	position: relative;
 	top: 3px;
-	-webkit-transform: translateY(-50%);
-	-moz-transform: translateY(-50%);
-	-ms-transform: translateY(-50%);
-	-o-transform: translateY(-50%);
-	transform: translateY(-50%);
+	-webkit-transform: translateY(50%);
+	-moz-transform: translateY(50%);
+	-ms-transform: translateY(50%);
+	-o-transform: translateY(50%);
+	transform: translateY(50%);
 	z-index: 2;
 }
 .timeline-navigation#leftNav {
@@ -171,7 +171,7 @@ html, body {
 /* Autoplay Pause/Play button */
 .timeline-navigation#pausePlay {
 	width: 100%;
-    	top: 10px;
+    	top: -10px;
     	text-align: center;
 }
 /* Event content */

From b700e262e42ee9af3381e4b23f0968c2ae5dd7f5 Mon Sep 17 00:00:00 2001
From: yCodeTech <31927084+yCodeTech@users.noreply.github.com>
Date: Mon, 16 Sep 2019 23:33:29 +0100
Subject: [PATCH 20/27] Update horizontal_timeline.2.0.js

---
 JavaScript/horizontal_timeline.2.0.js | 174 +++++++++++++-------------
 1 file changed, 89 insertions(+), 85 deletions(-)

diff --git a/JavaScript/horizontal_timeline.2.0.js b/JavaScript/horizontal_timeline.2.0.js
index 3a80782..e6dd3f4 100644
--- a/JavaScript/horizontal_timeline.2.0.js
+++ b/JavaScript/horizontal_timeline.2.0.js
@@ -1,7 +1,7 @@
 /* -------------------------------- 
  
 Horizontal Timeline 2.0
-    by Studocwho @ yCodeTech
+by Studocwho @ yCodeTech
 	
 Original Horizontal Timeline by CodyHouse
 
@@ -51,12 +51,12 @@ Docs at http://horizontal-timeline.ycodetech.co.uk
 		useFontAwesomeIcons: true,
 		useNavBtns: true,
 		useScrollBtns: true,
-			
-		iconBaseClass: "fas fa-3x",	
+
+		iconBaseClass: "fas fa-3x",
 		scrollLeft_iconClass: "fa-chevron-circle-left",
-		scrollRight_iconClass: "fa-chevron-circle-right",	
-		prev_iconClass: "fa-arrow-circle-left",
-		next_iconClass: "fa-arrow-circle-right",	
+		scrollRight_iconClass: "fa-chevron-circle-right",
+		prev_iconClass: "fa-arrow-circle-left", 
+		next_iconClass: "fa-arrow-circle-right", 
 		pause_iconClass: "fa-pause-circle",
 		play_iconClass: "fa-play-circle"
         };
@@ -74,9 +74,8 @@ Docs at http://horizontal-timeline.ycodetech.co.uk
 
         this._defaults = defaults;
         this._name = pluginName;
+	this.$element = $(element);
 		
-		this.$element = $(element),
-
         this.init();
     }
     Timeline.prototype.init = function () {
@@ -86,26 +85,25 @@ Docs at http://horizontal-timeline.ycodetech.co.uk
 		var self = this, 
 		    contentList = this.$element.find('li');
 		if(contentList.length == 0) this.$element.css('opacity', 1).html('<h3>There are no events at this point in time.<br><br>Please add some content.</h3>');
-		
-	    	if (this.settings.useFontAwesomeIcons == true) {
+		if (this.settings.useFontAwesomeIcons == true) {
 			var url = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css";
-
+				
 			// Function to load the file
 			// (url, type)	
 			this._addFile(url, 'css');
-    		}	
+		}
 		this._create();
-	    
+		
 		// Wait about 300s to make sure the all elements are created properly.
 		// Otherwise the width of the timeline would report as bigger than it actually is.
 		window.setTimeout($.proxy(function(){
 			timelineComponents = {};
 			this._timelineComponents(timelineComponents);
-
+			
 			this.init.addIdsAndClasses = addIdsAndClasses;
-			this.init.addIdsAndClasses();
-
-			function addIdsAndClasses() {
+			this.init.addIdsAndClasses(this);
+			
+			function addIdsAndClasses(self) {
 				//** Adding IDs and Classes **//
 				if (timelineComponents['eventsContentList'].length == 1) {
 					timelineComponents['eventsContentList'].first().attr('id', 'first');
@@ -116,7 +114,7 @@ Docs at http://horizontal-timeline.ycodetech.co.uk
 					timelineComponents['eventsContentList']
 						.first().attr('id', 'first').end()
 						.last().attr('id', 'last');
-
+			
 					// Adds class to the first and last timeline event dates respectively.
 					timelineComponents['timelineEvents']
 						.first().addClass("first").end()
@@ -124,27 +122,33 @@ Docs at http://horizontal-timeline.ycodetech.co.uk
 				}
 			}
 			//** Select the correct event **//
-
+				
 			// If any events-content has .selected class...
 			if (timelineComponents['eventsContentList'].hasClass('selected')) {
-				    // Get date from data-date attribute
+					// Get date from data-date attribute
 				var date = timelineComponents['eventsContentSelected'].data('date'),
-				    // Find the event date matching the data-date
-				    selectedDate = timelineComponents['eventsWrapper'].find('a[data-date="'+date+'"]');
-
+					// Find the event date matching the data-date
+					selectedDate = timelineComponents['eventsWrapper'].find('a[data-date="'+date+'"]');
+					
 				// Add .selected class to the matched element
 				selectedDate.addClass('selected');
 				// Update all previous dates for styling.
 				this._updateOlderEvents(selectedDate);
 			}
 			// If no class found at all...
-			else {
+			else {				
 				// If dateOrder is normal (Ascending)... start from the left.
 				if (this.settings.dateOrder == "normal") {
-					// Add .selected class to the first events-content and first event date respectively.
-					timelineComponents['eventsContent']
-						.find('li#first').addClass('selected').end()
-						.siblings('.timeline').find('.events').find('a.first').addClass('selected');	
+					// Add .selected class to the first event.
+					timelineComponents['eventsWrapper'].find('a.first').addClass('selected');
+
+						// Find the selected event
+					var selectedEvent = timelineComponents['eventsWrapper'].find('a.selected'),
+						// Get the selected event's date.
+						selectedDate = selectedEvent.data('date');
+					
+					// Find the selected event's content using the date and add selected class to the content.
+					timelineComponents['eventsContent'].find('li[data-date="'+selectedDate+'"]').addClass('selected');			
 				}
 				// Else dateOrder is reverse (Descending)... start from the right.
 				else if (this.settings.dateOrder == "reverse") {
@@ -162,8 +166,8 @@ Docs at http://horizontal-timeline.ycodetech.co.uk
 					this._updateOlderEvents(selectedEvent);	
 				}
 			}
-
-
+			
+			
 			// Assign a left postion to the single events along the timeline
 			this._setDatePosition(timelineComponents);
 			// Assign a width to the timeline
@@ -173,9 +177,9 @@ Docs at http://horizontal-timeline.ycodetech.co.uk
 				.find('a.selected'), timelineComponents['fillingLine'], timelineTotalWidth);
 			// The timeline has been initialised - show it
 			this.$element.addClass('loaded');
-
+			
 			this._setup(self, timelineComponents, timelineTotalWidth);
-		}, this), 300);	
+		}, this), 300);
     };	
 	/* Dynamically creates the timeline according to the amount of events. */
 	Timeline.prototype._create = function () {		
@@ -204,7 +208,7 @@ Docs at http://horizontal-timeline.ycodetech.co.uk
 		//** Create the timeline HTML **//
 		
 		// Create the timeline element.
-		this.$element.prepend($timelineWrapper)
+		this.$element.prepend($timelineWrapper);
 		// Find the timeline element that was just created
 		var $timeline = this.$element.find('.timeline');
 		
@@ -237,13 +241,13 @@ Docs at http://horizontal-timeline.ycodetech.co.uk
 						 .find("#rightNav").append($nextButton).append($scrollRightButton);
 		}
 		// Otherwise, both button sets are disabled and we just need to add the timelineEventsWrapper.
-		else {
+		else { 
 			$timeline.append($timelineEventsWrapper);
 			// Add a 100% min-width to the events-wrapper if the buttons are disabled.
 			// Stops the timeline from disappearing due to apparent no width.
 			$timeline.find('.events-wrapper').css("min-width", "100%");
 		}
-			
+		
 		// Autoplay buttons	
 		// If autoplay is true, create the pause button
 		if (this.settings.autoplay == true)	
@@ -256,7 +260,7 @@ Docs at http://horizontal-timeline.ycodetech.co.uk
 		this._create.date(this, 'append');
 		// (instance, insertMethod (append, before, after [last 2 for addEvent method]), date to insert before/after [from addEvent method])
 		function createDate(self, insertMethod, arrangementDate) {
-			
+						
 			// If dateOrder is normal (starting from the left).
 			if (self.settings.dateOrder == "normal") {
 				// Find the event content.
@@ -269,37 +273,37 @@ Docs at http://horizontal-timeline.ycodetech.co.uk
 			
 			/* dateTime = the date and time */
 			if(self.settings.dateDisplay == "dateTime") {
-				$element.children('.events-content').find('li').each(function() {
+				$element.each(function() {
 					self._create.eventDateDisplay(self, $(this), "dateTime", insertMethod, arrangementDate);
 				});
 			}
 			/* date = the date only */
 			else if (self.settings.dateDisplay == "date") {
-				$element.children('.events-content').find('li').each(function() {	
+				$element.each(function() {	
 					self._create.eventDateDisplay(self, $(this), "date", insertMethod, arrangementDate);
 				});
 			}
 			/* time = the time only */
 			else if (self.settings.dateDisplay == "time") {
-				$element.children('.events-content').find('li').each(function() {	
+				$element.each(function() {	
 					self._create.eventDateDisplay(self, $(this), "time", insertMethod, arrangementDate);
 				});
 			}
 			/* dayMonth = the day and monthName only */
 			else if (self.settings.dateDisplay == "dayMonth") {
-				$element.children('.events-content').find('li').each(function() {
+				$element.each(function() {
 					self._create.eventDateDisplay(self, $(this), "dayMonth", insertMethod, arrangementDate);
 				});
 			}
 			/* monthYear = the monthName and year only */
 			else if (self.settings.dateDisplay == "monthYear") {
-				$element.children('.events-content').find('li').each(function() {
+				$element.each(function() {
 					self._create.eventDateDisplay(self, $(this), "monthYear", insertMethod, arrangementDate);
 				});		
 			}			
 			/* year = the year only */
 			else if (self.settings.dateDisplay == "year") {
-				$element.children('.events-content').find('li').each(function() {
+				$element.each(function() {
 					self._create.eventDateDisplay(self, $(this), "year", insertMethod, arrangementDate);
 				});
 			}
@@ -485,7 +489,7 @@ Docs at http://horizontal-timeline.ycodetech.co.uk
 						else $arrangementEvent.before(dateLink + dayPart + numSuffix(dayPart) + '<br>' + getMonthName(monthPart) +'</a>');
 					}	
 					else if(monthYearDisplay) {
-						if (insertMethod == 'append') $eventDateDisplay.append(dateLink + getMonthName(monthPart)  + '<br>' + yearPart +'</a>');
+						if (insertMethod == 'append') $eventDateDisplay.append(dateLink + getMonthName(monthPart) + '<br>' + yearPart +'</a>');
 						// For use with the addEvent method... creates new timeline events and places them where specified.
 						else if (insertMethod == 'after') $arrangementEvent.after(dateLink + getMonthName(monthPart) + '<br>' + yearPart +'</a>');
 						else $arrangementEvent.before(dateLink + getMonthName(monthPart) + '<br>' + yearPart +'</a>');
@@ -596,7 +600,7 @@ Docs at http://horizontal-timeline.ycodetech.co.uk
 				// Change the event content to match the selected event.
 				this._updateVisibleContent($this, timelineComponents['eventsContent']);
 				// Translate (scroll) the timeline left or right according to the position of the targeted event date
-				this._updateTimelinePosition($this, timelineComponents);
+				this._updateTimelinePosition($this, timelineComponents, timelineTotalWidth);
 			}, this));
 		
 		//** Autoplay **//
@@ -704,7 +708,7 @@ Docs at http://horizontal-timeline.ycodetech.co.uk
 								// Go back to the start of the cycle. 
 								this._showNewContent(timelineComponents, autoplayTimelineTotalWidth, 'start');
 								// Recalculate the current index to make sure it's reset back to 1 (the start).
-								current = timelineComponents['eventsWrapper'].find('.selected').index();	
+								current = timelineComponents['eventsWrapper'].find('.selected').index();									
 							}
 							else {
 								// If dateOrder is normal.
@@ -718,8 +722,6 @@ Docs at http://horizontal-timeline.ycodetech.co.uk
 									this._showNewContent(timelineComponents, autoplayTimelineTotalWidth, 'prev');
 								}
 							}
-							// Add 1 to the current index
-							current++;
 						}
 					} // End isPaused if statement
 				} // End Interval function
@@ -934,7 +936,7 @@ Docs at http://horizontal-timeline.ycodetech.co.uk
 					// Find the targeted event date using the date					
 					selectedDate = timelineComponents['eventsWrapper'].find(eventDate),
 					// Get the width value of the events (previously set)
-					timelineTotalWidth = timelineComponents['eventsWrapper'].width();
+					timelineTotalWidth = this._setTimelineWidth(timelineComponents);
 				// If a link is targetting the timeline it sits in (itself), then execute the function to translate the timeline	
 				if(targetSelf) translate_gotoTimeline(this);
 				// If not, then use a smooth scroll and then execute the function afterwards.
@@ -970,7 +972,7 @@ Docs at http://horizontal-timeline.ycodetech.co.uk
 						pluginRef._updateVisibleContent(selectedDate, timelineComponents['eventsContent']);
 					}
 					// Translate (scroll) the timeline left or right according to the position of the targeted event date
-					pluginRef._updateTimelinePosition(selectedDate, timelineComponents);
+					pluginRef._updateTimelinePosition(selectedDate, timelineComponents, timelineTotalWidth);
 				} // End translate_gotoTimeline() translate function
 			} // End gotoTimeline function						
 		} // End if goToTimelineLink exists
@@ -1028,15 +1030,12 @@ Docs at http://horizontal-timeline.ycodetech.co.uk
 						// Swipe right to go left (previous)
 						swipeRight:$.proxy(function(event, direction, distance, duration, fingerCount) {
 							// Show previous content on swipeRight
-							
-							this._setup.swipe(this, 'prev');
-							//this._showNewContent(timelineComponents, this._setTimelineWidth(timelineComponents), 'prev');	
+							this._setup.swipe(this, 'prev');							
 						}, this), 
 						// Swipe left to go right (next)
 						swipeLeft:$.proxy(function(event, direction, distance, duration, fingerCount) {	
 							// Show next content on swipeLeft
-							this._setup.swipe(this, 'next');
-															
+							this._setup.swipe(this, 'next');															
 						}, this),
 						// Swipe distance... 0 = any distance in px
 						threshold:75,
@@ -1122,18 +1121,18 @@ Docs at http://horizontal-timeline.ycodetech.co.uk
 	 Timeline.prototype.refresh = function () {
 		this._timelineComponents(timelineComponents);
 		
-		// Removes first and last id attributes of the event-content list. 
+		// Removes first and last id attributes of the event-content list.
 		timelineComponents['eventsContent']
 			.find('#first').removeAttr('id').end()
 			.find('#last').removeAttr('id').end();
-
+		
 		// Removes first and last classes from the timeline event date	
 		timelineComponents['eventsWrapper']
 			.find('.first').removeClass('first').end()
-			.find('.last').removeClass('last').end();
-			
+			.find('.last').removeClass('last').end();			
+		
 		// Adds classes and IDs.	
-		this.init.addIdsAndClasses();	
+		this.init.addIdsAndClasses(this);	
 			
 		this._setDatePosition(timelineComponents);
 		timelineTotalWidth = this._setTimelineWidth(timelineComponents);
@@ -1280,12 +1279,13 @@ Docs at http://horizontal-timeline.ycodetech.co.uk
 		// If dateOrder is normal...
 		if (this.settings.dateOrder == "normal")
 			// Find the prev/next content for detection later.
-			var newContent = (string == 'next') ? visibleContent.next() : visibleContent.prev();
+			var newContent = (string == 'next') ?  visibleContent.next() : visibleContent.prev();
+			
 		// If dateOrder is reverse
 		else if (this.settings.dateOrder == "reverse") 
 			// Find the prev/next content in reverse fore detection later.
 			var newContent = (string == 'next') ?  visibleContent.prev() : visibleContent.next();
-
+		
 		// If a prev/next content exists
 		// OR dateOrder is reverse AND string is start (for Autoplay)...
 		// This determines whether we can navigate prev or next. 
@@ -1293,8 +1293,10 @@ Docs at http://horizontal-timeline.ycodetech.co.uk
 			// Find the .selected event
 			var selectedDate = timelineComponents['eventsWrapper'].find('.selected'),
 				newEvent;
+				
 			// If start... (For Autoplay), find the first event	 
 			if(string == 'start') {
+				
 				// If the dateOrder is normal (starting from the left)...
 				if (this.settings.dateOrder == "normal") {
 					// Find the first event.
@@ -1307,25 +1309,28 @@ Docs at http://horizontal-timeline.ycodetech.co.uk
 				}
 			}
 			// If next, find the next event from the current selected event
-			else if (string == 'next') newEvent = selectedDate.next('a');
+			else if (string == 'next')
+				newEvent = selectedDate.next('a');
+				
 			// If prev, find the prev event from the current selected event
-			else if (string == 'prev') newEvent = selectedDate.prev('a');
+			else if (string == 'prev')
+				newEvent = selectedDate.prev('a');
+			
 			this._updateVisibleContent(newEvent, timelineComponents['eventsContent']);
 			newEvent.addClass('selected');
 			selectedDate.removeClass('selected');
 			this._updateFilling(newEvent, timelineComponents['fillingLine'], timelineTotalWidth);
 			this._updateOlderEvents(newEvent);			
-			this._updateTimelinePosition(newEvent, timelineComponents);
+			this._updateTimelinePosition(newEvent, timelineComponents, timelineTotalWidth);
 		}
 	}
 	
-	Timeline.prototype._updateTimelinePosition = function (event, timelineComponents) {
+	Timeline.prototype._updateTimelinePosition = function (event, timelineComponents, timelineTotalWidth) {
 			// Get the css left value of the targeted event date
 		var eventLeft = Number(event.css('left').replace('px', '')),
 			// Get the width value of the .events-wrapper
-			timelineWidth = timelineComponents['timelineWrapper'].width(),
-			// Get the width value of the events (previously set)
-			timelineTotalWidth = timelineComponents['eventsWrapper'].width();
+			timelineWidth = timelineComponents['timelineWrapper'].width();
+			
 		this._translateTimeline(timelineComponents, - eventLeft + timelineWidth/2, timelineWidth - timelineTotalWidth); 
 	}
 	
@@ -1367,7 +1372,7 @@ Docs at http://horizontal-timeline.ycodetech.co.uk
 			timelineComponents['timelineEvents'].first().css({'left': '0px','padding-left': '10px'});
 			startingNum = 1;
 		}
-		// i start at 1, meaning starts at 2nd date.
+		// When i starts at 1, it means starts at 2nd date.
 		for (i = startingNum; i < timelineComponents['timelineEvents'].length; i++) {
 			distnew = distprev + dateIntervals;
 			timelineComponents['timelineEvents'].eq(i).css('left', distnew + 'px');
@@ -1391,7 +1396,7 @@ Docs at http://horizontal-timeline.ycodetech.co.uk
 		if (totalWidth < wrapperWidth) totalWidth = wrapperWidth;
 	
 		timelineComponents['eventsWrapper'].css('width', totalWidth+'px');
-		this._updateTimelinePosition(timelineComponents['eventsWrapper'].find('a.selected'), timelineComponents);
+		this._updateTimelinePosition(timelineComponents['eventsWrapper'].find('a.selected'), timelineComponents, totalWidth);
 	
 		return totalWidth;
 	}
@@ -1500,10 +1505,10 @@ Docs at http://horizontal-timeline.ycodetech.co.uk
 		// https://stackoverflow.com/a/14913306/2358222
 		return window.getComputedStyle(this.element,':before').content.replace(/'/g, "").replace(/"/g, "");
 	}
-	
+		
 	//** Button States **//
-	
-	// Function to add or remove inactive class.	
+		
+	// Function to add or remove inactive class.
 	Timeline.prototype._buttonStates = function (timelineComponents, translateValue, totalTranslateValue){
 		var nextButton = timelineComponents['timelineNavigation'].find('.next'),
 			prevButton = timelineComponents['timelineNavigation'].find('.prev'),
@@ -1555,7 +1560,7 @@ Docs at http://horizontal-timeline.ycodetech.co.uk
 		if (translateValue == totalTranslateValue) rightButton.addClass('inactive');
 		// If not, then enable the scroll right button
 		else rightButton.removeClass('inactive');
-	} // End buttonStates() function
+	} // End _buttonStates() function
 	
 	// Function to add required js and css files dynamically
 	// (CDN URL of the plugin, file type JS or CSS, callback function)				 
@@ -1663,10 +1668,10 @@ Docs at http://horizontal-timeline.ycodetech.co.uk
     // e.g. $(element).defaultPluginName('functionName', arg1, arg2)
     $.fn[pluginName] = function ( options ) {
         var args = arguments,
-	    windowWidth = $(window).width(),
-	    dateExists = $(this).find('.events-content').find('li').map(function() {
-		return $(this).data('date');
-	    }).get();
+			windowWidth = $(window).width(),
+			dateExists = $(this).find('.events-content').find('li').map(function() {
+				return $(this).data('date');
+	    	}).get();
 
         // Is the first parameter an object (options), or was omitted,
         // instantiate a new instance of the plugin.
@@ -1681,13 +1686,12 @@ Docs at http://horizontal-timeline.ycodetech.co.uk
                     // pass options to our plugin constructor,
                     // and store the plugin instance
                     // in the elements jQuery data object.
-                    $.data(this, 'plugin_' + pluginName, 
-			   {'originalEventsContent': $(this).find('.events-content').clone()[0], 
-			    'windowWidth': windowWidth, 
-			    'existingDates': dateExists, 
-			    'Timeline': new Timeline(this, options)
-		    	   }
-		    );
+                    $.data(this, 'plugin_' + pluginName, {
+			'originalEventsContent': $(this).find('.events-content').clone()[0], 
+			'windowWidth': windowWidth, 
+			'existingDates': dateExists, 
+			'Timeline': new Timeline(this, options)
+		    });
                 }
             });
 

From 0cf36998b4855632ddb0678929667fac265b52bc Mon Sep 17 00:00:00 2001
From: yCodeTech <31927084+yCodeTech@users.noreply.github.com>
Date: Tue, 24 Sep 2019 16:42:18 +0100
Subject: [PATCH 21/27] Fixed a bug

Fixed a bug where if the content was swiped and then another timeline's nav buttons were clicked, the nav buttons would sync up to the first timeline instead, breaking the whole timeline system. (Added on lines 574 and 591.)
---
 JavaScript/horizontal_timeline.2.0.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/JavaScript/horizontal_timeline.2.0.js b/JavaScript/horizontal_timeline.2.0.js
index e6dd3f4..1bf64b0 100644
--- a/JavaScript/horizontal_timeline.2.0.js
+++ b/JavaScript/horizontal_timeline.2.0.js
@@ -571,6 +571,7 @@ Docs at http://horizontal-timeline.ycodetech.co.uk
 				event.preventDefault();
 				var $this = $(event.target);
 				
+				this._timelineComponents(timelineComponents);
 				timelineTotalWidth = this._setTimelineWidth(timelineComponents);
 				// If next button clicked, shows next content
 				if($this.is('.next')) this._showNewContent(timelineComponents, timelineTotalWidth, 'next');
@@ -587,6 +588,7 @@ Docs at http://horizontal-timeline.ycodetech.co.uk
 				event.preventDefault();
 				var $this = $(event.target);
 				
+				this._timelineComponents(timelineComponents);
 				// Remove selected class from all dates.
 				this.$element.find('.events').find('a').removeClass('selected');
 				// Add class to the event date clicked.

From d957c42f8aaaa300018eaa33d1915f372a492a4a Mon Sep 17 00:00:00 2001
From: yCodeTech <31927084+yCodeTech@users.noreply.github.com>
Date: Wed, 25 Sep 2019 23:31:21 +0100
Subject: [PATCH 22/27] Updated To Do List

---
 README.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 4043807..e278e6e 100644
--- a/README.md
+++ b/README.md
@@ -120,5 +120,6 @@ $('#example').horizontalTimeline({
 - Add support for custom slide animations/transitions using Animate.css
 - Implement a namespaced object data attribute to accomodate the data-date and possibly the custom animations.
 - Add method to dynamically change existing dates and reposition them to reflect their new date order.
-- Add support for Right-to-Left.
+- ~~Add support for Right-to-Left.~~ (In the form of `dateOrder: reverse`.)
 - ~~Rename the disableButton to reflect the docs name of Inactive Button States.~~
+- Rework Autoplay to allow multiple autoplaying timelines per page.

From de5e93abfea3b4255d5cf84a3f228b8e5c4f30bc Mon Sep 17 00:00:00 2001
From: yCodeTech <31927084+yCodeTech@users.noreply.github.com>
Date: Thu, 26 Sep 2019 01:16:44 +0100
Subject: [PATCH 23/27] Fixed a bug

Fixed a bug to do with the scrollbar, Line 13
---
 css/horizontal_timeline.2.0.css | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/css/horizontal_timeline.2.0.css b/css/horizontal_timeline.2.0.css
index 49cd1f7..2850e43 100644
--- a/css/horizontal_timeline.2.0.css
+++ b/css/horizontal_timeline.2.0.css
@@ -10,11 +10,8 @@ Licensed under the MIT license
 Docs at http://horizontal-timeline.ycodetech.co.uk
 
 -------------------------------- */
-html, body {
-	/* Stop horizontal scrollbar from appearing/disappearing when the content slides across and changes. 
-	Also fixes the fixed flexbox elements from moving along with the transforms.*/
-	height: auto;
-	overflow: auto;
+body {
+	/* Stop horizontal scrollbar from appearing/disappearing when the content slides across and changes.*/
 	overflow-x: hidden;
 }
 .horizontal-timeline {

From 1f9eaeab9026d273fa69f591cdbac310a49d3ca6 Mon Sep 17 00:00:00 2001
From: yCodeTech <31927084+yCodeTech@users.noreply.github.com>
Date: Fri, 27 Sep 2019 01:02:12 +0100
Subject: [PATCH 24/27] Changed the fail-safe code in setTimelineWidth

---
 JavaScript/horizontal_timeline.2.0.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/JavaScript/horizontal_timeline.2.0.js b/JavaScript/horizontal_timeline.2.0.js
index 1bf64b0..fe2829d 100644
--- a/JavaScript/horizontal_timeline.2.0.js
+++ b/JavaScript/horizontal_timeline.2.0.js
@@ -1390,12 +1390,14 @@ Docs at http://horizontal-timeline.ycodetech.co.uk
 			// Get the css left value of the last event date, remove the px unit and add 100 to it.
 			lastEventLeft = Number(timelineComponents['timelineEvents'].last().css('left').replace('px', '')) + 100;
 		
-		// Set the timeline width
-		totalWidth = lastEventLeft;
-		
-		// Set a fail-safe, if totalWidth is less than the wrapperWidth then use the wrapperWidth as width.
+		// Set a fail-safe, if lastEventLeft is less than the wrapperWidth then use the wrapperWidth as totalWidth.
 		// Stops the timeline width from being too small.
-		if (totalWidth < wrapperWidth) totalWidth = wrapperWidth;
+		if (lastEventLeft < wrapperWidth) {
+			totalWidth = wrapperWidth;
+		}
+		else {
+			totalWidth = lastEventLeft;
+		}
 	
 		timelineComponents['eventsWrapper'].css('width', totalWidth+'px');
 		this._updateTimelinePosition(timelineComponents['eventsWrapper'].find('a.selected'), timelineComponents, totalWidth);

From 3b2ef65b61a2b8fc8bc394078f96ed0b28c471d1 Mon Sep 17 00:00:00 2001
From: yCodeTech <31927084+yCodeTech@users.noreply.github.com>
Date: Fri, 27 Sep 2019 01:07:59 +0100
Subject: [PATCH 25/27] Update horizontal_timeline.2.0.css

---
 css/horizontal_timeline.2.0.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/css/horizontal_timeline.2.0.css b/css/horizontal_timeline.2.0.css
index 2850e43..bd907f1 100644
--- a/css/horizontal_timeline.2.0.css
+++ b/css/horizontal_timeline.2.0.css
@@ -10,6 +10,7 @@ Licensed under the MIT license
 Docs at http://horizontal-timeline.ycodetech.co.uk
 
 -------------------------------- */
+html, 
 body {
 	/* Stop horizontal scrollbar from appearing/disappearing when the content slides across and changes.*/
 	overflow-x: hidden;

From ee7a624178cae783ec03feecc4624d3bfac81b70 Mon Sep 17 00:00:00 2001
From: yCodeTech <31927084+yCodeTech@users.noreply.github.com>
Date: Fri, 27 Sep 2019 01:25:17 +0100
Subject: [PATCH 26/27] Create To Do

---
 To Do | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 To Do

diff --git a/To Do b/To Do
new file mode 100644
index 0000000..327e5cb
--- /dev/null
+++ b/To Do	
@@ -0,0 +1,8 @@
+##### To do:
+
+- Add support for custom slide animations/transitions using Animate.css
+- Implement a namespaced object data attribute to accomodate the data-date and possibly the custom animations.
+- Add method to dynamically change existing dates and reposition them to reflect their new date order.
+- ~~Add support for Right-to-Left.~~ (In the form of `dateOrder: reverse`.)
+- ~~Rename the disableButton to reflect the docs name of Inactive Button States.~~
+- Rework Autoplay to allow multiple autoplaying timelines per page.

From 2833659e7d33654528d597a971625f7d9b0ff73d Mon Sep 17 00:00:00 2001
From: yCodeTech <31927084+yCodeTech@users.noreply.github.com>
Date: Fri, 27 Sep 2019 01:26:09 +0100
Subject: [PATCH 27/27] Rename To Do to To Do.md

---
 To Do => To Do.md | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename To Do => To Do.md (100%)

diff --git a/To Do b/To Do.md
similarity index 100%
rename from To Do
rename to To Do.md