diff options
| -rwxr-xr-x | templates/web/base/reports/index.html | 7 | ||||
| -rw-r--r-- | web/cobrands/sass/_base.scss | 1 | ||||
| -rw-r--r-- | web/cobrands/sass/_fixedthead.scss | 4 | ||||
| -rw-r--r-- | web/js/jquery.fixedthead.js | 81 |
4 files changed, 93 insertions, 0 deletions
diff --git a/templates/web/base/reports/index.html b/templates/web/base/reports/index.html index 7f8d7fbf6..837d99271 100755 --- a/templates/web/base/reports/index.html +++ b/templates/web/base/reports/index.html @@ -44,4 +44,11 @@ </tbody> </table> +<script type="text/javascript" src="[% version('/js/jquery.fixedthead.js') %]"></script> +<script type="text/javascript"> +$(function(){ + $('.nicetable thead').fixedThead(); +}); +</script> + [% INCLUDE 'footer.html', pagefooter = 'yes' %] diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss index 98e032598..8f6efe51e 100644 --- a/web/cobrands/sass/_base.scss +++ b/web/cobrands/sass/_base.scss @@ -1631,3 +1631,4 @@ table.nicetable { } @import "_admin"; +@import "_fixedthead"; diff --git a/web/cobrands/sass/_fixedthead.scss b/web/cobrands/sass/_fixedthead.scss new file mode 100644 index 000000000..c1896e5d8 --- /dev/null +++ b/web/cobrands/sass/_fixedthead.scss @@ -0,0 +1,4 @@ +.js-fixed-thead__clone { + position: fixed; + background: #fff; +}
\ No newline at end of file diff --git a/web/js/jquery.fixedthead.js b/web/js/jquery.fixedthead.js new file mode 100644 index 000000000..33e60f721 --- /dev/null +++ b/web/js/jquery.fixedthead.js @@ -0,0 +1,81 @@ +/* + * jQuery.fixedThead.js + * By Zarino at mySociety + */ + +(function ($) { + + // Call this on a <thead> element and it'll be given a class + // of '.js-fixed-thead__clone' when you scroll down. eg: + // $('#my-table thead').fixedThead() + // + // You'll probably want to specify some CSS styles like: + // .js-fixed-thead__clone { position: fixed; background: #fff; } + + $.fn.fixedThead = function() { + + var calculateCloneDimensions = function calculateCloneDimensions($originalThead, $cloneThead){ + $cloneThead.css({ + width: $originalThead.width() + }); + + $('tr', $originalThead).each(function(tr_index, tr){ + $('th', tr).each(function(th_index, th){ + $cloneThead.find('tr:eq(' + tr_index + ') th:eq(' + th_index + ')').css({ + width: $(th).width() + }); + }); + }); + } + + var showOrHideClone = function showOrHideClone($table, $originalThead, $cloneThead){ + var bounds = $table[0].getBoundingClientRect(); + + // First we detect whether *any* of the table is visible, + // then, if it is, we position the fixed thead so that it + // never extends outside of the table bounds even when the + // visible portion of the table is shorter than the thead. + + if(bounds.top <= 0 && bounds.bottom >= 0){ + $cloneThead.css('display', $originalThead.css('display')); + + var rowHeight = $cloneThead.outerHeight(); + if(bounds.bottom < rowHeight){ + $cloneThead.css({ + top: (rowHeight - bounds.bottom) * -1 + }); + } else { + $cloneThead.css({ + top: 0 + }); + } + + } else { + $cloneThead.css('display', 'none'); + } + } + + return this.each(function() { + var $originalThead = $(this); + var $table = $originalThead.parent('table'); + var $cloneThead = $originalThead.clone().addClass('js-fixed-thead__clone'); + + $cloneThead.insertAfter($originalThead); + $cloneThead.css('display', 'none'); + + calculateCloneDimensions($originalThead, $cloneThead); + showOrHideClone($table, $originalThead, $cloneThead); + + $(window).resize(function(){ + calculateCloneDimensions($originalThead, $cloneThead); + showOrHideClone($table, $originalThead, $cloneThead); + }); + + $(window).scroll(function(){ + showOrHideClone($table, $originalThead, $cloneThead); + }); + }); + + }; + +}(jQuery)); |