diff --git a/src/fsm-sticky-header.js b/src/fsm-sticky-header.js index 584d5bf..ab60270 100644 --- a/src/fsm-sticky-header.js +++ b/src/fsm-sticky-header.js @@ -3,7 +3,7 @@ (function(angular){ var fsm = angular.module('fsm', []); - fsm.directive('fsmStickyHeader', [function(){ + fsm.directive('fsmStickyHeader', ["$timeout", function($timeout){ return { restrict: 'EA', replace: false, @@ -14,96 +14,99 @@ contentOffset: '=' }, link: function(scope, element, attributes, control){ - var header = $(element, this); - var clonedHeader = null; - var content = $(scope.scrollBody); - var scrollableContainer = $(scope.scrollableContainer); - var contentOffset = scope.contentOffset || 0; + var self = this; + $timeout(function() { + var header = $(element, self); + var clonedHeader = null; + var content = $(scope.scrollBody); + var scrollableContainer = $(scope.scrollableContainer); + var contentOffset = scope.contentOffset || 0; - if (scrollableContainer.length === 0){ - scrollableContainer = $(window); - } - - function setColumnHeaderSizes() { - if (clonedHeader.is('tr') || clonedHeader.is('thead')) { - var clonedColumns = clonedHeader.find('th'); - header.find('th').each(function (index, column) { - var clonedColumn = $(clonedColumns[index]); - clonedColumn.css( 'width', column.offsetWidth + 'px'); - }); + if (scrollableContainer.length === 0){ + scrollableContainer = $(window); } - }; - - function determineVisibility(){ - var scrollTop = scrollableContainer.scrollTop() + scope.scrollStop; - var contentTop = content.offset().top + contentOffset; - var contentBottom = contentTop + content.outerHeight(false); - if ( (scrollTop > contentTop) && (scrollTop < contentBottom) ) { - if (!clonedHeader){ - createClone(); - clonedHeader.css({ "visibility": "visible"}); + function setColumnHeaderSizes() { + if (clonedHeader.is('tr') || clonedHeader.is('thead')) { + var clonedColumns = clonedHeader.find('th'); + header.find('th').each(function (index, column) { + var clonedColumn = $(clonedColumns[index]); + clonedColumn.css( 'width', column.offsetWidth + 'px'); + }); } - - if ( scrollTop < contentBottom && scrollTop > contentBottom - clonedHeader.outerHeight(false) ){ - var top = contentBottom - scrollTop + scope.scrollStop - clonedHeader.outerHeight(false); - clonedHeader.css('top', top + 'px'); + }; + + function determineVisibility(){ + var scrollTop = scrollableContainer.scrollTop() + scope.scrollStop; + var contentTop = content.offset().top + contentOffset; + var contentBottom = contentTop + content.outerHeight(false); + + if ( (scrollTop > contentTop) && (scrollTop < contentBottom) ) { + if (!clonedHeader){ + createClone(); + clonedHeader.css({ "visibility": "visible"}); + } + + if ( scrollTop < contentBottom && scrollTop > contentBottom - clonedHeader.outerHeight(false) ){ + var top = contentBottom - scrollTop + scope.scrollStop - clonedHeader.outerHeight(false); + clonedHeader.css('top', top + 'px'); + } else { + calculateSize(); + } } else { - calculateSize(); - } - } else { - if (clonedHeader){ - /* - * remove cloned element (switched places with original on creation) - */ - header.remove(); - header = clonedHeader; - clonedHeader = null; - - header.removeClass('fsm-sticky-header'); - header.css({ - position: 'relative', - left: 0, - top: 0, - width: 'auto', - 'z-index': 0, - visibility: 'visible' - }); + if (clonedHeader){ + /* + * remove cloned element (switched places with original on creation) + */ + header.remove(); + header = clonedHeader; + clonedHeader = null; + + header.removeClass('fsm-sticky-header'); + header.css({ + position: 'relative', + left: 0, + top: 0, + width: 'auto', + 'z-index': 0, + visibility: 'visible' + }); + } } - } - }; + }; - function calculateSize() { - clonedHeader.css({ - top: scope.scrollStop, - width: header.outerWidth(), - left: header.offset().left - }); + function calculateSize() { + clonedHeader.css({ + top: scope.scrollStop, + width: header.outerWidth(), + left: header.offset().left + }); - setColumnHeaderSizes(); - }; - - function createClone(){ - /* - * switch place with cloned element, to keep binding intact - */ - clonedHeader = header; - header = clonedHeader.clone(); - clonedHeader.after(header); - clonedHeader.addClass('fsm-sticky-header'); - clonedHeader.css({ - position: 'fixed', - 'z-index': 10000, - visibility: 'hidden' - }); - calculateSize(); - }; + setColumnHeaderSizes(); + }; + + function createClone(){ + /* + * switch place with cloned element, to keep binding intact + */ + clonedHeader = header; + header = clonedHeader.clone(); + clonedHeader.after(header); + clonedHeader.addClass('fsm-sticky-header'); + clonedHeader.css({ + position: 'fixed', + 'z-index': 10000, + visibility: 'hidden' + }); + calculateSize(); + }; - scrollableContainer.on('scroll.fsmStickyHeader', determineVisibility).trigger("scroll"); - scrollableContainer.on('resize.fsmStickyHeader', determineVisibility); + scrollableContainer.on('scroll.fsmStickyHeader', determineVisibility).trigger("scroll"); + scrollableContainer.on('resize.fsmStickyHeader', determineVisibility); - scope.$on('$destroy', function() { - scrollableContainer.off('.fsmStickyHeader'); + scope.$on('$destroy', function() { + scrollableContainer.off('.fsmStickyHeader'); + }); }); } };