diff options
| -rw-r--r-- | examples/example1-simple.html | 4 | ||||
| -rw-r--r-- | examples/example10-async-post-render.html | 1 | ||||
| -rw-r--r-- | examples/example11-autoheight.html | 1 | ||||
| -rw-r--r-- | examples/example12-fillbrowser.html | 1 | ||||
| -rw-r--r-- | examples/example2-formatters.html | 1 | ||||
| -rw-r--r-- | examples/example3-editing.html | 1 | ||||
| -rw-r--r-- | examples/example4-model.html | 1 | ||||
| -rw-r--r-- | examples/example5-collapsing.html | 1 | ||||
| -rw-r--r-- | examples/example6-ajax-loading.html | 1 | ||||
| -rw-r--r-- | examples/example7-events.html | 1 | ||||
| -rw-r--r-- | examples/example8-alternative-display.html | 1 | ||||
| -rw-r--r-- | examples/example9-row-reordering.html | 1 | ||||
| -rw-r--r-- | lib/jquery.getScrollbarWidth.js | 31 | ||||
| -rw-r--r-- | slick.grid.js | 35 | ||||
| -rw-r--r-- | tests/scrolling benchmarks.html | 1 |
15 files changed, 28 insertions, 54 deletions
diff --git a/examples/example1-simple.html b/examples/example1-simple.html index 2e05ae4..18e00f1 100644 --- a/examples/example1-simple.html +++ b/examples/example1-simple.html @@ -13,14 +13,10 @@ <script language="JavaScript" src="../lib/firebugx.js"></script> <script language="JavaScript" src="../lib/jquery-1.4.1.min.js"></script> <script language="JavaScript" src="../lib/jquery-ui-1.7.2.custom.min.js"></script> - <script language="JavaScript" src="../lib/jquery.getScrollbarWidth.js"></script> <script language="JavaScript" src="../lib/jquery.rule-1.0.1-min.js"></script> <script language="JavaScript" src="../lib/jquery.event.drag.custom.js"></script> - <script language="JavaScript" src="../slick.editors.js"></script> <script language="JavaScript" src="../slick.grid.js"></script> - <script language="JavaScript" src="../slick.globaleditorlock.js"></script> - <table width="100%"> <tr> diff --git a/examples/example10-async-post-render.html b/examples/example10-async-post-render.html index de1ef1c..09747cc 100644 --- a/examples/example10-async-post-render.html +++ b/examples/example10-async-post-render.html @@ -24,7 +24,6 @@ <script language="JavaScript" src="../lib/firebugx.js"></script> <script language="JavaScript" src="../lib/jquery-1.4.1.min.js"></script> <script language="JavaScript" src="../lib/jquery-ui-1.7.2.custom.min.js"></script> - <script language="JavaScript" src="../lib/jquery.getScrollbarWidth.js"></script> <script language="JavaScript" src="../lib/jquery.rule-1.0.1-min.js"></script> <script language="JavaScript" src="../lib/jquery.event.drag.custom.js"></script> <script language="JavaScript" src="../lib/jquery.sparkline.min.js"></script> diff --git a/examples/example11-autoheight.html b/examples/example11-autoheight.html index ae149de..790878d 100644 --- a/examples/example11-autoheight.html +++ b/examples/example11-autoheight.html @@ -24,7 +24,6 @@ <script language="JavaScript" src="../lib/jquery-1.4.1.min.js"></script> <script language="JavaScript" src="../lib/jquery-ui-1.7.2.custom.min.js"></script> - <script language="JavaScript" src="../lib/jquery.getScrollbarWidth.js"></script> <script language="JavaScript" src="../lib/jquery.rule-1.0.1-min.js"></script> <script language="JavaScript" src="../lib/jquery.event.drag.custom.js"></script> <script language="JavaScript" src="../slick.editors.js"></script> diff --git a/examples/example12-fillbrowser.html b/examples/example12-fillbrowser.html index e8cce7a..cc2b73c 100644 --- a/examples/example12-fillbrowser.html +++ b/examples/example12-fillbrowser.html @@ -27,7 +27,6 @@ <script language="JavaScript" src="../lib/jquery-1.4.1.min.js"></script> <script language="JavaScript" src="../lib/jquery-ui-1.7.2.custom.min.js"></script> - <script language="JavaScript" src="../lib/jquery.getScrollbarWidth.js"></script> <script language="JavaScript" src="../lib/jquery.rule-1.0.1-min.js"></script> <script language="JavaScript" src="../lib/jquery.event.drag.custom.js"></script> <script language="JavaScript" src="../slick.editors.js"></script> diff --git a/examples/example2-formatters.html b/examples/example2-formatters.html index c92eb64..cedea09 100644 --- a/examples/example2-formatters.html +++ b/examples/example2-formatters.html @@ -20,7 +20,6 @@ <script language="JavaScript" src="../lib/firebugx.js"></script> <script language="JavaScript" src="../lib/jquery-1.4.1.min.js"></script> <script language="JavaScript" src="../lib/jquery-ui-1.7.2.custom.min.js"></script> - <script language="JavaScript" src="../lib/jquery.getScrollbarWidth.js"></script> <script language="JavaScript" src="../lib/jquery.rule-1.0.1-min.js"></script> <script language="JavaScript" src="../lib/jquery.event.drag.custom.js"></script> diff --git a/examples/example3-editing.html b/examples/example3-editing.html index 91b8aac..ccbe2b3 100644 --- a/examples/example3-editing.html +++ b/examples/example3-editing.html @@ -20,7 +20,6 @@ <script language="JavaScript" src="../lib/firebugx.js"></script> <script language="JavaScript" src="../lib/jquery-1.4.1.min.js"></script> <script language="JavaScript" src="../lib/jquery-ui-1.7.2.custom.min.js"></script> - <script language="JavaScript" src="../lib/jquery.getScrollbarWidth.js"></script> <script language="JavaScript" src="../lib/jquery.rule-1.0.1-min.js"></script> <script language="JavaScript" src="../lib/jquery.event.drag.custom.js"></script> diff --git a/examples/example4-model.html b/examples/example4-model.html index 3c46c14..ca0f685 100644 --- a/examples/example4-model.html +++ b/examples/example4-model.html @@ -22,7 +22,6 @@ <script language="JavaScript" src="../lib/firebugx.js"></script> <script language="JavaScript" src="../lib/jquery-1.4.1.min.js"></script> <script language="JavaScript" src="../lib/jquery-ui-1.7.2.custom.min.js"></script> - <script language="JavaScript" src="../lib/jquery.getScrollbarWidth.js"></script> <script language="JavaScript" src="../lib/jquery.rule-1.0.1-min.js"></script> <script language="JavaScript" src="../lib/jquery.event.drag.custom.js"></script> diff --git a/examples/example5-collapsing.html b/examples/example5-collapsing.html index a8b9876..ee7140c 100644 --- a/examples/example5-collapsing.html +++ b/examples/example5-collapsing.html @@ -35,7 +35,6 @@ <script language="JavaScript" src="../lib/firebugx.js"></script> <script language="JavaScript" src="../lib/jquery-1.4.1.min.js"></script> <script language="JavaScript" src="../lib/jquery-ui-1.7.2.custom.min.js"></script> - <script language="JavaScript" src="../lib/jquery.getScrollbarWidth.js"></script> <script language="JavaScript" src="../lib/jquery.rule-1.0.1-min.js"></script> <script language="JavaScript" src="../lib/jquery.event.drag.custom.js"></script> diff --git a/examples/example6-ajax-loading.html b/examples/example6-ajax-loading.html index c56859b..e7b6b30 100644 --- a/examples/example6-ajax-loading.html +++ b/examples/example6-ajax-loading.html @@ -38,7 +38,6 @@ <script language="JavaScript" src="../lib/firebugx.js"></script> <script language="JavaScript" src="../lib/jquery-1.4.1.min.js"></script> <script language="JavaScript" src="../lib/jquery-ui-1.7.2.custom.min.js"></script> - <script language="JavaScript" src="../lib/jquery.getScrollbarWidth.js"></script> <script language="JavaScript" src="../lib/jquery.rule-1.0.1-min.js"></script> <script language="JavaScript" src="../lib/jquery.event.drag.custom.js"></script> <script language="JavaScript" src="../lib/jquery.jsonp-1.1.0.min.js"></script> diff --git a/examples/example7-events.html b/examples/example7-events.html index 37f466e..f8480d3 100644 --- a/examples/example7-events.html +++ b/examples/example7-events.html @@ -43,7 +43,6 @@ <script language="JavaScript" src="../lib/firebugx.js"></script> <script language="JavaScript" src="../lib/jquery-1.4.1.min.js"></script> <script language="JavaScript" src="../lib/jquery-ui-1.7.2.custom.min.js"></script> - <script language="JavaScript" src="../lib/jquery.getScrollbarWidth.js"></script> <script language="JavaScript" src="../lib/jquery.rule-1.0.1-min.js"></script> <script language="JavaScript" src="../lib/jquery.event.drag.custom.js"></script> diff --git a/examples/example8-alternative-display.html b/examples/example8-alternative-display.html index 573fa5a..efe80d3 100644 --- a/examples/example8-alternative-display.html +++ b/examples/example8-alternative-display.html @@ -62,7 +62,6 @@ <script language="JavaScript" src="../lib/firebugx.js"></script> <script language="JavaScript" src="../lib/jquery-1.4.1.min.js"></script> <script language="JavaScript" src="../lib/jquery-ui-1.7.2.custom.min.js"></script> - <script language="JavaScript" src="../lib/jquery.getScrollbarWidth.js"></script> <script language="JavaScript" src="../lib/jquery.rule-1.0.1-min.js"></script> <script language="JavaScript" src="../lib/jquery.event.drag.custom.js"></script> diff --git a/examples/example9-row-reordering.html b/examples/example9-row-reordering.html index a7ccd41..66eff99 100644 --- a/examples/example9-row-reordering.html +++ b/examples/example9-row-reordering.html @@ -25,7 +25,6 @@ <script language="JavaScript" src="../lib/firebugx.js"></script> <script language="JavaScript" src="../lib/jquery-1.4.1.min.js"></script> <script language="JavaScript" src="../lib/jquery-ui-1.7.2.custom.min.js"></script> - <script language="JavaScript" src="../lib/jquery.getScrollbarWidth.js"></script> <script language="JavaScript" src="../lib/jquery.rule-1.0.1-min.js"></script> <script language="JavaScript" src="../lib/jquery.event.drag.custom.js"></script> diff --git a/lib/jquery.getScrollbarWidth.js b/lib/jquery.getScrollbarWidth.js deleted file mode 100644 index 8ed4dd4..0000000 --- a/lib/jquery.getScrollbarWidth.js +++ /dev/null @@ -1,31 +0,0 @@ -/* Copyright (c) 2008 Brandon Aaron (brandon.aaron@gmail.com || http://brandonaaron.net) - * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) - * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. - */ - -/** - * Gets the width of the OS scrollbar - */ -(function($) { - var scrollbarWidth = 0; - $.getScrollbarWidth = function() { - if ( !scrollbarWidth ) { - if ( $.browser.msie ) { - var $textarea1 = $('<textarea cols="10" rows="2"></textarea>') - .css({ position: 'absolute', top: -1000, left: -1000 }).appendTo('body'), - $textarea2 = $('<textarea cols="10" rows="2" style="overflow: hidden;"></textarea>') - .css({ position: 'absolute', top: -1000, left: -1000 }).appendTo('body'); - scrollbarWidth = $textarea1.width() - $textarea2.width(); - $textarea1.add($textarea2).remove(); - } else { - var $div = $('<div />') - .css({ width: 100, height: 100, overflow: 'auto', position: 'absolute', top: -1000, left: -1000 }) - .prependTo('body').append('<div />').find('div') - .css({ width: '100%', height: 200 }); - scrollbarWidth = 100 - $div.width(); - $div.parent().remove(); - } - } - return scrollbarWidth; - }; -})(jQuery);
\ No newline at end of file diff --git a/slick.grid.js b/slick.grid.js index 5a6e0c6..98301f0 100644 --- a/slick.grid.js +++ b/slick.grid.js @@ -79,6 +79,8 @@ * */ (function() { + var scrollbarDimensions; // shared across all grids on this page + function SlickGrid($container,data,columns,options) { // settings var defaults = { @@ -167,7 +169,26 @@ ////////////////////////////////////////////////////////////////////////////////////////////// // Initialization + function measureScrollbar() { + /// <summary> + /// Measure width of a vertical scrollbar + /// and height of a horizontal scrollbar. + /// </summary + /// <returns> + /// { width: pixelWidth, height: pixelHeight } + /// </returns> + var $c = $("<div style='position:absolute; top:-10000px; left:-10000px; width:100px; height:100px; overflow:scroll;'></div>").appendTo("body"); + var dim = { width: $c.width() - $c[0].clientWidth, height: $c.height() - $c[0].clientHeight }; + $c.remove(); + return dim; + } + function init() { + /// <summary> + /// Initialize 'this' (self) instance of a SlickGrid. + /// This function is called by the constructor. + /// </summary> + scrollbarDimensions = scrollbarDimensions || measureScrollbar(); // skip measurement if already have dimensions options = $.extend({},defaults,options); columnDefaults.width = options.defaultColumnWidth; @@ -600,7 +621,7 @@ autosizeColumns = function autosizeColumnsFn(columnToHold) { var i, c, - availWidth = (options.autoHeight ? viewportW : viewportW - $.getScrollbarWidth()), // with AutoHeight, we do not need to accomodate the vertical scroll bar + availWidth = (options.autoHeight ? viewportW : viewportW - scrollbarDimensions.width), // with AutoHeight, we do not need to accomodate the vertical scroll bar total = 0, existingTotal = 0; @@ -883,9 +904,9 @@ $divMain.width(totalWidth); // browsers sometimes do not adjust scrollTop/scrollHeight when the height of contained objects changes - newHeight = Math.max(newHeight, viewportH - $.getScrollbarWidth()); - if ($divMainScroller.scrollTop() > newHeight - $divMainScroller.height() + $.getScrollbarWidth()) { - $divMainScroller.scrollTop(newHeight - $divMainScroller.height() + $.getScrollbarWidth()); + newHeight = Math.max(newHeight, viewportH - scrollbarDimensions.height); + if ($divMainScroller.scrollTop() > newHeight - $divMainScroller.height() + scrollbarDimensions.height) { + $divMainScroller.scrollTop(newHeight - $divMainScroller.height() + scrollbarDimensions.height); } $divMain.height(newHeight); @@ -903,11 +924,11 @@ } } - var newHeight = Math.max(options.rowHeight * (data.length + (options.enableAddRow?1:0) + (options.leaveSpaceForNewRows?numVisibleRows-1:0)), viewportH - $.getScrollbarWidth()); + var newHeight = Math.max(options.rowHeight * (data.length + (options.enableAddRow?1:0) + (options.leaveSpaceForNewRows?numVisibleRows-1:0)), viewportH - scrollbarDimensions.height); // browsers sometimes do not adjust scrollTop/scrollHeight when the height of contained objects changes - if ($divMainScroller.scrollTop() > newHeight - $divMainScroller.height() + $.getScrollbarWidth()) { - $divMainScroller.scrollTop(newHeight - $divMainScroller.height() + $.getScrollbarWidth()); + if ($divMainScroller.scrollTop() > newHeight - $divMainScroller.height() + scrollbarDimensions.height) { + $divMainScroller.scrollTop(newHeight - $divMainScroller.height() + scrollbarDimensions.height); } $divMain.height(newHeight); } diff --git a/tests/scrolling benchmarks.html b/tests/scrolling benchmarks.html index c54aa26..3b8a74a 100644 --- a/tests/scrolling benchmarks.html +++ b/tests/scrolling benchmarks.html @@ -20,7 +20,6 @@ <script language="JavaScript" src="../lib/firebugx.js"></script> <script language="JavaScript" src="../lib/jquery-1.4.1.min.js"></script> <script language="JavaScript" src="../lib/jquery-ui-1.7.2.custom.min.js"></script> - <script language="JavaScript" src="../lib/jquery.getScrollbarWidth.js"></script> <script language="JavaScript" src="../lib/jquery.rule-1.0.1-min.js"></script> <script language="JavaScript" src="../lib/jquery.event.drag.custom.js"></script> |