4 Replies Latest reply on Mar 18, 2016 9:23 AM by resdesign

    buttons hover and toggle

    kristiw15289990

      Hi,

       

      I am trying to create a button that will have normal, rollover and pressed state. I can get the button to toggle between normal and pressed state with a mouse click, but I can not get the hover to work. I am also able to create a button with a normal and rollover state, but it won't toggle to the pressed state.

      To clarify what I mean by pressed state: If I select the button, the appearance changes and when the mouse leaves the button it stays in that state until I select the button again. Currently, I can select the button and change states, but once the mouse leaves the button, it changes back to the normal state.

       

      Thanks

        • 1. Re: buttons hover and toggle
          resdesign Adobe Community Professional & MVP

          buttons with different states are a little tricky. You might want to add a variable to check the states. something like this:

          The button has three labels - on, over, pressed

          in compositionReady

           

          var state = 0;

          sym.$('button').bind('mouseenter', function(){

            sym.getSymbol("button").stop('over');

          });

           

          sym.$('button').bind('mouseleave', function(){

            if(state==0){

                sym.getSymbol("button").stop('on');

            }else if (state==1){

                sym.getSymbol("button").stop('pressed');

            state=0;

            }

          });

           

          sym.$('button').bind('mousedown', function(){

                sym.getSymbol("button").stop('pressed');

                state=1;

          });

          • 3. Re: buttons hover and toggle
            kristiw15289990 Level 1

            Hi,

             

            Thanks so much for your help! I was able to get the button to function the way I needed it with a few minor adjustments to your code.

             

            var state = 0;

            sym.$('button').bind('mouseenter', function(){

              sym.getSymbol("button").stop('over');

            });

             

             

            sym.$('button').bind('mouseleave', function(){

              if(state==0){

                  sym.getSymbol("button").stop('on');

              }else if (state==1){

                  sym.getSymbol("button").stop('pressed');

              state=1;

              }

            });

             

             

            sym.$('button').bind('mousedown', function(){

                 if(state==0){

                 sym.getSymbol("button").stop('pressed');

                  state=1;

              }else if (state==1){ 

              sym.getSymbol("button").stop('on');

              state=0;

              }   

            });

            • 4. Re: buttons hover and toggle
              resdesign Adobe Community Professional & MVP

              Great. Good luck on your project.