9 Replies Latest reply on Jun 11, 2014 11:26 PM by Xoco

    mouse wheel action

    basparmak Level 1

      Hi all,

       

      I want to trigger a specific action when the visitor uses the mouse wheel. Normaly, I know how to do it using the window scroll function, but in my situation, the page is static and not scrolling. The scroling bodies are placed inside clips or symbols.

      I am looking for a similar solution like:

       

      if (e.which == 40) {

                sym.getSymbol("mainbody").play();

      }

      (when pressed down arrow, mainbody plays.)

       

      Is there any way to apply it to mouse wheel like for example if the user scrolls the wheel down, do something.

       

      swiping down or up (if possible) may also help.

       

      Thanks all in advance...

        • 1. Re: mouse wheel action
          Sudeshnasarkar27 Adobe Employee

          Hi ,

           

          You can try the following snippet - Add this to the mousemove action of the stage

           

          $(window).bind('mousewheel' , function(e)

          {

               if(e.originalEvent.wheelDelta <0)

               {

                  //MouseScroll down event ;Insert your code here 

                    console.log("Down");

               }

               else

               {

                    //Mouse scroll up event;Insert your code here

                    console.log("Up");

               }

           

               return false;

          });

           

          Attaching a simple sample!

           

          Thanks and Regards,

          Sudeshna Sarkar

           


          • 2. Re: mouse wheel action
            basparmak Level 1

            Many thanks sudeshna, it's working.

            • 4. Re: mouse wheel action
              Sudeshnasarkar27 Adobe Employee

              Hi ,

               

              So when do you want this action to be triggered? Is it on keydown i.e arrow keys to play and stop the symbol animation?

               

              Regards,

              Sudeshna

              • 5. Re: mouse wheel action
                Xoco Level 3

                I want this action to be triggered when the mouse wheel to move (up or down) to move the panels (div) of my website (up or down) but without scrolling.

                 

                Each program option are divs of 100% width and 100% height and placed them before moving to the right or left for swipeleft or swiperight (or when user click in option name in menu) like this...

                 

                Example for swiperight:

                sym.$( newoption ).animate({"left": "-100%"},   0, easing);

                sym.$( newoption ).animate({"left":"+=100%"}, 500, easing);

                sym.$( oldoption ).animate({"left":"+=100%"}, 500, easing);

                 

                ...and I want to move up or down depending of the movement of the mouse wheel with...

                 

                Example for mouse wheel down:

                sym.$( newoption ).animate({"top": "+100%"},   0, easing);

                sym.$( newoption ).animate({"top":"-=100%"}, 500, easing);

                sym.$( oldoption ).animate({"top":"-=100%"}, 500, easing);

                 

                I found this code but still do not know how to adapt to Edge for to detect Firefox: The onmousewheel event of JavaScript

                 

                Edit: is much better write your script in document.CompositionReady (and not in Stage.mousemove) because in mousemove is triggered too many times.

                • 6. Re: mouse wheel action
                  Xoco Level 3

                  To: Sudeshnasarkar27

                  Well, I do not know otherwise ...

                   

                  // Compatible with non Firefox

                  $(window).bind("mousewheel", function(e){

                    var delta = e.originalEvent.wheelDelta;

                     if (rodetalag == 1){

                      delta <= -120? canviopcio(sym, activa + 1, "v"): canviopcio(sym, activa - 1, "v");

                     }

                     return true;

                  });

                   

                  // Compatible with Firefox

                  $(window).bind("DOMMouseScroll", function(f){

                    var delta = f.originalEvent.detail;

                    if (rodetalag == 1){

                      delta >= 1? canviopcio(sym, activa + 1, "v"): canviopcio(sym, activa - 1, "v");

                     }

                     return true;

                  });


                  rodetalag variable is set to 0 when trigger canviopcio (optionchange) global function and is set to 1 with setTimeout( function(){ rodetalag=1 }, 500 ); for to avoid accumulated wheel movement, delaying 500ms the next option change.


                  Source: The onmousewheel event of JavaScript

                  • 7. Re: mouse wheel action
                    Xoco Level 3

                    my client tells me that does not work well on Mac, anyone can try it? I have only Windows ...

                     

                    http://wwwVolGastronomic.com/

                     

                    thanks

                    • 8. Re: mouse wheel action
                      Sudeshnasarkar27 Adobe Employee

                      Yes , this is not working on Mac. Tried it on Mac 10.9.2. It works perfectly on Windows.

                       

                      Regards,

                      Sudeshna

                      • 9. Re: mouse wheel action
                        Xoco Level 3

                        Better now? As the return value is highly variable depending on the browser (in Maxthon is 192/-192 for example) and the OS, I decided to see only if it is greater or less than zero and avoid zero values. Works now on Mac? you can test console log.


                        $(window).bind("mousewheel", function(e){

                            var delta = e.originalEvent.wheelDelta;

                              console.log("mousewheel: " + delta);

                           if (rodetalag == 1){

                               if (delta < 0 ) canviopcio(sym, activa + 1, "h");

                                   else if (delta > 0) canviopcio(sym, activa - 1, "h");

                           }   

                           return true;

                        });

                        $(window).bind("DOMMouseScroll", function(f){

                            var delta = f.originalEvent.detail;

                              console.log("DOMMouseScroll: " + delta);

                           if (rodetalag == 1){

                               if (delta > 0) canviopcio(sym, activa + 1, "h");

                                   else if (delta < 0) canviopcio(sym, activa - 1, "h");

                           }   

                           return true;

                        });

                         

                        It was help me javascript - Normalizing mousewheel speed across browsers - Stack Overflow