6 Replies Latest reply on Jan 2, 2017 8:28 PM by Moshe.assulin

    change height and width thru code

    Moshe.assulin Level 1

      Hi

       

      I have A symbol (name: "graph 1") its width: 24px height:120px. I want to change the measurement thru code to: width: 14 px height: 240 px. How can I make it?

       

      TIA

        • 1. Re: change height and width thru code
          resdesign Adobe Community Professional & MVP

          Easy use css:

           

           

          sym.$("symName").css({'width': 14, height: 240});

           

          or if you change it several times create variables:

           

          var sWidth = sym.$("symName").width();

          var sHeight = sym.$("symName").height();

           

          sWidth = 14;

          sHeight = 240;

           

          sym.$("symName").css({'width': sWidth , 'height': sHeight });

          • 2. Re: change height and width thru code
            resdesign Adobe Community Professional & MVP

            BTW put this in Stage/compositionReady

            • 3. Re: change height and width thru code
              mlprouty Level 1

              I have found that it is conceptually easiest to use a symbol's id or class to reference it.

               

              rename graph 1 to graph_1.

               

              Using a class:

              In the properties panel next to the name is a little "c" symbol. The "c" stands for class. Give a class name of "graph_1."

              $(".graph_1").css({'width': 14, height: 240});

               

              using an id:

              $("#Stage_graph_1").css({'width': 14, height: 240});

              • 4. Re: change height and width thru code
                resdesign Adobe Community Professional & MVP

                Why not!? Though I would still use EA conventions:

                sym.$(".graph_1").css({'width': 14, height: 240});

                • 5. Re: change height and width thru code
                  mlprouty Level 1

                  In my humble opinion, it is much easier to use jquery conventions rather than EA conventions.

                   

                  For example, changing the css properties of a div, "innerRect1",  which is rectangle inside a symbol named "mySymbol."

                   

                  EA convention:

                  sym.getSymbol("mySymbol").$("innerRect1").css({"backgroundColor":"red", "border": "2px solid black"});

                   

                  jquery convention using an id:

                  $("#Stage_mySymbol_innerRect1").css({"backgroundColor":"red", "border": "2px solid black"});

                   

                  jquery convention using class of innerRect1 :

                  $(".innerRect1").css({"backgroundColor":"red", "border": "2px solid black"});

                   

                  Using EA conventions can be tentamount to learning a new language and for me can add an additional level of difficulty. For example, it can be much easier following a stackoverflow example using jquery conventions instead of trying to translate that same example into an EA convention. It also makes coding easier if you're creating external scripts.

                   

                  Except for triggering timeline events, I strongly recommend using jquery syntax (conventions).

                  • 6. Re: change height and width thru code
                    Moshe.assulin Level 1

                    Hi Redesign and Mlprouty

                     

                    I wish I knew what you are talking about .... but anyway I got an idea about how things work.

                     

                    Where can I find more CSS codes to change the dimensions of the Symbols on the stage? I want to dive into this issue.

                     

                     

                    TIA