first commit

tyler-paulson · Nov 2, 2012 · bf2d38a · bf2d38a
commit bf2d38a
Show file tree

Hide file tree

Showing 4 changed files with 226 additions and 0 deletions.
diff --git a/README.markdown b/README.markdown
@@ -0,0 +1,81 @@
+# Responsive Table Headers
+
+A jQuery plugin that dynamically injects table headers as inline elements to use when reformatting table cells as block elements at narrows widths in a responsive layout.
+
+For example, the abbreviated markup of this discography table...
+
+```` html
+<thead>
+	<th>Title</th>
+	<th>Year</th>
+	<th>Type</th>
+</thead>
+<tbody>
+	<td>Adventures of the O.C. Supertones</td>
+	<td>1996</td>
+	<td>Studio</td>
+</tbody>
+````
+
+Is converted by the browser to...
+
+```` html
+<thead>
+	<th>Title</th>
+	<th>Year</th>
+	<th>Type</th>
+</thead>
+<tbody>
+	<td><span class="head">Title: </span>Adventures of the O.C. Supertones</td>
+	<td><span class="head">Year: </span>1996</td>
+	<td><span class="head">Type: </span>Studio</td>
+</tbody>
+````
+
+## Usage
+
+Make sure jQuery and the plugin are loaded and inside the document ready handler call...
+
+```` js
+$('table').responsive_table_headers();
+````
+
+Customize the markup by modifying the defaults shown below...
+
+```` js
+$('table').responsive_table_headers({ classAttr: 'head', element: 'h4', separator: ': ' });
+````
+
+Then just include some CSS...
+
+```` css
+td .head 		{ display: none; }
+
+@media (max-width: 30em) {
+	thead 		{ display: none; }
+	td 			{ display: block; }
+	td .head	{ display: inline; }
+}
+````
+
+##Additional Notes
+
+If you're going **mobile first**, you'll need to reverse the CSS like so...
+
+```` css
+thead 			{ display: none; }
+td 				{ display: block; }
+td .head 		{ display: inline; }
+
+@media (min-width: 30em) {
+	thead 		{ display: table-header-group; }
+	td 			{ display: table-cell; }
+	td .head	{ display: none; }
+}
+````
+
+You could argue that this would be better done server-side, but sometimes that's not practical and there is an SEO argument to be made for not having the headers repeated over and over in the markup.
+
+If you've got some ideas on how to make this script better, email me at [[email protected]](mailto:[email protected]) or send me a pull request.
+
+*This script is released under the [MIT License](http://opensource.org/licenses/MIT).*
diff --git a/demo.html b/demo.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+
+<title>Responsive Table Headers Demo</title>
+
+<meta name="viewport" content="width=device-width,initial-scale=1">
+
+<style>
+
+td .head 		{ display: none; }
+
+@media (max-width: 30em) {
+	thead 		{ display: none; }
+	td 			{ display: block; }
+	td .head	{ display: inline; }
+	tr			{ display: block; margin-bottom: 1em; }
+}
+
+</style>
+
+</head>
+
+<body>
+
+<h2>O.C. Supertones Discography</h2>
+
+<table>
+	<thead>
+		<tr>
+			<th>Title</th>
+			<th>Year</th>
+			<th>Type</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr>
+			<td>Adventures of the O.C. Supertones</td>
+			<td>1996</td>
+			<td>Studio</td>
+		</tr>
+		<tr>
+			<td>Supertones Strike Back</td>
+			<td>1997</td>
+			<td>Studio</td>
+		</tr>
+		<tr>
+			<td>Loud and Clear</td>
+			<td>2000</td>
+			<td>Studio</td>
+		</tr>
+		<tr>
+			<td>Live! Volume One</td>
+			<td>2002</td>
+			<td>Live</td>
+		</tr>
+		<tr>
+			<td>Hi-Fi Revival</td>
+			<td>2002</td>
+			<td>Studio</td>
+		</tr>
+		<tr>
+			<td>Revenge of the O.C. Supertones</td>
+			<td>2004</td>
+			<td>Studio</td>
+		</tr>
+		<tr>
+			<td>Unite</td>
+			<td>2005</td>
+			<td>Compilation</td>
+		</tr>
+		<tr>
+			<td>Faith of a Child</td>
+			<td>2005</td>
+			<td>Compilation</td>
+		</tr>
+		<tr>
+			<td>Re-Unite</td>
+			<td>2010</td>
+			<td>Compilation</td>
+		</tr>
+		<tr>
+			<td>For The Glory</td>
+			<td>2012</td>
+			<td>Studio</td>
+		</tr>
+	</tbody>
+</table>
+
+<script src="http://code.jquery.com/jquery.min.js"></script>
+<script src="jquery.responsive_table_headers.min.js"></script>
+
+<script>
+	$(document).ready(function() {
+		$('table').responsive_table_headers();
+	});
+</script>
+
+</body>
+
+</html>
diff --git a/jquery.responsive_table_headers.js b/jquery.responsive_table_headers.js
@@ -0,0 +1,40 @@
+// https://github.com/tyler-paulson/responsive_table_headers - released under the MIT License
+
+(function($){
+
+	$.fn.responsive_table_headers = function(options) {
+
+		var settings = $.extend({
+			classAttr: 'head',
+			element: 'h4',
+			seperator: ': '
+		}, options);
+
+		var headers = [];
+
+		this.find('th').each(function() {
+			headers.push($(this).text());
+		});
+
+		this.find('tr').each(function() {
+			var i = 0;
+			$(this).children('td').each(function() {
+				$(this).prepend(
+					'<'+
+					settings.element+
+					' class="'+
+					settings.classAttr+
+					'">'+
+					headers[i]+
+					settings.seperator+
+					'</'+
+					settings.element+
+					'>'
+				);
+				i++;
+			});
+		});
+
+	};
+
+})(jQuery);
diff --git a/jquery.responsive_table_headers.min.js b/jquery.responsive_table_headers.min.js