From 6b2db42a737fe7104c8f6ee7ea66744fcf94561d Mon Sep 17 00:00:00 2001 From: Mottie Date: Mon, 5 May 2014 13:25:37 -0500 Subject: [PATCH] cssStickyHeader: add filteredToTop option --- docs/example-widget-css-sticky-header.html | 37 ++++++++++++++++------ docs/index.html | 2 +- js/widgets/widget-cssStickyHeaders.js | 17 ++++++---- 3 files changed, 39 insertions(+), 17 deletions(-) diff --git a/docs/example-widget-css-sticky-header.html b/docs/example-widget-css-sticky-header.html index c4a01f5a..6eb53de9 100644 --- a/docs/example-widget-css-sticky-header.html +++ b/docs/example-widget-css-sticky-header.html @@ -8,6 +8,8 @@ + + @@ -48,9 +50,11 @@ widgets: [ 'uitheme', 'zebra', 'cssStickyHeaders', 'filter' ], widgetOptions: { - cssStickyHeaders_offset : 0, - cssStickyHeaders_addCaption : true, - cssStickyHeaders_attachTo : null + cssStickyHeaders_offset : 0, + cssStickyHeaders_addCaption : true, + cssStickyHeaders_attachTo : null, + cssStickyHeaders_filteredToTop : true, + cssStickyHeaders_zIndex : 10 } }; @@ -102,21 +106,36 @@ $(function() {
-

- NOTE! +

+
+ +
+ +

Notes

+
  • This demo uses the CSS Sticky Headers widget which uses CSS transforms to reposition the table head.
  • CSS transforms are supported by most modern browsers (not IE8 and older).
    • +
  • The jQuery UI themed table does not stick to the top of the page due to the extra padding. Adjust the cssStickyHeaders_offset option as desired. I didn't bother in this demo because it includes more than just the jQuery UI theme.
    • +
  • This widget will not work with the original tablesorter, but works optimally with tablesorter v2.8+ (Added v2.14.2; Updated v2.14.4)
    • +
+
+ +

Change log

+
+
    +
  • In v2.16.4, added the cssStickyHeaders_filteredToTop option. When true the table top will scroll into view after being filtered. This is done because if the sticky header is active, and a filter results in say only one row, the table will scroll up out of the browser viewport. If setn to false, no scrolling is done.
  • In v2.14.4:
    • Added cssStickyHeaders_attachTo (default set to null). Setting this option with either a jQuery selector string (".wrapper") or jQuery object ($(".wrapper")) to attach the sticky header to this element - see the second example below.
    • Removed cssStickyHeaders_offsetX option & renamed cssStickyHeaders_offsetY to cssStickyHeaders_offset as the horizontal offset is not required.
      • -
    +

-
  • The jQuery UI themed table does not stick to the top of the page due to the extra padding. Adjust the cssStickyHeaders_offset option as desired. I didn't bother in this demo because it includes more than just the jQuery UI theme.
    • -
  • This widget will not work with the original tablesorter, but works optimally with tablesorter v2.8+ (Added v2.14.2; Updated v2.14.4)
    • -

    +
    + +
    +

    CSS

    diff --git a/docs/index.html b/docs/index.html index 8635cf89..1e018551 100644 --- a/docs/index.html +++ b/docs/index.html @@ -498,7 +498,7 @@
  • Scroller widget (v2.9; v2.16.2).
  • Beta StaticRow widget (v2.16).
  • † Sticky header widget (v2.0.21.1; v2.16.2)
    • -
  • Sticky header (css3) widget (v2.14.2; v2.16).
    • +
  • Sticky header (css3) widget (v2.14.2; v2.16.4).
  • † UITheme widget (v2.16.2):
    • jQuery UI theme (v2.0.9)
      • diff --git a/js/widgets/widget-cssStickyHeaders.js b/js/widgets/widget-cssStickyHeaders.js index b616670a..27f5f510 100644 --- a/js/widgets/widget-cssStickyHeaders.js +++ b/js/widgets/widget-cssStickyHeaders.js @@ -1,4 +1,4 @@ -/*! tablesorter CSS Sticky Headers widget - updated 12/17/2013 (v2.15.0) +/*! tablesorter CSS Sticky Headers widget - updated 5/5/2014 (v2.16.4) * Requires a modern browser, tablesorter v2.8+ */ /*jshint jquery:true, unused:false */ @@ -9,10 +9,11 @@ id: "cssStickyHeaders", priority: 10, options: { - cssStickyHeaders_offset : 0, - cssStickyHeaders_addCaption : false, - cssStickyHeaders_attachTo : null, - cssStickyHeaders_zIndex : 10 + cssStickyHeaders_offset : 0, + cssStickyHeaders_addCaption : false, + cssStickyHeaders_attachTo : null, + cssStickyHeaders_filteredToTop : true, + cssStickyHeaders_zIndex : 10 }, init : function(table, thisWidget, c, wo) { var $attach = $(wo.cssStickyHeaders_attachTo), @@ -44,8 +45,10 @@ }); }); c.$table.bind('filterEnd', function() { - // scroll top of table into view - window.scrollTo(0, c.$table.position().top); + if (wo.cssStickyHeaders_filteredToTop) { + // scroll top of table into view + window.scrollTo(0, c.$table.position().top); + } }); },