From 0f815224989ddcd5949de54e64c634e09e5930ac Mon Sep 17 00:00:00 2001 From: myfreeweb Date: Thu, 31 May 2012 22:42:22 +0400 Subject: [PATCH 1/2] unfuck the js --- responsive-tables.js | 60 ++++++++++++++++++++------------------------ 1 file changed, 27 insertions(+), 33 deletions(-) diff --git a/responsive-tables.js b/responsive-tables.js index b3a38c2..87a6760 100644 --- a/responsive-tables.js +++ b/responsive-tables.js @@ -1,42 +1,36 @@ $(document).ready(function() { var switched = false; - var updateTables = function() { - if (($(window).width() < 767) && !switched ){ + + function updateTables() { + var fixTable; + if (($(window).width() < 767) && !switched) { switched = true; - $("table.responsive").each(function(i, element) { - splitTable($(element)); - }); - return true; - } - else if (switched && ($(window).width() > 767)) { + fixTable = splitTable; + } else if (switched && ($(window).width() > 767)) { switched = false; - $("table.responsive").each(function(i, element) { - unsplitTable($(element)); - }); + fixTable = unsplitTable; } + $('table.responsive').each(function(i, element) { + fixTable($(element)); + }); }; - - $(window).load(updateTables); - $(window).bind("resize", updateTables); - - - function splitTable(original) - { - original.wrap("
"); - - var copy = original.clone(); - copy.find("td:not(:first-child), th:not(:first-child)").css("display", "none"); - copy.removeClass("responsive"); - - original.closest(".table-wrapper").append(copy); - copy.wrap("
"); - original.wrap("
"); - } - - function unsplitTable(original) { - original.closest(".table-wrapper").find(".pinned").remove(); + + $(window).load(updateTables).bind('resize', updateTables); + + function splitTable(original) { + original.wrap('
'); + + var copy = original.clone(); + copy.removeClass('responsive').find('td:not(:first-child), th:not(:first-child)').css('display', 'none'); + + original.closest('.table-wrapper').append(copy); + copy.wrap('
'); + original.wrap('
'); + } + + function unsplitTable(original) { + original.closest('.table-wrapper').find('.pinned').remove(); original.unwrap(); original.unwrap(); - } - + } }); From 4ab16056ef3e2c761c3c71cc5ec74daa46347e05 Mon Sep 17 00:00:00 2001 From: myfreeweb Date: Thu, 31 May 2012 23:40:56 +0400 Subject: [PATCH 2/2] add pinning any column --- index.html | 513 ++++++++++++++++++++---------------------- responsive-tables.css | 15 +- responsive-tables.js | 33 ++- 3 files changed, 274 insertions(+), 287 deletions(-) diff --git a/index.html b/index.html index 629568f..f9ed51c 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,4 @@ - @@ -7,10 +6,7 @@ - - - Responsive Tables by ZURB @@ -25,278 +21,269 @@ - - - - - + + + - - - -
+ +
-
-
-

Responsive Tables

-

A CSS/JS solution for tables that allows them to shrink on small devices without sacrificing the value of tables, comparison of columns.

- -

Our solution for responsive tables requires two included files (both linked on this page): responsive-tables.css and responsive-tables.js.

-

The JS will help us create some new elements on small devices, so we don't have to modify our table markup on the page. The CSS applies the requisite positioning and overflow styles to make the new elements work.

- 
-/* Attach the Table CSS and Javascript */
-<link rel="stylesheet" href="responsive-tables.css">
-<script src="stylesheet" href="responsive-tables.js"</script>
- -
- -
Small Word Table
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+
+

Responsive Tables

+

A CSS/JS solution for tables that allows them to shrink on small devices without sacrificing the value of tables, comparison of columns.

+ +

Our solution for responsive tables requires two included files (both linked on this page): responsive-tables.css and responsive-tables.js.

+

The JS will help us create some new elements on small devices, so we don't have to modify our table markup on the page. The CSS applies the requisite positioning and overflow styles to make the new elements work.

+

You can click on headers to pin different columns.

+ 
+          /* Attach the Table CSS and Javascript */
+          <link rel="stylesheet" href="responsive-tables.css">
+          <script src="stylesheet" href="responsive-tables.js"</script>
+
+ +
+ +
Small Word Table
+
Header 1Header 2Header 3Header 4Header 5Header 6Header 7Header 8
row 1, cell 1row 1, cell 2row 1, cell 3row 1, cell 4row 1, cell 5row 1, cell 6row 1, cell 7row 1, cell 8
row 2, cell 1row 2, cell 2row 2, cell 3row 2, cell 4row 2, cell 5row 2, cell 6row 2, cell 7row 2, cell 8
row 3, cell 1row 3, cell 2row 3, cell 3row 3, cell 4row 3, cell 5row 3, cell 6row 3, cell 7row 3, cell 8
row 4, cell 1row 4, cell 2row 4, cell 3row 4, cell 4row 4, cell 5row 4, cell 6row 4, cell 7row 4, cell 8
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Header 1Header 2Header 3Header 4Header 5Header 6Header 7Header 8
row 1, cell 1row 1, cell 2row 1, cell 3row 1, cell 4row 1, cell 5row 1, cell 6row 1, cell 7row 1, cell 8
row 2, cell 1row 2, cell 2row 2, cell 3row 2, cell 4row 2, cell 5row 2, cell 6row 2, cell 7row 2, cell 8
row 3, cell 1row 3, cell 2row 3, cell 3row 3, cell 4row 3, cell 5row 3, cell 6row 3, cell 7row 3, cell 8
row 4, cell 1row 4, cell 2row 4, cell 3row 4, cell 4row 4, cell 5row 4, cell 6row 4, cell 7row 4, cell 8
-
-

In most cases, tables like this are okay at smaller sizes (since they'll break on every small word). However, with this many columns a very small device like a phone would still be a problem.

-
-
-

By attaching a class of .responsive to the table, our JS/CSS will kick in.

-
-
- - 
-/* Put the responsive class on the table */
-<table class="responsive">
-  <tr> …
-
+
+

In most cases, tables like this are okay at smaller sizes (since they'll break on every small word). However, with this many columns a very small device like a phone would still be a problem.

+
+
+

By attaching a class of .responsive to the table, our JS/CSS will kick in.

+
+
+ + 
+          /* Put the responsive class on the table */
+          <table class="responsive">
+            <tr> …
+
- -
- -
Larger Content Table
+
+ +
Larger Content Table
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PerkDescriptionIDSkill ReqPerk Req
Steel SmithingCan create Steel armor and weapons at forges, and improve them twice as much.000cb40d
Arcane BlacksmithYou can improve magical weapons and armor.0005218e60 SmithingSteel Smithing
Dwarven SmithingCan create Dwarven armor and weapons at forges, and improve them twice as much.000cb40e30 SmithingSteel Smithing
Orcish SmithingCan create Orcish armor and weapons at forges, and improve them twice as much.000cb41050 SmithingDwarven Smithing
Ebony SmithingCan create Ebony armor and weapons at forges, and improve them twice as much.000cb41280 SmithingOrcish Smithing
Daedric SmithingCan create Daedric armor and weapons at forges, and improve them twice as much.000cb41390 SmithingEbony Smithing
Elven SmithingCan create Elven armor and weapons at forges, and improve them twice as much.000cb40f30 SmithingSteel Smithing
Advanced ArmorsCan create Scaled and Plate armor at forges, and improve them twice as much. - 000cb41450 SmithingElven Smithing
Glass SmithingCan create Glass armor and weapons at forges, and improve them twice as much.000cb41170 SmithingAdvanced Armors
Dragon ArmorCan create Dragon armor at forges, and improve them twice as much.00052190100 SmithingDaedric Smithing or Glass Smithing
- -
-
-

The effect is even more pronounced on a table like this one, where we detail how to craft different armor types in Skyrim (we're nerds, okay).

-
-
-

Notice on a small device how we maintain the left column when it has so much content.

-
-
- -
- -
Very Long 1st Cell Content
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Header 1Header 2Header 3Header 4Header 5Header 6Header 7Header 8
Ham pork leberkas bresaola, brisket t-bone filet mignon hamburger salami andouille short loin sausage.row 1, cell 2row 1, cell 3row 1, cell 4row 1, cell 5row 1, cell 6row 1, cell 7row 1, cell 8
Ham pork leberkas bresaola, brisket t-bone filet mignon hamburger salami andouille short loin sausage.row 2, cell 2row 2, cell 3row 2, cell 4row 2, cell 5row 2, cell 6row 2, cell 7row 2, cell 8
Ham pork leberkas bresaola, brisket t-bone filet mignon hamburger salami andouille short loin sausage.row 3, cell 2row 3, cell 3row 3, cell 4row 3, cell 5row 3, cell 6row 3, cell 7row 3, cell 8
Ham pork leberkas bresaola, brisket t-bone filet mignon hamburger salami andouille short loin sausage.row 4, cell 2row 4, cell 3row 4, cell 4row 4, cell 5row 4, cell 6row 4, cell 7row 4, cell 8
-
-
-

Finally, in this example you'll see how this works for very long first-cell content. Both the first cell and the remaining cells are independently scrollable on small devices.

-
-
-

We do this so we can correctly predict the height of the cells for both the pinned columns and the rest of the columns.

-
-
-
- - - -
- - + + + Perk + Description + ID + Skill Req + Perk Req + + + Steel Smithing + Can create Steel armor and weapons at forges, and improve them twice as much. + 000cb40d + + + + + Arcane Blacksmith + You can improve magical weapons and armor. + 0005218e + 60 Smithing + Steel Smithing + + + Dwarven Smithing + Can create Dwarven armor and weapons at forges, and improve them twice as much. + 000cb40e + 30 Smithing + Steel Smithing + + + Orcish Smithing + Can create Orcish armor and weapons at forges, and improve them twice as much. + 000cb410 + 50 Smithing + Dwarven Smithing + + + Ebony Smithing + Can create Ebony armor and weapons at forges, and improve them twice as much. + 000cb412 + 80 Smithing + Orcish Smithing + + + Daedric Smithing + Can create Daedric armor and weapons at forges, and improve them twice as much. + 000cb413 + 90 Smithing + Ebony Smithing + + + Elven Smithing + Can create Elven armor and weapons at forges, and improve them twice as much. + 000cb40f + 30 Smithing + Steel Smithing + + + Advanced Armors + Can create Scaled and Plate armor at forges, and improve them twice as much. + 000cb414 + 50 Smithing + Elven Smithing + + + Glass Smithing + Can create Glass armor and weapons at forges, and improve them twice as much. + 000cb411 + 70 Smithing + Advanced Armors + + + Dragon Armor + Can create Dragon armor at forges, and improve them twice as much. + 00052190 + 100 Smithing + Daedric Smithing or Glass Smithing + + + + +
+
+

The effect is even more pronounced on a table like this one, where we detail how to craft different armor types in Skyrim (we're nerds, okay).

+
+
+

Notice on a small device how we maintain the left column when it has so much content.

+
+
+ +
+ +
Very Long 1st Cell Content
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Header 1Header 2Header 3Header 4Header 5Header 6Header 7Header 8
Ham pork leberkas bresaola, brisket t-bone filet mignon hamburger salami andouille short loin sausage.row 1, cell 2row 1, cell 3row 1, cell 4row 1, cell 5row 1, cell 6row 1, cell 7row 1, cell 8
Ham pork leberkas bresaola, brisket t-bone filet mignon hamburger salami andouille short loin sausage.row 2, cell 2row 2, cell 3row 2, cell 4row 2, cell 5row 2, cell 6row 2, cell 7row 2, cell 8
Ham pork leberkas bresaola, brisket t-bone filet mignon hamburger salami andouille short loin sausage.row 3, cell 2row 3, cell 3row 3, cell 4row 3, cell 5row 3, cell 6row 3, cell 7row 3, cell 8
Ham pork leberkas bresaola, brisket t-bone filet mignon hamburger salami andouille short loin sausage.row 4, cell 2row 4, cell 3row 4, cell 4row 4, cell 5row 4, cell 6row 4, cell 7row 4, cell 8
+
+
+

Finally, in this example you'll see how this works for very long first-cell content. Both the first cell and the remaining cells are independently scrollable on small devices.

+
+
+

We do this so we can correctly predict the height of the cells for both the pinned columns and the rest of the columns.

+
+
+
+
diff --git a/responsive-tables.css b/responsive-tables.css index 4765406..95d8713 100644 --- a/responsive-tables.css +++ b/responsive-tables.css @@ -32,19 +32,6 @@ table td, table th { padding: 9px 10px; text-align: left; } div.table-wrapper div.scrollable { overflow: scroll; overflow-y: hidden; } table.responsive td, table.responsive th { position: relative; white-space: nowrap; overflow: hidden; } - table.responsive th:first-child, table.responsive td:first-child, table.responsive td:first-child, table.responsive.pinned td { display: none; } + table.responsive.pinned td { display: none; } } - -/* ----------------------------------------- - Page Name 1 ------------------------------------------ */ - - - - -/* ----------------------------------------- - Page Name 2 ------------------------------------------ */ - - diff --git a/responsive-tables.js b/responsive-tables.js index 87a6760..88ef23a 100644 --- a/responsive-tables.js +++ b/responsive-tables.js @@ -2,35 +2,48 @@ $(document).ready(function() { var switched = false; function updateTables() { - var fixTable; + var $t = $('table.responsive'); if (($(window).width() < 767) && !switched) { switched = true; - fixTable = splitTable; + $t.each(function(i, element) { + splitTable($(element), ':first-child'); + }); } else if (switched && ($(window).width() > 767)) { switched = false; - fixTable = unsplitTable; + $t.each(function(i, element) { + unsplitTable($(element)); + }); } - $('table.responsive').each(function(i, element) { - fixTable($(element)); - }); }; $(window).load(updateTables).bind('resize', updateTables); - function splitTable(original) { + function splitTable(original, selector) { original.wrap('
'); var copy = original.clone(); - copy.removeClass('responsive').find('td:not(:first-child), th:not(:first-child)').css('display', 'none'); + copy.removeClass('responsive').find('td:not('+selector+'), th:not('+selector+')').hide(); + original.find('td, th').show().filter(selector).hide(); original.closest('.table-wrapper').append(copy); copy.wrap('
'); - original.wrap('
'); + var ths = original.wrap('
').find('th'); + ths.click(function() { + var n; + for (var i = 0, l = ths.length; i <= l; i++) { + if (ths[i] == this) n = i + 1; + } + unsplitTable(original); + var copy = splitTable(original, ':nth-child('+n+')'); + var offset = original.find('th:nth-child('+(n+1)+')').position().left - copy.width(); + original.closest('.scrollable').animate({scrollLeft: offset}); + }); + return copy; } function unsplitTable(original) { original.closest('.table-wrapper').find('.pinned').remove(); original.unwrap(); - original.unwrap(); + original.unwrap().find('td, th').show(); } });