OK, I have a working update to the script that takes care of this as well as makes getting the position a little easier while eliminating the need to poll the content element's position with a setInterval function.
Demo:
http://home.comcast.net/~jscheuer1/s...croll/demo.htm
Updated script (right click and 'Save As'):
http://home.comcast.net/~jscheuer1/s.../facescroll.js
To get the scroll position, you can now put a function in as part of the scroller's options to do whatever you like with that information. It reports both the top and the left position in case you have both a vertical and a horizontal scrollbar, but you only have to use the one you want. In my demo I use both, but only the vertical one changes as the demo only has a vertical scrollbar. These positions are given as top and left of an object that's the sole argument of the optional function, example usage:
Code:
$('#demo1').alternateScroll({'scrolldatato': function(data){
$('#dat-top').val(Math.abs(Math.round(data.top)));
$('#dat-left').val(Math.abs(Math.round(data.left)));
}
});
That updates the dat-top and dat-left element's values with a positive whole integer representation of the top and left position of the content respectively, every time the script moves it. These functions can be customized to do whatever you like with the information. The raw data is always 0 (for all the way top or all the way left) or negative (representing how far the content has retracted to the top or to the left). It will be a floating point number in most cases.
Demo 1 also takes advantage of the new vscroll data function:
Code:
$('#demo1').alternateScroll({'scrolldatato': function(data){
$('#dat-top').val(Math.abs(Math.round(data.top)));
$('#dat-left').val(Math.abs(Math.round(data.left)));
}
}).data('vscroll')(155);
After initialization, it will scroll to 155 pixels down. Notice that now positive integers are what's expected. It also has a link beneath its scroller:
HTML Code:
<a href="#" onclick="$('#demo1').data('vscroll')('#classified'); return false;">Classification</a> (scroll demo1 content to element with id 'classification')
Here it's data vscroll function is called from the element itself because there's no longer any other reference to it. And instead of a number, a jQuery selector is used to scroll to an element within the content that has that specific selector. In this case it's a span with the id of "classified":
HTML Code:
. . . npowder technology. <span id="classified">Gunpowder</span> is classified as a low ex . . .
There's also a data hscroll function that works the same way for a horizontal scroller. If your scroller has both vertical and horizontal scrolling, both functions may be used at once as needed.
One other thing, with this update the alternateScroll function returns the selector object it was fed. As a result it can no longer be used with the href="javascript:$('someselector').alternateScroll(whatever)" syntax because it will overwrite the page. You can keep that (the only reason to do so is because the href will show up in the status bar, so it's potentially informative to the user), but it must also have an onclick function that does the actual work and that either returns false or that otherwise prevents the default action of the link. So for example, from the demo page:
Code:
- <a href="javascript:$('#demo2').alternateScroll('remove');">Remove facescroll scrollbar</a><br />
- <a href="javascript:$('#demo2').alternateScroll({'vertical-bar-class': 'styled-v-bar', 'hide-bars': false });">Add facescroll scrollbar</a>
could become (there are other ways of dealing with this):
Code:
- <a href="javascript:$('#demo2').alternateScroll('remove');" onclick="$('#demo2').alternateScroll('remove');return false;">Remove facescroll scrollbar</a><br />
- <a href="javascript:$('#demo2').alternateScroll({'vertical-bar-class': 'styled-v-bar', 'hide-bars': false });" onclick="$('#demo2').alternateScroll({'vertical-bar-class': 'styled-v-bar', 'hide-bars': false }); return false;">Add facescroll scrollbar</a>
Another way is to use jQuery to add the event to the link. If you do that, have the event prevent default or return false.
Reply With Quote
Bookmarks