jscheuer1

Adds altScrollTo method to scroll to coordinates, element, or keyword position in the scroller. Adds optional callback for real time updates of the scroller's position. Fixes behavior of bi-directional scrollers in IE 8 and less. Now compatible to and including IE 6. Adds automatic console logging of missing helper scripts in browsers with console logging. Instates selector element return value for normal jQuery chaining of methods. Alters the mouseout behavior for default style scrollers to avoid jumpiness when still dragging a scrollbar. Jun/18/13 adds option to have the mouse control horizontal or vertical scrolling.

Applies to:

FaceScroll Custom scrollbar

This is a dropin replacement for FaceScroll Custom scrollbar that enables an altScrollTo method for scrolling to any given point within a scroller via top and/or horizontal coordinates, or via an element with an id within a scroller, or via the keywords 'begin', 'middle', or 'end' to scroll to those positions respectively.

It also adds an option for real time updates of the scroller's postion for use as you see fit.

It corrects the scroller's behavior in IE 8 and less down to and including IE 6, especially IE 7 and 6 which were previously excluded form this script. IE 8 only had problems with bi-directional scrollers. And adds the previously missing common jQuery object return value for its primary function so that it may be chained from in the normal manner that users of jQuery are accustomed to.

For non-touch screen browsers it changes the behavior for default style scrollers, the ones where the scrollbars are hidden on mouseout. If the user is still dragging the scrollbar on mouseout, it will remain visible and functional until the mouseup event that releases it. In the original version it would disappear and the scroller could jump or do other odd things depending upon the browser.

Demo:

http://home.comcast.net/~jscheuer1/s...oll/demo-2.htm

You may use your browser's view source to see the syntax used in the demo, which is the same as the original, just with the added option and function.

Script (right click and 'Save As', requires the same helper scripts as does the original version):

http://home.comcast.net/~jscheuer1/s.../facescroll.js

From the release notes in the updated script:

"Allows for an optional scrolldatato(data) function that returns the scroll
position in real time vertically and horizontally of that scroller's content. It's data argument returns
an object with that faceScroll scroller's top and left positions as negative floating point numbers.
Example syntax for using scrolldatato(data) which is used as an option during initialization:

Code:

	$('#demo1').alternateScroll({'scrolldatato': function(data){
			$('#dat-top').val(Math.abs(Math.round(data.top)));
			$('#dat-left').val(Math.abs(Math.round(data.left)));
		}
	});

The above example will populate the text inputs with id's of 'dat-top' and 'dat-left' with the $('#demo1')
FaceScroll scroller's top and left scroll positions respectively. These will be updated in real time as
the scroller scrolls. Using the Math.abs and Math.round methods will translate the negative floating
point values to positive whole integers.

Adds an an altScrollTo() function as a jQuery method to scroll vertically
and/or horizontally to a positive integer pixel destination or to a jQuery selector of an element within
the content. The altScrollTo() function returns its selector object and the alternateScroll() function
now does so too. These are in accordance with jQuery convention to allow for chaining.
The available syntaxes for altScrollTo() are:

Code:

	$('#selector').altScrollTo(80); // will scroll the FaceScroll scroller initialized on $('#selector')
		// to 80 pixels vertical, unless the scroller only scrolls horizontally, in which case it will
		// scroll to 80 pixels horizontal.

	$('#selector').altScrollTo(80, 50); // will scroll the FaceScroll scroller initialized on $('#selector')
		// to 80 pixels vertical, 50 pixels horizontal, unless that scroller scrolls only horizontally,
		// in which case it will only scroll to 50 pixels horizontal, or unless that scroller only scrolls
		// vertically, in which case it will only scroll to 80 pixels vertical.

	$('#selector').altScrollTo('#selector2'); // will scroll the FaceScroll scroller initialized on $('#selector')
		// to the element within it with the id of 'selector2'.

	$('#selector2').altScrollTo(); // a shortcut method for $('#selector').altScrollTo('#selector2'); will scroll
		// the FaceScroll scroller that contains the element that has the id of 'selector2' to that element.
		// Be careful here, if two scrollers contain the same selector, unexpected results may occur.

	$('#selector').altScrollTo('end'); // will scroll the FaceScroll scroller initialized on $('#selector')
		// to the end both vertically and horizontally, or only one or the other if that scroller only
		// scrolls in that one direction. Other available keywords are 'middle', and 'begin'.

If as can be done, multiple scrollers were initialized under one selector, one may use either a selector
for the specific scroller one wants to scroll, or the shortcut method which will find the scroller that
contains that id selector in it's content.

For non-touch screens improves behavior on mouseout while still scrolling a Facescroll element with 'hide-bars': true"


Comments are welcome but will be moderated until approved.

If you want help with this though, please post a new thread in the Dynamic Drive Scripts help section. Link to this blog entry in your post.