Page 2 of 2 FirstFirst 12
Results 11 to 15 of 15

Thread: FaceScroll scrollbar setting scroll position

  1. #11
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,127
    Thanks
    44
    Thanked 3,228 Times in 3,189 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 10-08-2012 at 12:04 AM. Reason: add demo links, later - formatting
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  2. #12
    Join Date
    Mar 2010
    Posts
    27
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thanks guys,

    John, sorry to drag you into this... Ok, I'm not that sorry

    Your comments have helped, not so much as in solving this problem, but in knowing it isn't a simple thing, and my struggle to find a solution is not the one line wonder I'd thought it would be.

    I have been thinking that an additional function in the js file would be needed too. The js seems to cover three different events. One for IOS drags, one for clickwheel scrolls, and one for 'handle' drags. be nice to grab one of those. Knowing the order would be useful too, but I can't see it. Is the div scrolled and the scroll handle adjusted to match, or is it the other way around? Doing the proper one would seem to keep them in sync, don't you think?

    I'm going to pay the js file another visit and see if I can do this with an additional function. Hope you don't mind me tampering with your code. (tampering=butchering)

    Thanks

  3. #13
    Join Date
    Mar 2010
    Posts
    27
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Never mind....

    Oh, and many thanks John.

  4. #14
    Join Date
    Jun 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy

    Hi, I am using your version of facescroll
    but I am getting an error. here is my code

    Code:
    $elem_parent.find('.message-fullview .fullview-ul').alternateScroll({'scrolldatato': function(data){}}).data('vscroll')(155);
    and error is
    Uncaught TypeError: undefined is not a function

    pls help me..,,

  5. #15
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,127
    Thanks
    44
    Thanked 3,228 Times in 3,189 Posts
    Blog Entries
    12

    Default

    I think you're overcomplicating it. But I would have to see the page to be sure. And there's been an update to the update that you're probably using to get that error, so either way the syntax is different now.

    This:

    Code:
    {'scrolldatato': function(data){}}
    is doing nothing because the function being assigned is an empty function, so can be removed.

    Of what would remain, the highlighted:

    Code:
    $elem_parent.find('.message-fullview .fullview-ul').alternateScroll().data('vscroll')(155);
    has been redefined. Change it to:

    Code:
    .altScrollTo(155)
    Here are the options for .altScrollTo -

    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 you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

    Here's the new demo:

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

    See also:

    http://www.dynamicdrive.com/forums/e...Scroll-my-take
    Last edited by jscheuer1; 06-25-2013 at 06:13 PM. Reason: detail
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. FaceScroll scrollbar help please...
    By aztech4mac in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 09-30-2012, 11:07 PM
  2. FaceScroll Custom scrollbar
    By PaulChgo60657 in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 09-12-2012, 02:16 AM
  3. (Help) FaceScroll Custom scrollbar
    By Isnan Nugrah in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 06-16-2012, 09:26 PM
  4. Resolved Facescroll: Changing the position of the scrollbar so that its outside of the textbox
    By aviynw in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 06-15-2012, 12:08 PM
  5. Replies: 2
    Last Post: 05-19-2007, 08:57 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •