From b1499904746ab8b3ec9c6c5431b1c69c72074e24 Mon Sep 17 00:00:00 2001
From: Freek Dijkstra <freek@macfreek.nl>
Date: Mon, 27 Feb 2012 17:12:08 +0100
Subject: [PATCH] Move themeClass and height from JavaScript to HTML. This
 makes the configuration easier and gives much better backward compatibility
 if JavaScript is turned off.

---
 demo/css/myTheme.css | 12 ++++++++++++
 demo/demo.js         | 14 +++++++-------
 demo/test.html       | 40 +++++++++++++++-------------------------
 3 files changed, 34 insertions(+), 32 deletions(-)

diff --git a/demo/css/myTheme.css b/demo/css/myTheme.css
index 83cd7fe..994efc7 100644
--- a/demo/css/myTheme.css
+++ b/demo/css/myTheme.css
@@ -50,6 +50,18 @@
 	height: 500px;
 	}
 
+.height250 {
+        height: 250px;
+        overflow-x: auto;
+        overflow-y: auto;
+}
+
+.height400 {
+        height: 400px;
+        overflow-x: auto;
+        overflow-y: auto;
+}
+
 .fancyTable td, .fancyTable th {
 	/* appearance */
 	border: 1px solid #778899;
diff --git a/demo/demo.js b/demo/demo.js
index 45f27a0..e2c9531 100644
--- a/demo/demo.js
+++ b/demo/demo.js
@@ -1,13 +1,13 @@
 $(document).ready(function() {
-    $('.myTable01').fixedHeaderTable({ height: '250', footer: true, cloneHeadToFoot: true, altClass: 'odd', themeClass: 'fancyTable', autoShow: false });
+    $('#myTable01').fixedHeaderTable({ footer: true, cloneHeadToFoot: true, altClass: 'odd', autoShow: false });
     
-    $('.myTable01').fixedHeaderTable('show', 1000);
+    $('#myTable01').fixedHeaderTable('show', 1000);
     
-    $('.myTable02').fixedHeaderTable({ height: '250', footer: true, altClass: 'odd', themeClass: 'fancyTable' });
+    $('#myTable02').fixedHeaderTable({ footer: true, altClass: 'odd' });
     
-    $('.myTable03').fixedHeaderTable({ height: '400', altClass: 'odd', footer: true, fixedColumns: 1, themeClass: 'fancyTable' });
+    $('#myTable05').fixedHeaderTable({ altClass: 'odd', footer: true, fixedColumns: 1 });
     
-    $('.myTable04').fixedHeaderTable({ height: '400', altClass: 'odd', footer: true, cloneHeadToFoot: true, fixedColumns: 3, themeClass: 'fancyTable' });
+    $('#myTable03').fixedHeaderTable({ altClass: 'odd', footer: true, fixedColumns: 1 });
     
-    $('.myTable05').fixedHeaderTable({ height: '400', altClass: 'odd', footer: true, fixedColumns: 1, themeClass: 'fancyTable' });
-});
\ No newline at end of file
+    $('#myTable04').fixedHeaderTable({ altClass: 'odd', footer: true, cloneHeadToFoot: true, fixedColumns: 3 });
+});
diff --git a/demo/test.html b/demo/test.html
index 27ee8bc..f5856db 100644
--- a/demo/test.html
+++ b/demo/test.html
@@ -15,19 +15,17 @@
     		<div class="grid_4">
     			<pre>
     				<code>
-$('.myTable01').fixedHeaderTable({ 
-	height: '250',
+$('#myTable01').fixedHeaderTable({ 
 	footer: true,
 	cloneHeadToFoot: true,
 	altClass: 'odd',
-	themeClass: 'fancyTable',
 	autoShow: false
 });
     				</code>
     			</pre>
     		</div>
-    		<div class="grid_8">
-    			<table class="myTable01" cellpadding="0" cellspacing="0">
+    		<div class="grid_8 height250">
+    			<table class="fancyTable" id="myTable01" cellpadding="0" cellspacing="0">
     			    <thead>
     			        <tr>
     			            <th>Browser</th>
@@ -177,17 +175,15 @@ $('.myTable01').fixedHeaderTable({
         	<div class="grid_4">
         		<pre>
         		    				<code>
-$('.myTable02').fixedHeaderTable({
-	height: '250',
+$('#myTable02').fixedHeaderTable({
 	footer: true,
 	altClass: 'odd',
-	themeClass: 'fancyDarkTable'
 });
         		    				</code>
         		    			</pre>
         	</div>
-        	<div class="grid_8">
-        		<table class="myTable02" cellpadding="0" cellspacing="0">
+        	<div class="grid_8 height250">
+        		<table class="fancyTable" id="myTable02" cellpadding="0" cellspacing="0">
         		    <thead>
         		        <tr>
         		            <th>Browser</th>
@@ -379,18 +375,16 @@ $('.myTable02').fixedHeaderTable({
         	<div class="grid_4">
         		<pre>
         			<code>
-$('.myTable05').fixedHeaderTable({
-	height: '400',
+$('#myTable05').fixedHeaderTable({
 	altClass: 'odd',
 	footer: true,
 	fixedColumns: 1,
-	themeClass: 'fancyTable'
 });
         			</code>
         		</pre>
         	</div>
-        	<div class="grid_4">
-        		<table class="myTable05" cellpadding="0" cellspacing="0">
+        	<div class="grid_4 height400">
+        		<table class="fancyTable" id="myTable05" cellpadding="0" cellspacing="0">
         		    <thead>
         		        <tr>
         		            <th>Browser</th>
@@ -692,18 +686,16 @@ $('.myTable05').fixedHeaderTable({
         	<div class="grid_4">
         		<pre>
         			<code>
-$('.myTable03').fixedHeaderTable({
-	height: '400',
+$('#myTable03').fixedHeaderTable({
 	altClass: 'odd',
 	footer: true,
 	fixedColumns: 1,
-	themeClass: 'fancyTable'
 });
         			</code>
         		</pre>
         	</div>
-        	<div class="grid_4">
-        		<table class="myTable03" cellpadding="0" cellspacing="0">
+        	<div class="grid_4 height400">
+        		<table class="fancyTable" id="myTable03" cellpadding="0" cellspacing="0">
         		    <thead>
         		        <tr>
         		            <th>Browser</th>
@@ -997,19 +989,17 @@ $('.myTable03').fixedHeaderTable({
         	<div class="grid_4">
         		<pre>
         			<code>
-$('.myTable04').fixedHeaderTable({
-	height: '400',
+$('#myTable04').fixedHeaderTable({
 	altClass: 'odd',
 	footer: true,
 	cloneHeadToFoot: true,
 	fixedColumn: 3,
-	themeClass: 'fancyTable'
 });
         			</code>
         		</pre>
         	</div>
-        	<div class="grid_4">
-        		<table class="myTable04" cellpadding="0" cellspacing="0">
+        	<div class="grid_4 height400">
+        		<table class="fancyTable" id="myTable04" cellpadding="0" cellspacing="0">
         		    <thead>
         		        <tr>
         		            <th>Browser</th>