3 Replies Latest reply on Mar 31, 2013 10:10 PM by aelxproter

    Expansion from pixel size to %

    aelxproter

      I'm trying to make a simple rectangle expand from a specific pixel-based size, to a percentage based size.  Essentially I'm trying to make a box with a set size, expand from anywhere on a page, to fit the window size of the user.  Is this possible in the edge UI? I believe it should be possible with JS if not, but the UI is just so convenient,

       

      Thanks

        • 1. Re: Expansion from pixel size to %
          heathrowe Most Valuable Participant

          Hi aelxproter

          Are you attempting the 'expand' operation to occur upon a click action?

           

          Darrell

          • 2. Re: Expansion from pixel size to %
            shadowfax007 Level 1

            In the properties panel (left) you can set your object to Pixels OR Percentages.  Use Percentages for all 4 width/height left/top properties.

            I usually do this by building my stage, choosing the bottom right box in the "Realative to top or right" option (4 small "boxes" to the top left of the lt/wh properties (where you can change from pixels to percentages.)).  This will allow everything to expand to the right depending on the browser size.  You will have to play with the  "Relative to top or right" settings as some I have set to the top left box if they are to the far left of the stage and I don't want them to move...

             

            I hope that answers your question :-)

             

            James

            • 3. Re: Expansion from pixel size to %
              aelxproter Level 1

              @ Darrell,

               

              I am trying to expand on click

               

              @Shadowfax007

               

              I'm already aware of how to use the % method to judge fullscreen sizing, however I'm trying to use a pixel scale for the initial size, and then scale the object to full screen.  For example, if the image is %based on one window/screen, it will have a different size on another device/screen.  I am able to fix this to work by jumping in to the files but it would be good to see this as an option in the UI.

               

              My edge file looks like this. Note the change of from a px based measurement to a %. It's a little wonkey but no matter the browser size, the rectangle always starts at a specific size, and then expands to 95%:

               

               

               

               

              /**

              * Adobe Edge: symbol definitions

              */

              (function($, Edge, compId){

              //images folder

              var im='images/';

               

              var fonts = {};

               

               

              var resources = [

              ];

              var symbols = {

              "stage": {

                 version: "1.5.0",

                 minimumCompatibleVersion: "1.5.0",

                 build: "1.5.0.217",

                 baseState: "Base State",

                 initialState: "Base State",

                 gpuAccelerate: false,

                 resizeInstances: false,

                 content: {

                       dom: [

                       {

                          id:'Rectangle',

                          type:'rect',

                          rect:['-50px','1241px','497px','929px','auto','auto'],

                          fill:["rgba(192,192,192,1)"],

                          stroke:[3,"rgba(229,0,116,1.00)","solid"]

                       }],

                       symbolInstances: [

               

                       ]

                    },

                 states: {

                    "Base State": {

                       "${_Stage}": [

                          ["color", "background-color", 'rgba(255,255,255,1)'],

                          ["style", "width", '100%'],

                          ["style", "height", '100%'],

                          ["style", "overflow", 'hidden']

                       ],

                       "${_Rectangle}": [

                          ["style", "top", '1px'],

                          ["color", "border-color", 'rgba(229,0,116,1.00)'],

                          ["style", "left", '1px'],

                          ["style", "height", '244px'],

                          ["style", "border-style", 'solid'],

                          ["style", "border-width", '3px'],

                          ["style", "width", '294px']

                       ]

                    }

                 },

                 timelines: {

                    "Default Timeline": {

                       fromState: "Base State",

                       toState: "",

                       duration: 1000,

                       autoPlay: false,

                       timeline: [

                          { id: "eid28", tween: [ "style", "${_Rectangle}", "top", '2.5%', { fromValue: '1px'}], position: 0, duration: 1000 },

                          { id: "eid25", tween: [ "style", "${_Rectangle}", "height", '95%', { fromValue: '244px'}], position: 0, duration: 1000 },

                          { id: "eid26", tween: [ "style", "${_Rectangle}", "width", '95%', { fromValue: '294px'}], position: 0, duration: 1000 },

                          { id: "eid27", tween: [ "style", "${_Rectangle}", "left", '2.5%', { fromValue: '1px'}], position: 0, duration: 1000 }         ]

                    }

                 }

              },

              "one": {

                 version: "1.5.0",

                 minimumCompatibleVersion: "1.5.0",

                 build: "1.5.0.217",

                 baseState: "Base State",

                 initialState: "Base State",

                 gpuAccelerate: false,

                 resizeInstances: false,

                 content: {

                 },

                 states: {

                    "Base State": {

                       "${symbolSelector}": [

                          ["style", "height", '100%'],

                          ["style", "width", '100%']

                       ]

                    }

                 },

                 timelines: {

                    "Default Timeline": {

                       fromState: "Base State",

                       toState: "",

                       duration: 0,

                       autoPlay: false,

                       timeline: [

                       ]

                    }

                 }

              }

              };

               

               

              Edge.registerCompositionDefn(compId, symbols, fonts, resources);

               

              /**

              * Adobe Edge DOM Ready Event Handler

              */

              $(window).ready(function() {

                   Edge.launchComposition(compId);

              });

              })(jQuery, AdobeEdge, "EDGE-9618535");h