From 73f8084fed84f1fae0df38940a4be2ab6588b889 Mon Sep 17 00:00:00 2001 From: Tirumala Dilip Kumar Date: Thu, 10 Mar 2016 13:01:27 +0530 Subject: [PATCH 1/4] #Sticky Header to support cross browsers and added support for multiple TR in Thead --- lrStickyHeader.js | 33 +++++++++++++++++++++++++-------- 1 file changed, 25 insertions(+), 8 deletions(-) diff --git a/lrStickyHeader.js b/lrStickyHeader.js index fafac0d..f72a620 100644 --- a/lrStickyHeader.js +++ b/lrStickyHeader.js @@ -27,28 +27,45 @@ //todo some memoize stuff setWidth: function setWidth () { var firstRow = this.tbody.getElementsByTagName('TR')[0]; - var trh = this.thead.getElementsByTagName('TR')[0]; + var trLength = this.thead.getElementsByTagName('TR').length; + var trCollection=[]; + for(var i=0; i0){ + trTdCollection[j]=trCollection[j].getElementsByTagName('TD'); + }else if(elementByTH.length>0){ + trTdCollection[j]=trCollection[j].getElementsByTagName('TH'); + } + } [].forEach.call(firstTds, setCellWidth); - [].forEach.call(firstThs, setCellWidth); + for(var k=0;k 0)) { + if (this.stick === true && (this.treshold - scrollPosition > 0)) { this.stick = false; this.thead.style.position = 'initial'; classes.splice(classes.indexOf('lr-sticky-header'), 1); From 88814c2cc52307f745a638ee2c1862d451d46ad9 Mon Sep 17 00:00:00 2001 From: Tirumala Dilip Kumar Date: Tue, 15 Mar 2016 14:43:18 +0530 Subject: [PATCH 2/4] Updated README.md file --- README.md | 24 ++++++++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 60c30b9..6743178 100644 --- a/README.md +++ b/README.md @@ -47,16 +47,32 @@ when the header is sticked the class name ``lr-sticky-header`` is added to the t return { require: '^?stTable', link: function (scope, element, attr, ctrl) { - var stickyHeader = lrStickyHeader(element[0]); - scope.$on('$destroy', function () { - stickyHeader.clean(); - }); + var customTopVal = element[0].attributes[1].nodeValue; + var options = { + headerHeight:customTopVal + }; + //used settimeout such that it will support for mulitple smart tables it will wait until it finds element[0]. + setTimeout(function () { + var stickyHeader = lrStickyHeader(element[0], options); + scope.$on('$destroy', function () { + stickyHeader.clean(); + }); + },10); scope.$watch(function () { return ctrl.tableState(); }, function () { $window.scrollTo(0, lrStickyHeader.treshold); }, true) + + // The below give fix while resize window in all browsers + angular.element($window).on("resize", function(){ + //stickyHeader.clean(); + angular.element(element[0]).find('thead').removeAttr('style'); + angular.element(element[0]).find('thead').removeClass('lr-sticky-header'); + $window.scrollTo(0, lrStickyHeader.treshold); + var stickyHeader = lrStickyHeader(element[0], options); + }); } } }]); From 760f8cf70bbaf31a2a674d11e34d1a28d1c7827a Mon Sep 17 00:00:00 2001 From: Tirumala Dilip Kumar Date: Tue, 15 Mar 2016 15:23:39 +0530 Subject: [PATCH 3/4] Updated README.md --- README.md | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 6743178..2322216 100644 --- a/README.md +++ b/README.md @@ -46,14 +46,10 @@ when the header is sticked the class name ``lr-sticky-header`` is added to the t angular.directive('stStickyHeader', ['$window', function ($window) { return { require: '^?stTable', - link: function (scope, element, attr, ctrl) { - var customTopVal = element[0].attributes[1].nodeValue; - var options = { - headerHeight:customTopVal - }; + link: function (scope, element, attr, ctrl) { //used settimeout such that it will support for mulitple smart tables it will wait until it finds element[0]. setTimeout(function () { - var stickyHeader = lrStickyHeader(element[0], options); + var stickyHeader = lrStickyHeader(element[0], {headerHeight: attr.stStickyHeaderTop}); scope.$on('$destroy', function () { stickyHeader.clean(); }); @@ -65,13 +61,13 @@ when the header is sticked the class name ``lr-sticky-header`` is added to the t $window.scrollTo(0, lrStickyHeader.treshold); }, true) - // The below give fix while resize window in all browsers + // The below code is a fix for resize window in all browsers angular.element($window).on("resize", function(){ //stickyHeader.clean(); angular.element(element[0]).find('thead').removeAttr('style'); angular.element(element[0]).find('thead').removeClass('lr-sticky-header'); $window.scrollTo(0, lrStickyHeader.treshold); - var stickyHeader = lrStickyHeader(element[0], options); + var stickyHeader = lrStickyHeader(element[0], {headerHeight: attr.stStickyHeaderTop}); }); } } From ef5eb24fc9d3b1d0ad599f03a0dff578740eb6fe Mon Sep 17 00:00:00 2001 From: Tirumala Dilip Kumar Date: Fri, 1 Apr 2016 14:09:11 +0530 Subject: [PATCH 4/4] Adding whitespace for Tbody when Thead is fixed and change position to static for IE issue --- README.md | 5 +++-- lrStickyHeader.js | 13 ++++++++++++- 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 2322216..1259d10 100644 --- a/README.md +++ b/README.md @@ -48,8 +48,9 @@ when the header is sticked the class name ``lr-sticky-header`` is added to the t require: '^?stTable', link: function (scope, element, attr, ctrl) { //used settimeout such that it will support for mulitple smart tables it will wait until it finds element[0]. + //this is optional attributes which can be used for specific height and class{headerHeight: attr.stStickyHeaderTop,tBodyCls: attr.stStickyHeaderTbodyClass } setTimeout(function () { - var stickyHeader = lrStickyHeader(element[0], {headerHeight: attr.stStickyHeaderTop}); + var stickyHeader = lrStickyHeader(element[0], {headerHeight: attr.stStickyHeaderTop,tBodyCls: attr.stStickyHeaderTbodyClass }); scope.$on('$destroy', function () { stickyHeader.clean(); }); @@ -67,7 +68,7 @@ when the header is sticked the class name ``lr-sticky-header`` is added to the t angular.element(element[0]).find('thead').removeAttr('style'); angular.element(element[0]).find('thead').removeClass('lr-sticky-header'); $window.scrollTo(0, lrStickyHeader.treshold); - var stickyHeader = lrStickyHeader(element[0], {headerHeight: attr.stStickyHeaderTop}); + var stickyHeader = lrStickyHeader(element[0], {headerHeight: attr.stStickyHeaderTop,tBodyCls: attr.stStickyHeaderTbodyClass }); }); } } diff --git a/lrStickyHeader.js b/lrStickyHeader.js index f72a620..9b8e06f 100644 --- a/lrStickyHeader.js +++ b/lrStickyHeader.js @@ -71,6 +71,7 @@ this.setWidth(); this.thead.style.left = offsetLeft + 'px'; this.thead.style.top = Number(this.headerHeight) + 'px'; + this.tbody.className = this.tBodyCls; setTimeout(function () { classes.push('lr-sticky-header'); this.thead.style.position = 'fixed'; @@ -80,7 +81,8 @@ if (this.stick === true && (this.treshold - scrollPosition > 0)) { this.stick = false; - this.thead.style.position = 'initial'; + this.tbody.className = ''; + this.thead.style.position = 'static'; classes.splice(classes.indexOf('lr-sticky-header'), 1); this.thead.className = (classes).join(' '); } @@ -89,8 +91,12 @@ return function lrStickyHeader (tableElement, options) { var headerHeight = 0; + var tBodyCls = ''; if (options&&options.headerHeight) headerHeight=options.headerHeight; + + if (options&&options.tBodyCls) + tBodyCls = options.tBodyCls; var thead; var tbody; @@ -129,6 +135,11 @@ get: function () { return tbody; } + }, + tBodyCls: { + get: function() { + return tBodyCls; + } } });