9 Replies Latest reply on Nov 26, 2012 4:51 PM by heathrowe

    Simple up/down scroll button to control overflow

    pmfr01 Level 2

      I.

      I´m trying to do a simple up/down scroll button to control the overflow of a div with text inside it.

      My code:

       

      Mousedown:

      sym.getComposition().getStage().$("section_article_nosContigo_container").animate({ scrollTop: '+=40' });

       

      Mouseup:

      sym.getComposition().getStage().$("section_article_nosContigo_container").animate({ scrollTop: "+=0" });

       

      This is Heathrowe's original code - all credit to him -, but I want the buttons to do a continuously scroll until I Mouseup and not bit by bit ('+=40').

      How do I do it?

      Thanx.

        • 1. Re: Simple up/down scroll button to control overflow
          joel_pau Level 5

          Hi,

           

          I think that you can use:

          mousemove,

          a variable top: to write scrollTop(top) or scrollTop: top

          e.pageY,

          offset

          • 2. Re: Simple up/down scroll button to control overflow
            pmfr01 Level 2

            I'm using mouse clicking events - mousedown + mouseup - not mouse moving events.

            • 3. Re: Simple up/down scroll button to control overflow
              joel_pau Level 5

              So, you add a variable, and so on, using your events.

              • 4. Re: Simple up/down scroll button to control overflow
                pmfr01 Level 2

                Hmmm... could you be more specific with my code? I'm not very good at JQuery... (only at HTML/CSS).

                • 5. Re: Simple up/down scroll button to control overflow
                  heathrowe Most Valuable Participant

                  This should help

                   

                  View sample here - http://www.heathrowe.com/edge/scroll_continuous/scrollcontinuous.html

                   

                  Detail Code/Description below: I have all the code in Stage > compositionComplete

                  Simply remap the elements (content, up, down) to match yours.

                   

                  //////////////////Code ////////////////////////////////////////////////

                   

                  // Function to to animate scroll up using jquery animate (properties [, duration] [, easing] [, complete])
                  // animates at 20 pixel increments from Top, 300 hundreds of a second, linear easing, repeat function on complete
                  // http://api.jquery.com/animate/
                  // Change the the duration/easing value for speed

                  function scrollContDn(){
                      sym.$("content").stop().animate({scrollTop:'+=20'}, 300, 'linear', scrollContDn);
                  }

                         

                  // Function to to animate scroll down using jquery animate (properties [, duration] [, easing] [, complete])
                  // animates at 20 pixel decrements from Top, 300 hundreds of a second, linear easing, repeat function on complete


                  function scrollContUp(){
                      sym.$("content").stop().animate({scrollTop:'-=20'}, 300, 'linear', scrollContUp);
                  }

                   

                  // Function to stop scroll


                  function stopScroll(){
                      sym.$("content").stop();
                  }

                   

                  // Event for Down Button/Element


                  sym.$("down").mousedown(function(e){        // mousedown
                     scrollContDn();                                         // call scrollContDn function
                     }).mouseup(function(e){                           // sequential chain mouseup function
                     stopScroll();                                             // call stopScroll function
                     });

                   

                  // Event for Up Button/Element


                  sym.$("up").mousedown(function(e){
                     scrollContUp();
                     }).mouseup(function(e){
                     stopScroll();
                     });

                  ///////////////////////////////////////////////////////////////

                   

                  Download sample here.

                  • 6. Re: Simple up/down scroll button to control overflow
                    pmfr01 Level 2

                    Thank you so much Heathrowe.

                    Since I'm trying to understand how Edge's event snippets coding work, I'd like to "break" the code you gave me and "distribute it" through the Mousedown and Mouseup actions - I already tried but, apparently, it didn't work.

                    Here's what I did:

                     

                    Up button

                    Mouseup:

                    function stopScroll(){

                    sym.$("content").stop();

                    }

                    this.$().mouseup(function(e){

                    stopScroll()

                    });

                     

                    Mousedown:

                    function scrollContUp(){

                    sym.$("content").stop().animate({scrollTop:'-=20'}, 300, 'linear', scrollContUp);

                    }

                    this.$().mousedown(function(e){

                    scrollContUp()

                    });

                     

                    Down button

                    Mouseup:

                    function stopScroll(){

                    sym.$("content").stop();

                    }

                    this.$().mouseup(function(e){

                    stopScroll()

                     

                    Mousedown:

                    function scrollContDn(){

                    sym.$("content").stop().animate({scrollTop:'+=20'}, 300, 'linear', scrollContDn);

                    this.$().mousedown(function(e){

                    scrollContDn();

                    });

                     

                    Is it doable? If so, it would be awsome, if not, the problem is still solved.

                    Thanx again.

                    • 7. Re: Simple up/down scroll button to control overflow
                      heathrowe Most Valuable Participant

                      You were close...

                       

                      /////Down > mousedown

                       

                      function scrollContDn(){
                          sym.$("content").stop().animate({scrollTop:'+=20'}, 300, 'linear', scrollContDn);
                      }

                      scrollContDn();

                       

                      /////Down > mouseout

                       

                      sym.$("content").stop();

                       

                      ------------------------

                       

                      /////Up > mousedown

                       

                      function scrollContUp(){
                          sym.$("content").stop().animate({scrollTop:'-=20'}, 300, 'linear', scrollContUp);
                      }

                      scrollContUp();

                       

                      /////Up > mouseout

                       

                      sym.$("content").stop();

                       

                      --------------------------

                       

                      Here is the update sample (file marked _b.html)

                      • 8. Re: Simple up/down scroll button to control overflow
                        pmfr01 Level 2

                        That's it - the scrollTop values are reversed, though.

                        Heathrowe, Im'very grateful.

                        Thank you so much!

                         

                        pmfr01

                        • 9. Re: Simple up/down scroll button to control overflow
                          heathrowe Most Valuable Participant

                          Ha- good catch.

                          Your welcome.

                           

                          Darrell