6 Replies Latest reply on Sep 17, 2013 10:52 AM by AMULI

    Click event inside of nested symbol not functioning

    ladobeugm Level 1

      This is actually based upon a previous thread located here: http://forums.adobe.com/message/5596353#5596353

       

      I thought about simply adding to that thread, but in many ways, it deserves it's own seperate discussion.

       

      I used the examples Zaxist and AMULI put up to great success. On a navigation bar located directly within the root.

       

      Now the issue is doing the same with a nested menu inside of a symbol.

       

      In my example, I have a button that when clicked animates a navbar symbol downwards. That works. Also, the LINK button keeps it's background color set to black until another button in the main navbar is clicked. OK, there are no other buttons in this example. So just pretend and believe me, it works.

       

      Now in the nested clip, there's a similar function I definited in the compositionReady. Then added my actions to each of the four buttons inside of the nested navlink symbol. The rollover/hover effects work out great. But the click event brings up an error. It's basically the same click event as the navigation bar on the root, which does not bring up an error.

       

      My code inside of compositionReady is;

      // Reset Every Buttons State

      buttons = {

                      reset:function(){

                      sym.getSymbol("btnLink").$("back").css({"opacity":"0"})

                      }

      }

      // which button ?  Zero Means No One !!

      // we set this variable to get know e clicked on which button

      WB = 0;

       

      // Reset Every Sub Buttons State

      buttonsub = {

                      reset:function(){

                      sym.getSymbol("btnCommunication").$("back").css({"opacity":"0"})

                      sym.getSymbol("btnIndividuality").$("back").css({"opacity":"0"})

                      sym.getSymbol("btnCreativity").$("back").css({"opacity":"0"})

                      sym.getSymbol("btnInclusivity").$("back").css({"opacity":"0"})

                      }

      }

      // which button ?  Zero Means No One !!

      // we set this variable to get know e clicked on which sub button

      SB = 0;


      I'd like it where there are two functions. One for all the main buttons and one for all the child buttons. That way I can have two buttons stuck at the hover effect when clicked in sequence. Hopefully, that made some sense.

       

      Here's my click event inside the button 'btnIndividuality' inside of the nested navLink symbol:

       

      buttonsub.reset();

      sym.getSymbol("btnIndividuality").$("back").css({opacity: 1})

      SB = 1;

       

      The other three buttons are basically the same.

       

      So I tried a number of ideas. Mainly going directly from the Stage and drilling downwards in JQuery. Nope.

       

      So the error in Firebug is 'Javascript error in event handler! Event Type = element'on line 162 of  edge.2.0.0.min.js. This is that line:

       

      function(a){if(a){if(!this.aSymbolInstances)this.aSymbolInstances=[];this.aSymbolInstances .push(a.getSymbolElement())}};Y=function(a,c,b){function f(c,b){if(b.length>=2&&typeof b[0]==="object"&&typeof b[1]==="object"&&b[1].type!=="onError"){var e;e=d.Event("onError");if(g)e.compId=g.getComposition().compId;e.originalEvent=b[1];d(doc ument).triggerHandler(e)}window.console.log("Javascript error in event handler! Event Type = "+a)}var e=this[b[0]],g=this;if(typeof e==="function")if(b.slice(1),a==="element")return function(){var a;

       

      Why would I be getting this here and not on the root? What is the correct path to make this all work? So close, but not home just yet.

       

      Files are located at:

       

      https://www.dropbox.com/s/xlgfeeyam9hyuf3/nested.zip

        • 1. Re: Click event inside of nested symbol not functioning
          AMULI Level 4

          Hi ladobeugm,

           

          I will look at your source file tomorrow (my coach will soon transform into a pumpkin ).

           

          For now, I don't fully understand your long post but when your project gets complex, a good practice is to define different objects which are different namespaces :

           

          NAVBAR =

          {

            focus: 0,

            reset:function(){ … }

          };

           

          NESTED_MENU =

          {

            focus: 0,

            reset:function(){ … }

          };

           

          Then you can test :

           

          if (NAVBAR.focus) // shorcut for NAVBAR.focus != 0

          {

          }

           

          or call NESTED_MENU.reset()

           

          anywhere in your code. Notice how the same variable name (focus) or function name (reset)  can be used without conflicting, thanks to namespace given by the object name.

           

          Gil

          • 2. Re: Click event inside of nested symbol not functioning
            ladobeugm Level 1

            So basically instead of this:

             

            buttons = {

                            reset:function(){

                            sym.getSymbol("btnCommunication").$("back").css({"opacity":"0"})

                            }

            }

             

            I do this?

             

            buttons = {

                            focus: 0,

                            reset:function(){

                            sym.getSymbol("btnCommunication").$("back").css({"opacity":"0"})

                            }

            }

             

            For example?

             

            As for the rest, thanks Gil for helping me investigate this. Been trying all sorts of methods and it just seems to be to be something with nestings those symbols into another symbol.

            • 3. Re: Click event inside of nested symbol not functioning
              AMULI Level 4

              Hi ladobeugm,

               

              1) More precisely, instead of WB = 0 and

              buttons = {

                              reset:function(){

                              sym.getSymbol("btnCommunication").$("back").css({"opacity":"0"})

                              }

              }

               

              you write

              buttons = {

                              focus: 0, // replaces WB

                              reset:function(){

                              sym.getSymbol("btnCommunication").$("back").css({"opacity":"0"})

                              }

              }

               

              2) I had a quick look at your source. As you write in your first post "The other three buttons are basically the same.". Indeed, they differ only by the focus value (1, 2, 3 or 4) and by the name of the symbol. In such a situation, it's time for abstacting in a global function.

               

              First, rename the four instances : btnCommunication => btn1, btnIndividuality => btn2, btnCreativity => btn3, btnInclusivity => btn4.

               

              Then you define a global function in the compositionReady event handler :

               

              sym.overButton = function( numBtn)

              {

                if ( NAV_BAR.focus != numBtn)

                {

                  sym.getSymbol("btn" +numBtn).$("back").stop().animate({opacity: 1}, { duration: 500 });

                }

              }

               

              The btn1 > mouseover event handler reduces to :

               

              sym.getComposition().getStage().overButton( 1);

               

              btn2 > mouseover event handler :

               

              sym.getComposition().getStage().overButton( 2);

               

              etc. Proceed similarly with a outButton function and a clickButton function.

               

              3)

              1 person found this helpful
              • 4. Re: Click event inside of nested symbol not functioning
                AMULI Level 4

                Oops ! Sorry, without my knowing it was posted before being completed

                 

                3) So, using Firebug, you get this when you fire a click event

                 

                Capture d’écran 2013-09-17 à 16.57.22.png

                 

                In other words, sym.getSymbol("btnCommunication"), the first statement in your buttonsub.reset function fails.

                 

                In your mind, sym points to the navLink instance, the parent  of the btnCommunication instance.

                 

                But the buttonsub.reset function is defined in the compositionReady event handler, so when it runs sym points to the Stage symbol, which has no child symbol instance named btnCommunication. Hence the bug.

                 

                So, the symbol context should be passed to the function as a parameter. Define it like that :

                 

                buttonsub = {

                  reset:function( symClick)

                  {

                    symClick.getSymbol("btnCommunication").$("back").css({"opacity":"0"})

                 

                And call it like that :


                buttonsub.reset( sym);

                 

                In other words, the formal parameter symClick will receive sym as an effective parameter, that sym actually pointing to the navLink instance.

                 

                Gil

                .

                • 5. Re: Click event inside of nested symbol not functioning
                  ladobeugm Level 1

                  Gil, I could virtually kiss you right now! This is awesome. First time it didn't work but that was probably because I didn't copy the code correctly. Now it works. Thanks so much for this! BTW, is there a reason for the extra space in symClick like eset:function( symClick)?

                  • 6. Re: Click event inside of nested symbol not functioning
                    AMULI Level 4

                    Glad you made it work Thank you for your gratitude.

                    is there a reason for the extra space in symClick like eset:function( symClick)?

                     

                    The reason is just it's a personnal habit to introduce spaces to make the code more legible, as I am no compiler but a simple human For example, I would usually write

                     

                    sym.getSymbol( "btnCommunication").$( "back").css({ "opacity": "0"})

                     

                    It helps deciphering long lines of code. Indenting is also a great help. I also put curly braces on their own lines, giving the same identation to the opening brace and its matching closing brace. This proves very helpful to check that curly braces are balanced.

                     

                    Just little tricks to facilitate bug hunting. And you know how rough it can be

                     

                    Gil