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

Re: how can I interrupt a YAHOO.util.Scroll page scroll

Expand Messages
  • rjgfx
    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: function scrollPage(){
    Message 1 of 5 , May 9, 2006
    • 0 Attachment
      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/>.
      > >
      > >
      > >
      ------------------------------------------------------------------------
      > >
      >
    • 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 2 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 3 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.