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

Problems with scrolling animation

Expand Messages
  • richard.bevers
    Hi, I m trying to create a scrolling div that will react to certain events. Below is the code that I use. YAHOO.example.initUp = function() { var animUp = new
    Message 1 of 5 , Jan 30, 2007
    • 0 Attachment
      Hi,

      I'm trying to create a scrolling div that will react to certain events.
      Below is the code that I use.

      YAHOO.example.initUp = function() {
      var animUp = new YAHOO.util.Motion('scrollcontent', { top: { to: 0 } });
      YAHOO.util.Event.addListener('moveup', 'mouseover', animUp.animate,
      animUp, true);
      YAHOO.util.Event.addListener('moveup', 'mouseout',
      animUp.stop(false), animUp, true);
      YAHOO.util.Event.addListener('moveup', 'mousedown',
      animUp.stop(false), animUp, true);
      };

      YAHOO.example.initDown = function() {
      var animDown = new YAHOO.util.Motion('scrollcontent', { top: { to:
      -(getHeight('scrollcontent')-400 ) } });
      YAHOO.util.Event.addListener('movedown', 'mouseover',
      animDown.animate, animDown, true);
      YAHOO.util.Event.addListener('movedown', 'mouseout',
      animDown.stop(false), animDown, true);
      YAHOO.util.Event.addListener('movedown', 'mousedown',
      animDown.stop(false), animDown, true);
      };

      YAHOO.util.Event.onAvailable('scrollcontent', YAHOO.example.initDown);
      YAHOO.util.Event.onAvailable('scrollcontent', YAHOO.example.initUp);

      Most of this came from the tutorials on developer.yahoo.com/yui.

      So here is my problem. If I read the documentation correctly the stop
      function takes one argument. A boolean expression telling it to move
      to the last frame or to stop there and then. The getHeight function
      does nothing but retrieve the height of the element.

      This parameter seems to have no effect.

      I had to comment out line 319 from animation.js to,
      //this.currentFrame = this.totalFrames;

      Now it stops, but I can no longer finish other animations if I need to
      call the stop() method.

      Am I doing something wrong?


      Second, the animation is moving too fast. Is there a way to slow it
      down. I have thought about using the animation manager fps. But I have
      no idea as to how this works.

      Any help would be greatly appreciated.
      Thanks,

      Richard
    • dav.glass@yahoo.com
      Richard -- I think your first issue is a result of a coding error.. When a function is passed to Event.addListener it needs to be a function reference, not an
      Message 2 of 5 , Jan 30, 2007
      • 0 Attachment
        Richard --

        I think your first issue is a result of a coding error..

        When a function is passed to Event.addListener it needs to be a function reference, not an actual function call.

        Try changing the addListener lines from this:
        YAHOO.util.Event.addListener('moveup', 'mouseout', animUp.stop(false), animUp, true);

        To this:
        YAHOO.util.Event.addListener('moveup', 'mouseout', function() { animUp.stop(false); }, animUp, true);
         
        The second issue, with the speed of the animation, can be solved by doing this:
        var animUp = new YAHOO.util.Motion('scrollcontent', { top: { to: 0 } }, 2);

        The docs don't say this very clearly, but Motion accepts the same sort of parameters that the Anim class does. By adding the 2 to the end we are telling Animate to make the animation last 2 seconds instead of the default 1 second.

        Hope all of this helps 8-)
        Dav

        Dav Glass
        dav.glass@...
        blog.davglass.com


        + Windows: n. - The most successful computer virus, ever. +
        + A computer without a Microsoft operating system is like a dog
        without bricks tied to its head +
        + A Microsoft Certified Systems Engineer is to computing what a
        McDonalds Certified Food Specialist is to fine cuisine +


        ----- Original Message ----
        From: richard.bevers <richard.bevers@...>
        To: ydn-javascript@yahoogroups.com
        Sent: Tuesday, January 30, 2007 6:44:30 AM
        Subject: [ydn-javascript] Problems with scrolling animation

        Hi,

        I'm trying to create a scrolling div that will react to certain events.
        Below is the code that I use.

        YAHOO.example.initUp = function() {
          var animUp = new YAHOO.util.Motion('scrollcontent', { top: { to: 0 } });
          YAHOO.util.Event.addListener('moveup', 'mouseover', animUp.animate,
        animUp, true);
          YAHOO.util.Event.addListener('moveup', 'mouseout',
        animUp.stop(false), animUp, true);
          YAHOO.util.Event.addListener('moveup', 'mousedown',
        animUp.stop(false), animUp, true);
        };

        YAHOO.example.initDown = function() {  
          var animDown = new YAHOO.util.Motion('scrollcontent', { top: { to:
        -(getHeight('scrollcontent')-400 ) } });
          YAHOO.util.Event.addListener('movedown', 'mouseover',
        animDown.animate, animDown, true);
                        YAHOO.util.Event.addListener('movedown', 'mouseout',
        animDown.stop(false), animDown, true);
                        YAHOO.util.Event.addListener('movedown', 'mousedown',
        animDown.stop(false), animDown, true);
        };
                    
        YAHOO.util.Event.onAvailable('scrollcontent', YAHOO.example.initDown);
        YAHOO.util.Event.onAvailable('scrollcontent', YAHOO.example.initUp);

        Most of this came from the tutorials on developer.yahoo.com/yui.

        So here is my problem. If I read the documentation correctly the stop
        function takes one argument. A boolean expression telling it to move
        to the last frame or to stop there and then. The getHeight function
        does nothing but retrieve the height of the element.

        This parameter seems to have no effect.

        I had to comment out line 319 from animation.js to,
        //this.currentFrame = this.totalFrames;

        Now it stops, but I can no longer finish other animations if I need to
        call the stop() method.

        Am I doing something wrong?


        Second, the animation is moving too fast. Is there a way to slow it
        down. I have thought about using the animation manager fps. But I have
        no idea as to how this works.

        Any help would be greatly appreciated.
        Thanks,

        Richard




        Yahoo! Groups Links

        <*> To visit your group on the web, go to:
            http://groups.yahoo.com/group/ydn-javascript/

        <*> Your email settings:
            Individual Email | Traditional

        <*> To change settings online go to:
            http://groups.yahoo.com/group/ydn-javascript/join
            (Yahoo! ID required)

        <*> To change settings via email:
            mailto:ydn-javascript-digest@yahoogroups.com
            mailto:ydn-javascript-fullfeatured@yahoogroups.com

        <*> 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/


      • richard.bevers
        Hi Dav, Thanks for your reply. The extra parameter to the animation works perfect. But if i change the lines to include the function as you suggest it won t
        Message 3 of 5 , Jan 30, 2007
        • 0 Attachment
          Hi Dav,

          Thanks for your reply. The extra parameter to the animation works
          perfect. But if i change the lines to include the function as you
          suggest it won't scroll at all.

          Any more ideas?

          Thanks,

          Richard

          --- In ydn-javascript@yahoogroups.com, dav.glass@... wrote:
          >
          > Richard --
          >
          > I think your first issue is a result of a coding error..
          >
          > When a function is passed to Event.addListener it needs to be a
          function reference, not an actual function call.
          >
          > Try changing the addListener lines from this:
          > YAHOO.util.Event.addListener('moveup', 'mouseout',
          animUp.stop(false), animUp, true);
          >
          > To this:
          > YAHOO.util.Event.addListener('moveup', 'mouseout', function() {
          animUp.stop(false); }, animUp, true);
          >
          > The second issue, with the speed of the animation, can be solved by
          doing this:
          > var animUp = new YAHOO.util.Motion('scrollcontent', { top: { to: 0 }
          }, 2);
          >
          > The docs don't say this very clearly, but Motion accepts the same
          sort of parameters that the Anim class does. By adding the 2 to the
          end we are telling Animate to make the animation last 2 seconds
          instead of the default 1 second.
          >
          > Hope all of this helps 8-)
          > Dav
          >
          >
          > Dav Glass
          > dav.glass@...
          > blog.davglass.com
          >
          >
          > + Windows: n. - The most successful computer virus, ever. +
          > + A computer without a Microsoft operating system is like a dog
          > without bricks tied to its head +
          > + A Microsoft Certified Systems Engineer is to computing what a
          > McDonalds Certified Food Specialist is to fine cuisine +
          >
          > ----- Original Message ----
          > From: richard.bevers <richard.bevers@...>
          > To: ydn-javascript@yahoogroups.com
          > Sent: Tuesday, January 30, 2007 6:44:30 AM
          > Subject: [ydn-javascript] Problems with scrolling animation
          >
          > Hi,
          >
          > I'm trying to create a scrolling div that will react to certain events.
          > Below is the code that I use.
          >
          > YAHOO.example.initUp = function() {
          > var animUp = new YAHOO.util.Motion('scrollcontent', { top: { to: 0
          } });
          > YAHOO.util.Event.addListener('moveup', 'mouseover', animUp.animate,
          > animUp, true);
          > YAHOO.util.Event.addListener('moveup', 'mouseout',
          > animUp.stop(false), animUp, true);
          > YAHOO.util.Event.addListener('moveup', 'mousedown',
          > animUp.stop(false), animUp, true);
          > };
          >
          > YAHOO.example.initDown = function() {
          > var animDown = new YAHOO.util.Motion('scrollcontent', { top: { to:
          > -(getHeight('scrollcontent')-400 ) } });
          > YAHOO.util.Event.addListener('movedown', 'mouseover',
          > animDown.animate, animDown, true);
          > YAHOO.util.Event.addListener('movedown', 'mouseout',
          > animDown.stop(false), animDown, true);
          > YAHOO.util.Event.addListener('movedown', 'mousedown',
          > animDown.stop(false), animDown, true);
          > };
          >
          > YAHOO.util.Event.onAvailable('scrollcontent', YAHOO.example.initDown);
          > YAHOO.util.Event.onAvailable('scrollcontent', YAHOO.example.initUp);
          >
          > Most of this came from the tutorials on developer.yahoo.com/yui.
          >
          > So here is my problem. If I read the documentation correctly the stop
          > function takes one argument. A boolean expression telling it to move
          > to the last frame or to stop there and then. The getHeight function
          > does nothing but retrieve the height of the element.
          >
          > This parameter seems to have no effect.
          >
          > I had to comment out line 319 from animation.js to,
          > //this.currentFrame = this.totalFrames;
          >
          > Now it stops, but I can no longer finish other animations if I need to
          > call the stop() method.
          >
          > Am I doing something wrong?
          >
          >
          > Second, the animation is moving too fast. Is there a way to slow it
          > down. I have thought about using the animation manager fps. But I have
          > no idea as to how this works.
          >
          > Any help would be greatly appreciated.
          > Thanks,
          >
          > Richard
          >
          >
          >
          >
          > Yahoo! Groups Links
          >
        • dav.glass@yahoo.com
          Richard -- You might try something like: YAHOO.util.Event.addListener( moveup , mouseout , function() { this.stop(false); }, animUp, true); or
          Message 4 of 5 , Jan 30, 2007
          • 0 Attachment
            Richard --

            You might try something like:

            YAHOO.util.Event.addListener('moveup', 'mouseout', function() {
            this.stop(false); }, animUp, true);

            or

            YAHOO.util.Event.addListener('moveup', 'mouseout', animUpStop, animUp, true);

            animUpStop = function() {
                animUp.stop(false);
            }

            It all depends on the location of the vars in the scope of the caller...

            Also here is an example I did a little while back that may help you out:
            http://blog.davglass.com/files/yui/scroll/

            Hope that helps 8-)
            Dav
             
            Dav Glass
            dav.glass@...
            blog.davglass.com


            + Windows: n. - The most successful computer virus, ever. +
            + A computer without a Microsoft operating system is like a dog
            without bricks tied to its head +
            + A Microsoft Certified Systems Engineer is to computing what a
            McDonalds Certified Food Specialist is to fine cuisine +


            ----- Original Message ----
            From: richard.bevers <richard.bevers@...>
            To: ydn-javascript@yahoogroups.com
            Sent: Tuesday, January 30, 2007 10:33:41 AM
            Subject: [ydn-javascript] Re: Problems with scrolling animation

            Hi Dav,

            Thanks for your reply. The extra parameter to the animation works
            perfect. But if i change the lines to include the function as you
            suggest it won't scroll at all.

            Any more ideas?

            Thanks,

            Richard

            --- In ydn-javascript@yahoogroups.com, dav.glass@... wrote:
            >
            > Richard --
            >
            > I think your first issue is a result of a coding error..
            >
            > When a function is passed to Event.addListener it needs to be a
            function reference, not an actual function call.
            >
            > Try changing the addListener lines from this:
            > YAHOO.util.Event.addListener('moveup', 'mouseout',
            animUp.stop(false), animUp, true);
            >
            > To this:
            > YAHOO.util.Event.addListener('moveup', 'mouseout', function() {
            animUp.stop(false); }, animUp, true);
            >  
            > The second issue, with the speed of the animation, can be solved by
            doing this:
            > var animUp = new YAHOO.util.Motion('scrollcontent', { top: { to: 0 }
            }, 2);
            >
            > The docs don't say this very clearly, but Motion accepts the same
            sort of parameters that the Anim class does. By adding the 2 to the
            end we are telling Animate to make the animation last 2 seconds
            instead of the default 1 second.
            >
            > Hope all of this helps 8-)
            > Dav
            >
            >
            > Dav Glass
            > dav.glass@...
            > blog.davglass.com
            >
            >
            > + Windows: n. - The most successful computer virus, ever. +
            > + A computer without a Microsoft operating system is like a dog
            >     without bricks tied to its head +
            > + A Microsoft Certified Systems Engineer is to computing what a
            >    McDonalds Certified Food Specialist is to fine cuisine  +
            >
            > ----- Original Message ----
            > From: richard.bevers <richard.bevers@...>
            > To: ydn-javascript@yahoogroups.com
            > Sent: Tuesday, January 30, 2007 6:44:30 AM
            > Subject: [ydn-javascript] Problems with scrolling animation
            >
            > Hi,
            >
            > I'm trying to create a scrolling div that will react to certain events.
            > Below is the code that I use.
            >
            > YAHOO.example.initUp = function() {
            >   var animUp = new YAHOO.util.Motion('scrollcontent', { top: { to: 0
            } });
            >   YAHOO.util.Event.addListener('moveup', 'mouseover', animUp.animate,
            > animUp, true);
            >   YAHOO.util.Event.addListener('moveup', 'mouseout',
            > animUp.stop(false), animUp, true);
            >   YAHOO.util.Event.addListener('moveup', 'mousedown',
            > animUp.stop(false), animUp, true);
            > };
            >
            > YAHOO.example.initDown = function() {  
            >   var animDown = new YAHOO.util.Motion('scrollcontent', { top: { to:
            > -(getHeight('scrollcontent')-400 ) } });
            >   YAHOO.util.Event.addListener('movedown', 'mouseover',
            > animDown.animate, animDown, true);
            >                 YAHOO.util.Event.addListener('movedown', 'mouseout',
            > animDown.stop(false), animDown, true);
            >                 YAHOO.util.Event.addListener('movedown', 'mousedown',
            > animDown.stop(false), animDown, true);
            > };
            >            
            > YAHOO.util.Event.onAvailable('scrollcontent', YAHOO.example.initDown);
            > YAHOO.util.Event.onAvailable('scrollcontent', YAHOO.example.initUp);
            >
            > Most of this came from the tutorials on developer.yahoo.com/yui.
            >
            > So here is my problem. If I read the documentation correctly the stop
            > function takes one argument. A boolean expression telling it to move
            > to the last frame or to stop there and then. The getHeight function
            > does nothing but retrieve the height of the element.
            >
            > This parameter seems to have no effect.
            >
            > I had to comment out line 319 from animation.js to,
            > //this.currentFrame = this.totalFrames;
            >
            > Now it stops, but I can no longer finish other animations if I need to
            > call the stop() method.
            >
            > Am I doing something wrong?
            >
            >
            > Second, the animation is moving too fast. Is there a way to slow it
            > down. I have thought about using the animation manager fps. But I have
            > no idea as to how this works.
            >
            > Any help would be greatly appreciated.
            > Thanks,
            >
            > Richard
            >
            >
            >
            >  
            > Yahoo! Groups Links
            >





            Yahoo! Groups Links

            <*> To visit your group on the web, go to:
                http://groups.yahoo.com/group/ydn-javascript/

            <*> Your email settings:
                Individual Email | Traditional

            <*> To change settings online go to:
                http://groups.yahoo.com/group/ydn-javascript/join
                (Yahoo! ID required)

            <*> To change settings via email:
                mailto:ydn-javascript-digest@yahoogroups.com
                mailto:ydn-javascript-fullfeatured@yahoogroups.com

            <*> 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/


          • richard.bevers
            Hi Dav, Sorry for the late reply. I was away for work. But I tried your suggestion and it works perfectly. Thanks a lot. Now all that remains is calculating
            Message 5 of 5 , Jan 31, 2007
            • 0 Attachment
              Hi Dav,

              Sorry for the late reply. I was away for work. But I tried your
              suggestion and it works perfectly. Thanks a lot. Now all that remains
              is calculating the scrolling speed when the animation didn't finish.
              But I'm sure I'll work that out.
              Once again thanks.

              Richard

              --- In ydn-javascript@yahoogroups.com, dav.glass@... wrote:
              >
              > Richard --
              >
              > You might try something like:
              >
              > YAHOO.util.Event.addListener('moveup', 'mouseout', function() {
              > this.stop(false); }, animUp, true);
              >
              > or
              >
              > YAHOO.util.Event.addListener('moveup', 'mouseout', animUpStop,
              animUp, true);
              >
              > animUpStop = function() {
              > animUp.stop(false);
              > }
              >
              > It all depends on the location of the vars in the scope of the caller...
              >
              > Also here is an example I did a little while back that may help you out:
              > http://blog.davglass.com/files/yui/scroll/
              >
              > Hope that helps 8-)
              > Dav
              >
              > Dav Glass
              > dav.glass@...
              > blog.davglass.com
              >
              >
              > + Windows: n. - The most successful computer virus, ever. +
              > + A computer without a Microsoft operating system is like a dog
              > without bricks tied to its head +
              > + A Microsoft Certified Systems Engineer is to computing what a
              > McDonalds Certified Food Specialist is to fine cuisine +
              >
              > ----- Original Message ----
              > From: richard.bevers <richard.bevers@...>
              > To: ydn-javascript@yahoogroups.com
              > Sent: Tuesday, January 30, 2007 10:33:41 AM
              > Subject: [ydn-javascript] Re: Problems with scrolling animation
              >
              > Hi Dav,
              >
              > Thanks for your reply. The extra parameter to the animation works
              > perfect. But if i change the lines to include the function as you
              > suggest it won't scroll at all.
              >
              > Any more ideas?
              >
              > Thanks,
              >
              > Richard
              >
              > --- In ydn-javascript@yahoogroups.com, dav.glass@ wrote:
              > >
              > > Richard --
              > >
              > > I think your first issue is a result of a coding error..
              > >
              > > When a function is passed to Event.addListener it needs to be a
              > function reference, not an actual function call.
              > >
              > > Try changing the addListener lines from this:
              > > YAHOO.util.Event.addListener('moveup', 'mouseout',
              > animUp.stop(false), animUp, true);
              > >
              > > To this:
              > > YAHOO.util.Event.addListener('moveup', 'mouseout', function() {
              > animUp.stop(false); }, animUp, true);
              > >
              > > The second issue, with the speed of the animation, can be solved by
              > doing this:
              > > var animUp = new YAHOO.util.Motion('scrollcontent', { top: { to: 0 }
              > }, 2);
              > >
              > > The docs don't say this very clearly, but Motion accepts the same
              > sort of parameters that the Anim class does. By adding the 2 to the
              > end we are telling Animate to make the animation last 2 seconds
              > instead of the default 1 second.
              > >
              > > Hope all of this helps 8-)
              > > Dav
              > >
              > >
              > > Dav Glass
              > > dav.glass@
              > > blog.davglass.com
              > >
              > >
              > > + Windows: n. - The most successful computer virus, ever. +
              > > + A computer without a Microsoft operating system is like a dog
              > > without bricks tied to its head +
              > > + A Microsoft Certified Systems Engineer is to computing what a
              > > McDonalds Certified Food Specialist is to fine cuisine +
              > >
              > > ----- Original Message ----
              > > From: richard.bevers <richard.bevers@>
              > > To: ydn-javascript@yahoogroups.com
              > > Sent: Tuesday, January 30, 2007 6:44:30 AM
              > > Subject: [ydn-javascript] Problems with scrolling animation
              > >
              > > Hi,
              > >
              > > I'm trying to create a scrolling div that will react to certain
              events.
              > > Below is the code that I use.
              > >
              > > YAHOO.example.initUp = function() {
              > > var animUp = new YAHOO.util.Motion('scrollcontent', { top: { to: 0
              > } });
              > > YAHOO.util.Event.addListener('moveup', 'mouseover', animUp.animate,
              > > animUp, true);
              > > YAHOO.util.Event.addListener('moveup', 'mouseout',
              > > animUp.stop(false), animUp, true);
              > > YAHOO.util.Event.addListener('moveup', 'mousedown',
              > > animUp.stop(false), animUp, true);
              > > };
              > >
              > > YAHOO.example.initDown = function() {
              > > var animDown = new YAHOO.util.Motion('scrollcontent', { top: { to:
              > > -(getHeight('scrollcontent')-400 ) } });
              > > YAHOO.util.Event.addListener('movedown', 'mouseover',
              > > animDown.animate, animDown, true);
              > > YAHOO.util.Event.addListener('movedown', 'mouseout',
              > > animDown.stop(false), animDown, true);
              > > YAHOO.util.Event.addListener('movedown', 'mousedown',
              > > animDown.stop(false), animDown, true);
              > > };
              > >
              > > YAHOO.util.Event.onAvailable('scrollcontent', YAHOO.example.initDown);
              > > YAHOO.util.Event.onAvailable('scrollcontent', YAHOO.example.initUp);
              > >
              > > Most of this came from the tutorials on developer.yahoo.com/yui.
              > >
              > > So here is my problem. If I read the documentation correctly the stop
              > > function takes one argument. A boolean expression telling it to move
              > > to the last frame or to stop there and then. The getHeight function
              > > does nothing but retrieve the height of the element.
              > >
              > > This parameter seems to have no effect.
              > >
              > > I had to comment out line 319 from animation.js to,
              > > //this.currentFrame = this.totalFrames;
              > >
              > > Now it stops, but I can no longer finish other animations if I need to
              > > call the stop() method.
              > >
              > > Am I doing something wrong?
              > >
              > >
              > > Second, the animation is moving too fast. Is there a way to slow it
              > > down. I have thought about using the animation manager fps. But I have
              > > no idea as to how this works.
              > >
              > > Any help would be greatly appreciated.
              > > Thanks,
              > >
              > > Richard
              > >
              > >
              > >
              > >
              > > Yahoo! Groups Links
              > >
              >
              >
              >
              >
              >
              > Yahoo! Groups Links
              >
            Your message has been successfully submitted and would be delivered to recipients shortly.