8 Replies Latest reply on Jul 21, 2015 2:10 PM by resdesign

    Position symbol by code

    ryan_pu Level 1

      i got a square that pulses yellow to serve as a highlighter. It will be reused so I made it a symbol.

       

      i have it inserted and playing by code but can't figure out how to position it. Using .css(left: 10) does nothing and 10% throws an error. How do I move a symbol with code?

       

      ALso tried -WebKit-transform-origin with no luck.

        • 1. Re: Position symbol by code
          Zoze Level 1

          try

          .css({left:"10px"});

           

          or

           

          .css({ "left":"10px"});

          • 2. Re: Position symbol by code
            ryan_pu Level 1

            nope, didn't work.

            • 3. Re: Position symbol by code
              Zoze Level 1

              sym.$("yoursymbol").css({ "left":"10px"});

               

              and doesn't work?

              • 4. Re: Position symbol by code
                ryan_pu Level 1

                no... I may have found an issue with the way i built it.

                 

                var highlight1 = sym.createChildSymbol("highlight", "Stage");

                //highlight1.stop(1000);

                 

                //alert(highlight1);

                 

                highlight1.animate({

                  transform: 'translateX(50px)'

                });

                 

                so it creates, stop works and delete works but when I do the alert it comes back empty. I'm wondering if I am telling nothing to do something. Do I need to declare a symbol name or something?

                • 5. Re: Position symbol by code
                  ryan_pu Level 1

                  I started digging into the html and found


                  My next button has an ID of:

                  id="Stage_Next"


                  My code made Symbol has an ID of:

                  id="eid_1437510791584"


                  I'm thinking this may be the break.

                  • 6. Re: Position symbol by code
                    resdesign Adobe Community Professional & MVP

                    Hi there! A little tip about created symbols. If you give them an id or a class name, it is very easy to use them later.

                    here is how to do it:

                    var NewSymbolInstance = sym.createChildSymbol("mySymbol", "Stage");

                    NewSymbolInstance.element.addClass("newClassName");

                    NewSymbolInstance.element.attr("id","idnew");


                    to use with new id - make sure you add the # tag:

                    sym.getSymbol("#idnew")

                    to sure with class name:

                    sym.$('.colorIt').css({'left':100});  // any css on the symbol - if you need to change something inside, use the new class name and the correct scope

                    sym.getSymbol('.newClassName').play();



                    • 7. Re: Position symbol by code
                      ryan_pu Level 1

                      So I finally got it. I was close the whole time but slightly off with syntax. Also had to add getSymbolElement()

                       

                      var highlight1 = sym.createChildSymbol("highlight", "Stage").getSymbolElement();

                      highlight1.css({"left":500 + 'px'});

                       

                      resDesign,

                      Would your way be the more standard way of doing it? I am learning this software to build a workflow for our artist and would prefer to stick close to industry standards as possible.

                      • 8. Re: Position symbol by code
                        resdesign Adobe Community Professional & MVP

                        either way is industry standard. It depends how much you want to manipulate

                        your symbols and how deep. i think the id or classes much more versatils.