Responsive tables and individual content filters

assets/css/sportspress.css

@@ -35,4 +35,56 @@
 /* Google Maps */
 .sp-google-map {
 	height: 320px;
+}
+
+@media only screen and (max-width: 40em) {
+	.sp-responsive-table {
+		margin-bottom: 0;
+	}
+
+	.sp-pinned-table {
+		position: absolute;
+		left: 0;
+		top: 0;
+		width: 50%;
+		overflow: hidden;
+		overflow-x: scroll;
+	}
+	.sp-pinned-table table {
+		border-right: none;
+		border-left: none;
+		width: 100%;
+	}
+	.sp-pinned-table table th,
+	.sp-pinned-table table td {
+		white-space: nowrap;
+	}
+	.sp-pinned-table td:last-child {
+		border-bottom: 0;
+	}
+	
+	.sp-responsive-table-wrapper {
+		position: relative;
+		overflow: hidden;
+		background: #fff;
+	}
+	.sp-responsive-table-wrapper .scrollable {
+		margin-left: 50%;
+	}
+	.sp-responsive-table-wrapper .scrollable {
+		overflow: scroll;
+		overflow-y: hidden;
+	}	
+	
+	.sp-responsive-table td,
+	.sp-responsive-table th {
+		position: relative;
+		white-space: nowrap;
+		overflow: hidden;
+	}
+	.sp-responsive-table .data-number,
+	.sp-responsive-table .data-name,
+	.sp-responsive-.sp-pinned-table td {
+		display: none;
+	}
 }

assets/js/sportspress.js

@@ -1,21 +1,98 @@
+function viewport() {
+    var e = window, a = 'inner';
+    if (!('innerWidth' in window )) {
+        a = 'client';
+        e = document.documentElement || document.body;
+    }
+    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
+}
+
 (function($) {
 
-	// Data Tables
-	$(".sp-data-table").dataTable({
-		"aaSorting": [],
-		"bAutoWidth": false,
-		"bFilter": false,
-		"bInfo": false,
-		"bPaginate": false,
-		"bSort": true,
-	    "oLanguage": {
-	      "oAria": {
-	        "sSortAscending": "",
-	        "sSortDescending": ""
-	      }
-	    }
+	// Data tables
+	if (viewport().width > 640) {
+		$(".sp-data-table").dataTable({
+			"aaSorting": [],
+			"bAutoWidth": false,
+			"bFilter": false,
+			"bInfo": false,
+			"bPaginate": false,
+			"bSort": true,
+		    "oLanguage": {
+		      "oAria": {
+		        "sSortAscending": "",
+		        "sSortDescending": ""
+		      }
+		    }
+		});
+	}
+
+	// Responsive tables
+	var switched = false;
+	var updateTables = function() {
+	if ((viewport().width <= 640) && !switched ){
+	  switched = true;
+	  $(".sp-responsive-table").each(function(i, element) {
+	    splitTable($(element));
+	  });
+	  return true;
+	}
+	else if (switched && (viewport().width > 640)) {
+	  switched = false;
+	  $(".sp-responsive-table").each(function(i, element) {
+	    unsplitTable($(element));
+	  });
+	}
+	};
+
+	$(window).load(updateTables);
+	$(window).on("redraw",function(){switched=false;updateTables();}); // An event to listen for
+	$(window).on("resize", updateTables);
+
+
+	function splitTable(original)
+	{
+		original.wrap("<div class='sp-responsive-table-wrapper' />");
+		
+		var copy = original.clone();
+		copy.find("td:not(.data-number):not(.data-name), th:not(.data-number):not(.data-name)").css("display", "none");
+		copy.removeClass("sp-responsive-table");
+		
+		original.closest(".sp-responsive-table-wrapper").append(copy);
+		copy.wrap("<div class='sp-pinned-table' />");
+		original.wrap("<div class='scrollable' />");
+
+	setCellHeights(original, copy);
+	}
+
+	function unsplitTable(original) {
+	original.closest(".sp-responsive-table-wrapper").find(".sp-pinned-table").remove();
+	original.unwrap();
+	original.unwrap();
+	}
+
+	function setCellHeights(original, copy) {
+	var tr = original.find('tr'),
+	    tr_copy = copy.find('tr'),
+	    heights = [];
+
+	tr.each(function (index) {
+	  var self = $(this),
+	      tx = self.find('th, td');
+
+	  tx.each(function () {
+	    var height = $(this).outerHeight(true);
+	    heights[index] = heights[index] || 0;
+	    if (height > heights[index]) heights[index] = height;
+	  });
+
 	});
 
+	tr_copy.each(function (index) {
+	  $(this).height(heights[index]);
+	});
+	}
+
 	// Google Maps
 	function initialize_google_maps() {
 		$maps = $('.sp-google-map');