From 206e4e0ef38cd41badd3ffcc4214977865a3d4ff Mon Sep 17 00:00:00 2001 From: Tommy Klumker Date: Thu, 17 Mar 2011 12:16:10 -0700 Subject: [PATCH 1/2] Added initialization parameter to scroll pane to a certain point when created. --- jquery.scroll.js | 46 +++++++++++++++++++++++++--------------------- 1 file changed, 25 insertions(+), 21 deletions(-) diff --git a/jquery.scroll.js b/jquery.scroll.js index 26d0308..b91b8c2 100644 --- a/jquery.scroll.js +++ b/jquery.scroll.js @@ -34,21 +34,21 @@ * | | | +------+ | * | | | | +--+ | | * | | | | | | | | - * | | |  | | <-------------- handle - * | | |  | | | | | - * | | |  | | | | | - * | | |  | | | | | - * | | |  | +--+ | | - * | | |  | | | - * | | |  | <-------------- handle container - * | | |  | | | + * | | | | | <-------------- handle + * | | | | | | | | + * | | | | | | | | + * | | | | | | | | + * | | | | +--+ | | + * | | | | | | + * | | | | <-------------- handle container + * | | | | | | * | | <----------------------------- pane - * | | |  | | | - * | | |  | | | - * | | |  +------+ | - * | | |  | | | - * | | |  | <-------------- handle arrow down - * | +-----------------+  +------+ | + * | | | | | | + * | | | | | | + * | | | +------+ | + * | | | | | | + * | | | | <-------------- handle arrow down + * | +-----------------+ +------+ | * | | * +----------------------------------| * @@ -119,7 +119,8 @@ scrollStep: 20, // handle increment between two mousedowns on arrows [px] scrollSpeedArrows: 40, // speed of handle while mousedown within the handle container [milli sec] - scrollStepArrows: 3 // handle increment between two mousedowns within the handle container [px] + scrollStepArrows: 3, // handle increment between two mousedowns within the handle container [px] + scrollTop: 0 }; @@ -180,7 +181,7 @@ // save height of container to re-set it after some DOM manipulations var height = this.container.height(); - + // set scrollbar-object properties this.pane = this.container.find('.scrollbar-pane'); this.handle = this.container.find('.scrollbar-handle'); @@ -188,17 +189,20 @@ this.handleArrows = this.container.find('.scrollbar-handle-up, .scrollbar-handle-down'); this.handleArrowUp = this.container.find('.scrollbar-handle-up'); this.handleArrowDown = this.container.find('.scrollbar-handle-down'); + + var paneHeight = this.pane.height() + this.handleInitTop = (this.opts.scrollTop/paneHeight)*height+this.handleContainer.height() // set some default CSS attributes (may be overwritten by CSS definitions in an external CSS file) this.pane.defaultCss({ - 'top': 0, + 'top': this.opts.scrollTop*-1, 'left': 0 }); this.handleContainer.defaultCss({ 'right': 0 }); this.handle.defaultCss({ - 'top': 0, + 'top': this.handleInitTop, 'right': 0 }); this.handleArrows.defaultCss({ @@ -242,6 +246,7 @@ // calculate positions and dimensions of handle and arrow-handles // initHandle: function(){ + this.props.handleContainerHeight = this.handleContainer.height(); this.props.contentHeight = this.pane.height(); @@ -262,7 +267,7 @@ this.props.handleContentRatio = (this.props.contentHeight - this.props.containerHeight) / (this.props.handleContainerHeight - this.props.handleHeight); // initial position of handle at top - this.handle.top = 0; + this.handle.top = this.handleInitTop; }, @@ -313,7 +318,6 @@ startOfHandleMove: function(ev){ ev.preventDefault(); ev.stopPropagation(); - // set start position of mouse this.mouse.start = this.mousePosition(ev); @@ -617,4 +621,4 @@ return $.event.handle.apply(this, args); }; -})(jQuery, document); // inject global jQuery object +})(jQuery, document); // inject global jQuery object \ No newline at end of file From 52ed2f20dd606882392fa1b1809d1eafbc21380f Mon Sep 17 00:00:00 2001 From: Tommy Klumker Date: Thu, 17 Mar 2011 14:57:59 -0700 Subject: [PATCH 2/2] Updated script to handle when scrolltop is sent to a point beyond the bottom of the scroll pane. --- jquery.scroll.js | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/jquery.scroll.js b/jquery.scroll.js index b91b8c2..106505f 100644 --- a/jquery.scroll.js +++ b/jquery.scroll.js @@ -190,19 +190,18 @@ this.handleArrowUp = this.container.find('.scrollbar-handle-up'); this.handleArrowDown = this.container.find('.scrollbar-handle-down'); - var paneHeight = this.pane.height() - this.handleInitTop = (this.opts.scrollTop/paneHeight)*height+this.handleContainer.height() + // set some default CSS attributes (may be overwritten by CSS definitions in an external CSS file) this.pane.defaultCss({ - 'top': this.opts.scrollTop*-1, + 'top': 0, 'left': 0 }); this.handleContainer.defaultCss({ 'right': 0 }); this.handle.defaultCss({ - 'top': this.handleInitTop, + 'top': 0, 'right': 0 }); this.handleArrows.defaultCss({ @@ -249,6 +248,8 @@ this.props.handleContainerHeight = this.handleContainer.height(); this.props.contentHeight = this.pane.height(); + + var startPct = this.opts.scrollTop/(this.pane.height()-this.container.height()) // height of handle this.props.handleHeight = this.opts.handleHeight == 'auto' ? Math.max(Math.ceil(this.props.containerHeight * this.props.handleContainerHeight / this.props.contentHeight), this.opts.handleMinHeight) : this.opts.handleHeight; @@ -262,12 +263,17 @@ min: 0, max: this.props.handleContainerHeight - this.props.handleHeight }; + + var handleInitTop = startPct <= 1 ? this.props.handleTop.max*startPct : this.props.handleTop.max // ratio of handle-container-height to content-container-height (to calculate position of content related to position of handle) this.props.handleContentRatio = (this.props.contentHeight - this.props.containerHeight) / (this.props.handleContainerHeight - this.props.handleHeight); // initial position of handle at top - this.handle.top = this.handleInitTop; + this.handle.top = handleInitTop; + + this.setHandlePosition() + this.setContentPosition() }, @@ -387,6 +393,7 @@ this.pane.top = -1 * this.props.handleContentRatio * this.handle.top; this.pane[0].style.top = this.pane.top + 'px'; + },