3 Replies Latest reply on Jun 9, 2015 8:51 AM by g.bollmann

    Dynamically set rectangle height

    g.bollmann Level 1

      I need to set a rectangle height according to elements it may dynamically contain. I need the container to float it's size accordingly.

       

      For example:

      "Apple" class needs additional height of 10 pixels

      "Pear" class needs additional height of 10 pixels

      "Peach" class needs additional height of 10 pixels

      So... if I toggle Apple, Pear, Peach all on ... I need to add 30 pixels to the height of "rectBasket".


      Goal: Basket adjusts its height upon each toggle. In the toggle per each fruit:

       

      if (sym.$(".Apple").is(":visible")) {

        sym.$(".Apple").hide();

        var htApple = 0;

      } else {

        sym.$(".Apple").show();

        var htApple = 10;

      }


      var htBasket = htApple + htPear + htPeach;

      // Does it matter that the variables for Pear and Peach were set in a different toggle?

       

      sym.getComposition().getStage().getSymbol("GV-4Cases").$("rectBasket").css({"height": "htBasket"});

      // Placed Immediately following, shouldn't this resize the Basket?

       

       

      No luck.

       

      I am a "high functioning designer" with regard to code. Can anyone correct me with a simple and clear description or  give a better (direct, easy) method to change the height of "rectBasket" dynamically?

       

      Many thanks! Grace

        • 1. Re: Dynamically set rectangle height
          resdesign Adobe Community Professional & MVP

          can you post a sample?

          • 2. Re: Dynamically set rectangle height
            Zaxist Level 4

            if you want to make basket have auto height then you need to select all your item that needs to be in the basket  / then right click and click on Group Elements in Div / you need to do it because your items should be child for your basket, now Group is your basket and you can set your image as background in this div and this Div can have auto height by using this line in your composition ready

             

            sym.$("Group").css({"border":"black 5px solid"}).css('height', 'auto');

             

            i added border into div so you can see while it changes according to your items

             

            regadrs

            Zaxist

            • 3. Re: Dynamically set rectangle height
              g.bollmann Level 1

              I did it. I forced myself to understand variables (you hear me, designers).

               

              Goal: Float a rectangle size, which elements are oriented on, such that when elements are toggled on, the rectangle gets bigger ( so the elements do not overlap each other). An accordian of sorts. Each of the elements is relative to either the top or bottom corner, so when the rectangle increases, the elements are pulled apart.

               

              BTW, many thanks to resdesign who is always helpful to read. Her other posts contributed to me cobbling together an answer for my specific case. Thx!

               

              Step 1:

              Declare the variable in compositionReady

              // Declare the variables which elements will later refer to

              var AppleHigh;

              var PearHigh;

              var PeachHigh;

              var ComboHigh;

               

              Step 2:

              Within the toggle code of each element (Toggle on/off Apple, Pear, Peach, ...), declare the variables beneath the main code

              var AppleHigh;

              var PearHigh;

              var PeachHigh;

              var ComboHigh;

               

              Step 3:

              Below there, create a toggle of the variable value

              // for Apple class

              if (sym.$(".Apple").is(":visible")) {

                var AppleHigh = 55;

              } else {

                var AppleHigh = 0;

              }

               

              // for Pear class

              if (sym.$(".Pear").is(":visible")) {

                var PearHigh = 55;

              } else {

                var PearHigh = 0;

              }

               

              // for the Peach class

              if  (sym.$(".Peach").is(":visible")) {

                var PeachHigh = 30;

              } else {

                var PeachHigh = 0;

              }

               

              Step 4:

              Below there, declare and define the variable which tallies the new height

              var comboHigh = 175 + AppleHigh + PearHigh + PeachHigh;

              //alert(comboHigh) ////  uncomment to test the value in pop up window

              // NOTE: 175 is the initial basis rectangle height

               

              Update: I use this instead

              Declared "var boxStartSize;" in both: compositionReady and above the toggle in the element's code

              In the element's code...

              var boxStartSize = sym.getComposition().getStage().getSymbol("GV-4Cases").$("CASE-master-box").height();

              // gets the integer value of the height


              var comboHigh = boxStartSize + bottomlyHigh + pronounHigh + pseudosHigh + personalsHigh;

              This is so that once I copy this structure all around different places I do not have to return to handcode the initial rectangle height.

               

              Step 5:

              Use the tally to change the box height

              ///// CHANGE THE BOX HEIGHT /////

              sym.getComposition().getStage().getSymbol("GV-4Cases").$("CASE-master-box").css({"height": comboHigh});

              // IMP: no quotes on the variable value!!

              Quotes on the variable value were a big obstacle for me. Took me a while to figure out that detail. Ugh.

               

              Step 6:

              Create same for each element toggle, so the height is re-evaluated anytime you change a toggle.

               

              Step 7:

              Assign/Check the relative corner.

              Check to which corner your elements have been assigned! Select the element, look for the icon of the 4 tiny squares next to Global/Applied in the Properties panel. Pick a corner. This is where the element is set to be relative to a parent.

               

              Make sure the element has a parent... via dragging it into a div structure or onto a rectangle structure.

               

              Example could look like this:

              RectangleMaster

              >RectangleApple

              >>Apple.svg

              >RectangleFruitChoice

              >>RectanglePear

              >>Pear.svg

              >>RectanglePeach

              >>Peach.svg

               

              Here, in this example, RectangleMaster is the parent of RectangleApple and RectangleFruitChoice.  That means I've dragged the rectangles onto another rectangle to build the structure. Select the element and choose a corner from the tiny squares icon accordingly.

               

              Likewise, RectangleFruitChoice is the parent of  RectanglePear and RectanglePeach.

               

              In this way, you can build a complex and dynamic structure.

               

              Best luck to all you code-ambitious designers out there! /GB