7 Replies Latest reply on Jul 10, 2016 6:53 AM by kglad

    jquery toggle in Animate

    JasonClifford

      I have written a piece of code that works great to open and close a menu. Its a button in Animate that has three action key-frames. Closed, Open, and go back to Close. It uses the jquery toggle method and jquery ui.

      Problem: the button is clicked  - it plays and opens the panel. The Button is clicked - the panel closes and the animation resets to frame 0. But at this point you can click anywhere on the document and the buton is activated and runs the panel toggle and button timeline.

      I would like it to only run when the button itself is clicked.

      here is the three  code snippets for each key frame. Its also worth mentioning that the code inspector in Chrome throws an error saying that the jquery statement is not defined.

      Frame 1:

      this.stop();

       

      this.Hit_btn.on("click", Mouse_MenPop.bind(this));

       

       

      function Mouse_MenPop()

      {

       

        // Set the effect type

        var Meneffect = 'slide';

       

        // Set the options for the effect type chosen

        var MenOptions = { direction: 'left' };

       

        // Set the duration (default: 400 milliseconds)

        var MenDuration = 500;

        // just checking the class

       

        $('#Menu_Pop').toggle(Meneffect, MenOptions, MenDuration).toggleClass('');

       

      this.play();

       

       

      }

      Frame 24:

       

       

      this.stop();

       

       

      this.Hit_btn.on("click", Mouse_MenPop.bind(this));

       

       

      function Mouse_MenPop()

      {

       

      // Set the effect type

        var Meneffect = 'slide';

       

        // Set the options for the effect type chosen

        var MenOptions = { direction: 'left' };

       

        // Set the duration (default: 400 milliseconds)

        var MenDuration = 500;

        // just checking the class

       

        $('#Menu_Pop').toggle(Meneffect, options, MenDuration).toggleClass('open');

       

       

        this.play();

       

       

      }

      Frame 46:

      this.play(0);

       

      this.Hit_btn.on("click", Mouse_MenPop.bind(this));

       

       

      function Mouse_MenPop()

      {

      // Set the effect type

        var Meneffect = 'slide';

       

        // Set the options for the effect type chosen

        var MenOptions = { direction: 'left' };

       

        // Set the duration (default: 400 milliseconds)

        var MenDuration = 500;

        // just checking the class

       

       

        $('#Menu_Pop').toggle(Meneffect, MenOptions, MenDuration).toggleClass('');

       

        this.play();

       

       

      }

      this.Hit_btn.on("click", Mouse_MenPop.unbind(this));

      $('#Menu_Pop').removeClass('');

       

       

      As you can see at the end. I have even tried to unbind and remove the class.

       

      Any Help would be awesome!!

      Thanks

        • 1. Re: jquery toggle in Animate
          kglad Adobe Community Professional & MVP

          use removeEventListener to remove the unneeded/problematic click event listeners

          • 2. Re: jquery toggle in Animate
            JasonClifford Level 1

            Unfortunately this did not work. I even tried the removeAllEventListeners and that did remove everything but then the button would not work at all after. i have tried the ".off()"  and still no go.

            Here is a link to a demo page with the issue.

            Button

            As can be seen in the demo above, the button is bound on the first click as it transforms into an X. And still bound while it turns back to the hamburger icon. But after that - you can click anywhere on the page and it opens and closes the panel. This is not the desired effect. I would like only the button to open and close it. All the code is available in the browsers inspector. So annoying. What is most weird is that it works fine through the first run of the animation and then falls apart after that.

            Please Help!

            • 3. Re: jquery toggle in Animate
              kglad Adobe Community Professional & MVP

              remove the toggleClass method because you're not toggling anything with that code.

               

              and fix your toggle method, jQuery toggle() Method

              • 4. Re: jquery toggle in Animate
                JasonClifford Level 1

                Thanks kglad for your help but the issue seems to be with Animate CC and it handle the .toggle() in an animated environment.

                The toggleClass method was originally used to as a class checker for use as a stand alone script in a page to toggle open and closed an element.

                So now i have striped the code down to just a simple click handler function with the jquery toggle of slide, and a whole bag of other problems arise. 

                Code:

                 

                 

                MenuPop = $('#Menu_Pop');

                this.stop();

                this.Hit_btn.on("click", Mouse_MenPop.bind(this));

                function Mouse_MenPop()

                {

                  MenuPop.toggle('slide');

                 

                this.play();

                //MenuPop.toggle.stopPropagation();

                }

                 

                 

                 

                Here is a link also to the code implemented:

                Button2

                 

                With this code it again works fine on the first run through, but after the toggle() seems to retain a count of how may times it has been implemented. First run through works. Second run doubles the toggle call. Third tripples... and so on!

                I thought that it could be controlled by stopingPropagation(), and yes this worked but then the animation has again no bounds to the button and can be set off with a click anywhere on the screen like before.

                 

                The point of this was to link the open of the animated button's phases to the open an close of the slide menu. I had the toggle linked to the canvas element right in the html and that worked but if someone were to click the canvas twice quickly, the slide menu would run the toggle twice and be out of sync with what the button was showing. This why i wanted to add the toggle button code itself.

                 

                I am open to building a better box. I was thinking i could toggleClass and use css animation to handle the open and close, but with the toggle seeming to propagate  - I'm sure it will do the same for the toggleClass. That leaves me in the same place i am.

                Any Ideas as to why the generated code from Animate CC  is somehow remembering the number of toggles?

                As always, help is appreciated.

                Thanks

                • 5. Re: jquery toggle in Animate
                  kglad Adobe Community Professional & MVP

                  the problem's caused by your code or/and objects changing in the different frames of your timeline(s).

                   

                  ie, comment out that this.play() in Mouse_MenPop() and retest.  any problems?

                  • 6. Re: jquery toggle in Animate
                    JasonClifford Level 1

                    Fixed it. Jquery and the this.whatever cannot exist in the same click function (perhaps just this example?).

                    the toggle method would work by itself and the this.play would also work by itself.

                    the Solution was to move the call for the toggle to another frame. In other words - call the click function to run the animation on frame 1 and on frame 2 initiate the toggle function as the timeline passes frame 2 it just sets it off. Figured it had to be something stupid simple. Thank kglad for your continued help and any others who took the time to read.

                    Coding puzzles make beautiful pictures!

                    • 7. Re: jquery toggle in Animate
                      kglad Adobe Community Professional & MVP

                      you're welcome, but there's no problem with the code you showed.  ie, will work if there are no frame changes and everything is defined.