Loading ...
Sorry, an error occurred while loading the content.

Re: [ydn-javascript] Re: how can I interrupt a YAHOO.util.Scroll page scroll

Expand Messages
  • Matt Sweeney
    Hi Rahul, My apologies, I should have given this some more thought before replying. Yes, Scroll is the correct event to listen for, however you should listen
    Message 1 of 5 , May 9, 2006
    • 0 Attachment
      Hi Rahul,

      My apologies, I should have given this some more thought before replying.

      Yes, "Scroll" is the correct event to listen for, however you should listen for it on the window itself.  Also,  in your example, "animationToStop" actually comes in as the 2nd arg (event is the first arg).

      However, even when set up correctly, this will not yield the desired behavior.  Animating the "body" scroll fires off a scroll event, so the animation will cancel itself after a single frame. I see no obvious solution to make this approach work, short of trying to poke at the event itself and see if there is a way to determine whether it was initiated by the animation or by user scroll.

      There may be a "creative" way around this problem, though.  For example, if you know what direction the animation is scrolling, onTween you could check whether its actually going in the desired direction, and if not, you can assume the user has done something to change the scroll value midstream.

      This is just a proof of concept, but I got it working with something like this:

      function scrollPage(){
         var mode = document.compatMode; // Standards or Quirks mode? (or null)
         var body = document.body; // Safari and IE/OP/Gecko quirks mode
        
         if (mode && mode.indexOf('CSS') != -1) {
            body = document.documentElement; // IE/OP/Gecko standards mode
         }
        
         var scrollTo = 200;
        
         var anim = new YAHOO.util.Scroll(body, { scroll: { to: [0, scrollTo] } }, 3, YAHOO.util.Easing.easeNone);
         var lastScrollTopValue = body.scrollTop;
        
         var direction = null;
        
         anim.onStart.subscribe(
            function() {
               if (this.getEl().scrollTop < scrollTo) {
                  direction = 'down';
               } else {
                  direction = 'up';
               }
            }
         );
        
         anim.onTween.subscribe(
            function() {
               if (direction == 'up' && this.getEl().scrollTop > lastScrollTopValue) {
                  this.stop();
               } else if (direction == 'down' && this.getEl().scrollTop < lastScrollTopValue) {
                  this.stop();
               }
           
               lastScrollTopValue = this.getEl().scrollTop;
            }
         );
        
         anim.animate();
      }

      Matt

      rjgfx wrote:
      Matt, thank you for the reply.
      
      I've been trying to make this work, and have had no success.  I'm
      currently testing with this:
      
      <script>
      function scrollPage(){
           var mode = document.compatMode; // Standards or Quirks mode? (or
      null)
           var body = document.body; // Safari and IE/OP/Gecko quirks mode
      
           if (mode && mode.indexOf('CSS') != -1) {
               body = document.documentElement; // IE/OP/Gecko standards mode
           }
           var anim = new YAHOO.util.Scroll(body, { scroll: { to: [0, 200] } },
      3, YAHOO.util.Easing.easeNone);
      
           YAHOO.util.Event.addListener(body, "scroll", stopScroll, anim);
           anim.animate();
      }
      
      function stopScroll(animationToStop){
           animationToStop.stop();
           return;
      }
      </script>
      
      <a href="javascript:scrollPage();">scroll page</a>
      
      
      Any ideas beyond this?  I feel like I'm missing something fundamental,
      because for the amount of time I've spent trying to figure it out I
      should have had something by now!  ;)
      
      I've tossed an alert into "stopScroll" function and right now it doesn't
      seem to be getting called at all.  Is "scroll" the wrong event to listen
      for?
      
      Thanks, all.
      
      Rahul
      
      --- In ydn-javascript@yahoogroups.com, Matt Sweeney <msweeney@...>
      wrote:
        
      Hi Rahul,
      
      You can listen for the window scroll event and call stop() on your
      animation instance to achieve this behavior.
      
      Matt
      
      rjgfx wrote:
      
          
      Hi folks,
      
      (I'm a first-time poster on this forum.  Thanks to all who have
      contributed so far--I've found answers to past problems quite
            
      easily!)
        
      Using the method demonstrated by Matt Sweeney (in this thread
      <http://groups.yahoo.com/group/ydn-javascript/message/613>) for
      scrolling an entire web page,  I've run up against a little
            
      usability
        
      problem.
      
      If a page is auto-scrolling down, and a user attempts to grab the
      scrollbar and scroll up (while the scroll script is still running),
            
      a
        
      battle ensues between the script and the user resulting in a very
      jagged scroll.  The user is unable to scroll manually until the page
      has reached it's final position as dictated by the script.
      
      Any suggestions on how to  interrupt the script when a user tries to
      manually scroll a page during an auto-scroll?
      
      Thank you,
      
      Rahul G.
      
      
      
      SPONSORED LINKS
      C programming language
      
            
      <http://groups.yahoo.com/gads?t=ms&k=C+programming+language&w1=C+program\
      ming+language&w2=Computer+programming+languages&w3=Java+programming+lang\
      uage&w4=The+c+programming+language&w5=C+++programming+language&w6=Concep\
      t+of+programming+language&c=6&s=194&.sig=lC1PxfzvANy_Br-nPkXYTA>
        
       Computer programming languages
      
            
      <http://groups.yahoo.com/gads?t=ms&k=Computer+programming+languages&w1=C\
      +programming+language&w2=Computer+programming+languages&w3=Java+programm\
      ing+language&w4=The+c+programming+language&w5=C+++programming+language&w\
      6=Concept+of+programming+language&c=6&s=194&.sig=7XFXh-0Mon1IfLuOVlwvdg>
        
       Java programming language
      
            
      <http://groups.yahoo.com/gads?t=ms&k=Java+programming+language&w1=C+prog\
      ramming+language&w2=Computer+programming+languages&w3=Java+programming+l\
      anguage&w4=The+c+programming+language&w5=C+++programming+language&w6=Con\
      cept+of+programming+language&c=6&s=194&.sig=UITodqn0qTCUcae_mpRQog>
        
      The c programming language
      
            
      <http://groups.yahoo.com/gads?t=ms&k=The+c+programming+language&w1=C+pro\
      gramming+language&w2=Computer+programming+languages&w3=Java+programming+\
      language&w4=The+c+programming+language&w5=C+++programming+language&w6=Co\
      ncept+of+programming+language&c=6&s=194&.sig=xnZC2-BzDSLhhir3MLtssg>
        
       C programming language
      
            
      <http://groups.yahoo.com/gads?t=ms&k=C+++programming+language&w1=C+progr\
      amming+language&w2=Computer+programming+languages&w3=Java+programming+la\
      nguage&w4=The+c+programming+language&w5=C+++programming+language&w6=Conc\
      ept+of+programming+language&c=6&s=194&.sig=RTzTl3BOJWbWK14CdUrO0w>
        
       Concept of programming language
      
            
      <http://groups.yahoo.com/gads?t=ms&k=Concept+of+programming+language&w1=\
      C+programming+language&w2=Computer+programming+languages&w3=Java+program\
      ming+language&w4=The+c+programming+language&w5=C+++programming+language&\
      w6=Concept+of+programming+language&c=6&s=194&.sig=x4ueM0tA417JDq3ckdJ9CQ\
        
      
      
            
      ------------------------------------------------------------------------
        
      YAHOO! GROUPS LINKS
      
          *  Visit your group "ydn-javascript
            <http://groups.yahoo.com/group/ydn-javascript>" on the web.
      
          *  To unsubscribe from this group, send an email to:
             ydn-javascript-unsubscribe@yahoogroups.com
           
            
      <mailto:ydn-javascript-unsubscribe@yahoogroups.com?subject=Unsubscribe>
        
          *  Your use of Yahoo! Groups is subject to the Yahoo! Terms of
            Service <http://docs.yahoo.com/info/terms/>.
      
      
      
            
      ------------------------------------------------------------------------
        
      
      
      
      
      
      
      ------------------------ Yahoo! Groups Sponsor --------------------~--> 
      Protect your PC from spy ware with award winning anti spy technology. It's free.
      http://us.click.yahoo.com/97bhrC/LGxNAA/yQLSAA/edFolB/TM
      --------------------------------------------------------------------~-> 
      
       
      Yahoo! Groups Links
      
      <*> To visit your group on the web, go to:
          http://groups.yahoo.com/group/ydn-javascript/
      
      <*> To unsubscribe from this group, send an email to:
          ydn-javascript-unsubscribe@yahoogroups.com
      
      <*> Your use of Yahoo! Groups is subject to:
          http://docs.yahoo.com/info/terms/
       
      
      
      
      
        

    • rjgfx
      Hey Matt, thanks a bunch for this help. I actually had event as the first argument, but then my alert message would pop-up constantly, but the animation still
      Message 2 of 5 , May 11, 2006
      • 0 Attachment
        Hey Matt, thanks a bunch for this help.

        I actually had event as the first argument, but then my alert message
        would pop-up constantly, but the animation still wouldn't stop--so
        what I posted was a later iteration. Weird.

        Anyway, I've added this to my code, and it's working just fine. I'm
        going to try now to stop the scroll as soon as a user clicks on the
        scroll bar. I have a feeling there won't be a simple way to do that
        either. If I can't get that, though, this is really helps and is
        definitely useful.

        If I figure out a way to stop the scroll on a click to the toolbar,
        I'll be sure to post.

        (and congrats to you and your team on the .1 launch. Looks like great
        stuff)

        Rahul G.
        Omaha, NE



        --- In ydn-javascript@yahoogroups.com, Matt Sweeney <msweeney@...> wrote:
        >
        > Hi Rahul,
        >
        > My apologies, I should have given this some more thought before
        replying.
        >
        > Yes, "Scroll" is the correct event to listen for, however you should
        > listen for it on the window itself. Also, in your example,
        > "animationToStop" actually comes in as the 2nd arg (event is the
        first arg).
        >
        > However, even when set up correctly, this will not yield the desired
        > behavior. Animating the "body" scroll fires off a scroll event, so the
        > animation will cancel itself after a single frame. I see no obvious
        > solution to make this approach work, short of trying to poke at the
        > event itself and see if there is a way to determine whether it was
        > initiated by the animation or by user scroll.
        >
        > There may be a "creative" way around this problem, though. For
        example,
        > if you know what direction the animation is scrolling, onTween you
        could
        > check whether its actually going in the desired direction, and if not,
        > you can assume the user has done something to change the scroll value
        > midstream.
        >
        > This is just a proof of concept, but I got it working with something
        > like this:
        >
        > function scrollPage(){
        > var mode = document.compatMode; // Standards or Quirks mode? (or
        null)
        > var body = document.body; // Safari and IE/OP/Gecko quirks mode
        >
        > if (mode && mode.indexOf('CSS') != -1) {
        > body = document.documentElement; // IE/OP/Gecko standards mode
        > }
        >
        > var scrollTo = 200;
        >
        > var anim = new YAHOO.util.Scroll(body, { scroll: { to: [0, scrollTo]
        > } }, 3, YAHOO.util.Easing.easeNone);
        > var lastScrollTopValue = body.scrollTop;
        >
        > var direction = null;
        >
        > anim.onStart.subscribe(
        > function() {
        > if (this.getEl().scrollTop < scrollTo) {
        > direction = 'down';
        > } else {
        > direction = 'up';
        > }
        > }
        > );
        >
        > anim.onTween.subscribe(
        > function() {
        > if (direction == 'up' && this.getEl().scrollTop >
        > lastScrollTopValue) {
        > this.stop();
        > } else if (direction == 'down' && this.getEl().scrollTop <
        > lastScrollTopValue) {
        > this.stop();
        > }
        >
        > lastScrollTopValue = this.getEl().scrollTop;
        > }
        > );
        >
        > anim.animate();
        > }
        >
        > Matt
        >
        > rjgfx wrote:
        >
        > >Matt, thank you for the reply.
        > >
        > >I've been trying to make this work, and have had no success. I'm
        > >currently testing with this:
        > >
        > ><script>
        > >function scrollPage(){
        > > var mode = document.compatMode; // Standards or Quirks mode? (or
        > >null)
        > > var body = document.body; // Safari and IE/OP/Gecko quirks mode
        > >
        > > if (mode && mode.indexOf('CSS') != -1) {
        > > body = document.documentElement; // IE/OP/Gecko standards mode
        > > }
        > > var anim = new YAHOO.util.Scroll(body, { scroll: { to: [0,
        200] } },
        > >3, YAHOO.util.Easing.easeNone);
        > >
        > > YAHOO.util.Event.addListener(body, "scroll", stopScroll, anim);
        > > anim.animate();
        > >}
        > >
        > >function stopScroll(animationToStop){
        > > animationToStop.stop();
        > > return;
        > >}
        > ></script>
        > >
        > ><a href="javascript:scrollPage();">scroll page</a>
        > >
        > >
        > >Any ideas beyond this? I feel like I'm missing something fundamental,
        > >because for the amount of time I've spent trying to figure it out I
        > >should have had something by now! ;)
        > >
        > >I've tossed an alert into "stopScroll" function and right now it
        doesn't
        > >seem to be getting called at all. Is "scroll" the wrong event to
        listen
        > >for?
        > >
        > >Thanks, all.
        > >
        > >Rahul
        > >
        > >--- In ydn-javascript@yahoogroups.com, Matt Sweeney <msweeney@>
        > >wrote:
        > >
        > >
        > >>Hi Rahul,
        > >>
        > >>You can listen for the window scroll event and call stop() on your
        > >>animation instance to achieve this behavior.
        > >>
        > >>Matt
        > >>
        > >>rjgfx wrote:
        > >>
        > >>
        > >>
        > >>>Hi folks,
        > >>>
        > >>>(I'm a first-time poster on this forum. Thanks to all who have
        > >>>contributed so far--I've found answers to past problems quite
        > >>>
        > >>>
        > >easily!)
        > >
        > >
        > >>>Using the method demonstrated by Matt Sweeney (in this thread
        > >>><http://groups.yahoo.com/group/ydn-javascript/message/613>) for
        > >>>scrolling an entire web page, I've run up against a little
        > >>>
        > >>>
        > >usability
        > >
        > >
        > >>>problem.
        > >>>
        > >>>If a page is auto-scrolling down, and a user attempts to grab the
        > >>>scrollbar and scroll up (while the scroll script is still running),
        > >>>
        > >>>
        > >a
        > >
        > >
        > >>>battle ensues between the script and the user resulting in a very
        > >>>jagged scroll. The user is unable to scroll manually until the page
        > >>>has reached it's final position as dictated by the script.
        > >>>
        > >>>Any suggestions on how to interrupt the script when a user tries to
        > >>>manually scroll a page during an auto-scroll?
        > >>>
        > >>>Thank you,
        > >>>
        > >>>Rahul G.
        > >>>
        > >>>
        > >>>
        > >>>SPONSORED LINKS
        > >>>C programming language
        > >>>
        > >>>
        > >>>
        >
        ><http://groups.yahoo.com/gads?t=ms&k=C+programming+language&w1=C+program\
        >
        >ming+language&w2=Computer+programming+languages&w3=Java+programming+lang\
        >
        >uage&w4=The+c+programming+language&w5=C+++programming+language&w6=Concep\
        > >t+of+programming+language&c=6&s=194&.sig=lC1PxfzvANy_Br-nPkXYTA>
        > >
        > >
        > >>> Computer programming languages
        > >>>
        > >>>
        > >>>
        >
        ><http://groups.yahoo.com/gads?t=ms&k=Computer+programming+languages&w1=C\
        >
        >+programming+language&w2=Computer+programming+languages&w3=Java+programm\
        >
        >ing+language&w4=The+c+programming+language&w5=C+++programming+language&w\
        >
        >6=Concept+of+programming+language&c=6&s=194&.sig=7XFXh-0Mon1IfLuOVlwvdg>
        > >
        > >
        > >>> Java programming language
        > >>>
        > >>>
        > >>>
        >
        ><http://groups.yahoo.com/gads?t=ms&k=Java+programming+language&w1=C+prog\
        >
        >ramming+language&w2=Computer+programming+languages&w3=Java+programming+l\
        >
        >anguage&w4=The+c+programming+language&w5=C+++programming+language&w6=Con\
        > >cept+of+programming+language&c=6&s=194&.sig=UITodqn0qTCUcae_mpRQog>
        > >
        > >
        > >>>The c programming language
        > >>>
        > >>>
        > >>>
        >
        ><http://groups.yahoo.com/gads?t=ms&k=The+c+programming+language&w1=C+pro\
        >
        >gramming+language&w2=Computer+programming+languages&w3=Java+programming+\
        >
        >language&w4=The+c+programming+language&w5=C+++programming+language&w6=Co\
        > >ncept+of+programming+language&c=6&s=194&.sig=xnZC2-BzDSLhhir3MLtssg>
        > >
        > >
        > >>> C programming language
        > >>>
        > >>>
        > >>>
        >
        ><http://groups.yahoo.com/gads?t=ms&k=C+++programming+language&w1=C+progr\
        >
        >amming+language&w2=Computer+programming+languages&w3=Java+programming+la\
        >
        >nguage&w4=The+c+programming+language&w5=C+++programming+language&w6=Conc\
        > >ept+of+programming+language&c=6&s=194&.sig=RTzTl3BOJWbWK14CdUrO0w>
        > >
        > >
        > >>> Concept of programming language
        > >>>
        > >>>
        > >>>
        >
        ><http://groups.yahoo.com/gads?t=ms&k=Concept+of+programming+language&w1=\
        >
        >C+programming+language&w2=Computer+programming+languages&w3=Java+program\
        >
        >ming+language&w4=The+c+programming+language&w5=C+++programming+language&\
        >
        >w6=Concept+of+programming+language&c=6&s=194&.sig=x4ueM0tA417JDq3ckdJ9CQ\
        > >
        > >
        > >>>
        > >>>
        > >>>
        > >>>
        >
        >------------------------------------------------------------------------
        > >
        > >
        > >>>YAHOO! GROUPS LINKS
        > >>>
        > >>> * Visit your group "ydn-javascript
        > >>> <http://groups.yahoo.com/group/ydn-javascript>" on the web.
        > >>>
        > >>> * To unsubscribe from this group, send an email to:
        > >>> ydn-javascript-unsubscribe@yahoogroups.com
        > >>>
        > >>>
        > >>>
        > ><mailto:ydn-javascript-unsubscribe@yahoogroups.com?subject=Unsubscribe>
        > >
        > >
        > >>> * Your use of Yahoo! Groups is subject to the Yahoo! Terms of
        > >>> Service <http://docs.yahoo.com/info/terms/>.
        > >>>
        > >>>
        > >>>
        > >>>
        > >>>
        >
        >------------------------------------------------------------------------
        > >
        > >
        > >
        > >
        > >
        > >
        > >
        > >
        > >
        > >
        > >
        > >Yahoo! Groups Links
        > >
        > >
        > >
        > >
        > >
        > >
        > >
        > >
        > >
        > >
        >
      Your message has been successfully submitted and would be delivered to recipients shortly.