Added floating table header. Resolves #20

tinata · Feb 4, 2014 · b1cf62d · b1cf62d
1 parent 38c172c
commit b1cf62d
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 8 deletions.
diff --git a/public/js/jquery.floatThead.min.js b/public/js/jquery.floatThead.min.js
diff --git a/views/countries.ejs b/views/countries.ejs
@@ -229,11 +229,15 @@
         </div>
     </div>
 </div>
+<script src="/js/jquery.floatThead.min.js"></script>
 <script>
 function Controller($scope, $http) {
     $http.get('/countries.json').success(function(countries) {
-        // for (country in countries) {
-        //}
+        
+        // Don't use fixed table header on mobile devices (redraws badly due to conflict with JS for responsive tables)
+        if ($(window).width() > 767)
+            $('table').floatThead({ useAbsolutePositioning: false });
+            
         $('#loading').hide();
         $scope.countries = countries;
     });

diff --git a/views/layout.ejs b/views/layout.ejs
@@ -16,17 +16,12 @@
         <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
         <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
         <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
-	      <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
+        <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
         <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
         <!--[if lt IE 9]>
           <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
           <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
         <![endif]-->
-        <script>
-            $(document).ready(function (){
-			        $('table').floatThead(); //Enable floating table header (still needs script including)
-		        });
-	      </script>
     </head>
     <body>
         <div class="navbar navbar-default" role="navigation">