4 Replies Latest reply on Jun 18, 2014 11:33 AM by ATCJohn

    Symbols, Elements & A CSS Navbar

    ATCJohn

      Hello to everyone in the Edge community!

       

      I'm working on building an interactive presentation in edge, but having some trouble with a Symbol navbar. What I'm trying to do is edit an elements styling in a symbol (specifically position and background color). Basically there's a menu button element in a menu symbol, and when mouseenter, I'm trying to change multiple elements position to pull them on stage from above. Also aiming to set the positioning back on mouseleave.

       

      Among the many combinations I've tried:

       

      sym.$("element").css("cssStyle","cssProperty");

       

      sym.getSymbol("Symbol").$("element").css("cssStyle","cssProperty");

       

      var myAnim = AdobeEdge.getComposition("EDGE-######");

      var mySymbol = myAnim.getSymbols("Symbol")[0];

      var mySymbolElement = mySymbol.getSymbolElement("element");

      mySymbolElement.css("cssStyle","cssProperty");

       

      Frankly jQuery isn't my strong suit, as the above probably illustrates... but I haven't been able to even change the color of a symbols sub-element. I've tried variations of the above + several others adapted from these forums and stackoverflow, in every conceivable actions menu (I don't even know where I should be putting the mouseenter at this point - the symbol? the symbol's sub-element?).

       

      ...And now that I'm thinking about it, maybe this is the whole point of using Symbols separate timeline, to just key play and stop animations... at this point though, I'd like to learn how to more finely control an element for mouseovers/enters outside of a timeline.

       

      Really frustrated with no idea what to try, any thoughts or suggestions would be really appreciated!

        • 1. Re: Symbols, Elements & A CSS Navbar
          SimonDBench Level 1

          Are you trying to change the symbols CSS or an element inside the symbol?

           

          Simon

          • 2. Re: Symbols, Elements & A CSS Navbar
            ATCJohn Level 1

            I'm trying to change an element inside the symbol's CSS

            • 3. Re: Symbols, Elements & A CSS Navbar
              SimonDBench Level 1

              To do this you would target like this

               

              sym.getSymbol('symbolName').$('elementName').css({top:value, left:value, backgroundColour:'#ffffff'});

               

              I know that this is a method you listed above so perhaps it's a typo in your CSS values.  Could you share the line of code that you expect to work?

               

              And remember if in doubt console log the element you are targeting to make sure it's what you are expecting it to be.

               

              Simon

              1 person found this helpful
              • 4. Re: Symbols, Elements & A CSS Navbar
                ATCJohn Level 1

                Thank you for the replies SimonDB.

                 

                Including top and left values has gotten the top level issue settled, but still won't work for actions based inside the symbol. Let me explain:

                 

                sym.getSymbol('MenuBar').$('Video_Button').css({"top":"300px", "left":"50px"});

                sym.getSymbol('MenuBar').$('Brochures_Button').css({"top":"350px", "left":"50px"});

                sym.getSymbol('MenuBar').$('Case_Studies_Button').css({"top":"400px", "left":"50px"});

                 

                I'm using those on mouseenter, and another set with different top values on mouseleave - to push them on and off the actual stage for my navigation. The values are relative to the symbols stage, where I think I was getting held up with (partly) before.

                 

                However, the issue I've been having trouble tackling was applying mouseenter to elements inside a symbol. For example, from the above buttons that gets pushed onto the stage, lets say I wanted to create action mouseenter for Brochures_Button . I would think that based on the above code, I could do something like

                 

                sym.getSymbol('MenuBar').$('Bsubs').css({"top":"300px", "left":"226px"});

                 

                however, mousing over the Brochures_Button element (basically just a box) does not produce the expected result. Or any change at all for that matter. Unfortunately Firefox's :hover, :active & :focus do not work, I'm assuming because I'm trying to use mouseenter which is jQuery based, instead of mouseover? I'm going to try again with mouseover and if I'm able to find out any sort of result for the symbols elements, I will post back.

                 

                Thanks,

                -Nate