8 Replies Latest reply on May 18, 2015 1:11 PM by frazierdesignlq

    Composition not scaling in parent div

    frazierdesignlq

      Composition scaling not working and does not scale to parent div but to browser window...HELP!

        • 1. Re: Composition not scaling in parent div
          seano2o7 Level 3

          Hi can you show a demo or post the project on here so I can have a look please

          • 2. Re: Composition not scaling in parent div
            frazierdesignlq Level 1

            This is how it looks...will not be contained...

            screen01.PNG

            • 3. Re: Composition not scaling in parent div
              seano2o7 Level 3

              Theres this responsive scaling code, which works well from Sarah Justine.  Put in compositionReady

               

              sym.$(“#Stage”).css({ // Set the transform origin so we always scale to the top left corner of the stage

              “transform-origin”:”0 0″,

              “-ms-transform-origin”:”0 0″,

              “-webkit-transform-origin”:”0 0″,

              “-moz-transform-origin”:”0 0″,

              “-o-transform-origin”:”0 0″

              });

               

               

              function scaleStage() {

              var stage = sym.$(‘Stage’); // Set a reusable variable to reference the stage

              var parent = sym.$(‘Stage’).parent(); // Set a reusable variable to reference the parent container of the stage

              var parentWidth = stage.parent().width(); // Get the parent of the stage width

              var parentHeight = $(window).height(); // Get the browser window height

              var stageWidth = stage.width(); // Get the stage width

              var stageHeight = stage.height(); // Get the stage height

              var desiredWidth = Math.round(parentWidth * 1); // Set the new width of the stage as it scales

              var desiredHeight = Math.round(parentHeight * 1); // Set the new height of the stage as it scales

              var rescaleWidth = (desiredWidth / stageWidth); // Set a variable to calculate the new width of the stage as it scales

              var rescaleHeight = (desiredHeight / stageHeight); // Set a variable to calculate the new height of the stage as it scales

              var rescale = rescaleWidth;

               

               

              if (stageHeight * rescale > desiredHeight) // Do not scale larger than the height of the browser window

              rescale = rescaleHeight;

               

               

              // Rescale the stage!

               

               

              stage.css(‘transform’, ‘scale(‘ + rescale + ‘)’);

              stage.css( ‘-o-transform’, ‘scale(‘ + rescale + ‘)’);

              stage.css(‘-ms-transform’, ‘scale(‘ + rescale + ‘)’);

              stage.css(‘-webkit-transform’, ‘scale(‘ + rescale + ‘)’);

              stage.css(‘-moz-transform’, ‘scale(‘ + rescale + ‘)’);

              stage.css(‘-o-transform’, ‘scale(‘ + rescale + ‘)’);

              parent.height(stageHeight * rescale); // Reset the height of the parent container so the objects below it will reflow as the height adjusts

               

               

              }

               

               

              // Make it happen when the browser resizes

              $(window).on(‘resize’, function(){

              scaleStage();

              });

               

               

              // Make it happen when the page first loads

              $(document).ready(function(){

              scaleStage();

              });

               

              You might need to edit the parent in the code if that doesn't work.

              • 4. Re: Composition not scaling in parent div
                frazierdesignlq Level 1

                Can you tell me where 'compositionReady Is? Or do I need to add in coding window?

                • 5. Re: Composition not scaling in parent div
                  seano2o7 Level 3

                  Click to Add a Trigger Event on Stage and it's there

                   

                  Screen Shot 2015-05-18 at 20.07.27.png

                  • 6. Re: Composition not scaling in parent div
                    frazierdesignlq Level 1

                    This does not work...when EA first came out I was able to just set 100% width and it would scale in parent...this is very frustrating.

                    • 7. Re: Composition not scaling in parent div
                      seano2o7 Level 3

                      Sorry there was errors in that code. Try this

                       

                       

                       

                      sym.$("#Stage").css({

                         "transform-origin":"0 0",

                         "-ms-transform-origin":"0 0",

                         "-webkit-transform-origin":"0 0",

                         "-moz-transform-origin":"0 0",

                         "-o-transform-origin":"0 0"

                         });

                       

                       

                         function scaleStage() {

                         var stage = sym.$("Stage"); // Set a reusable variable to reference the stage

                         var parent = sym.$("Stage").parent(); // Set a reusable variable to reference the parent container of the stage

                         var parentWidth = stage.parent().width(); // Get the parent of the stage width

                         var parentHeight = $(window).height(); // Get the browser window height

                         var stageWidth = stage.width(); // Get the stage width

                         var stageHeight = stage.height(); // Get the stage height

                         var desiredWidth = Math.round(parentWidth * 1); // Set the new width of the stage as it scales

                         var desiredHeight = Math.round(parentHeight * 1); // Set the new height of the stage as it scales

                         var rescaleWidth = (desiredWidth / stageWidth); // Set a variable to calculate the new width of the stage as it scales

                         var rescaleHeight = (desiredHeight / stageHeight); // Set a variable to calculate the new height of the stage as it scales

                         var rescale = rescaleWidth;

                       

                       

                         if (stageHeight * rescale > desiredHeight) // Do not scale larger than the height of the browser window

                         rescale = rescaleHeight;

                       

                       

                         // Rescale the stage!

                       

                       

                         stage.css("transform", "scale(" + rescale + ")");

                         stage.css( "-o-transform", "scale(" + rescale + ")");

                         stage.css("-ms-transform", "scale(" + rescale + ")");

                         stage.css("-webkit-transform", "scale(" + rescale + ")");

                         stage.css("-moz-transform", "scale(" + rescale + ")");

                         stage.css("-o-transform", "scale(" + rescale + ")");

                         parent.height(stageHeight * rescale); // Reset the height of the parent container so the objects below it will reflow as the height adjusts

                       

                       

                         }

                       

                       

                         // Make it happen when the browser resizes

                         $(window).on("resize", function(){

                         scaleStage();

                         });

                       

                       

                         // Make it happen when the page first loads

                         $(document).ready(function(){

                         scaleStage();

                         });

                      • 8. Re: Composition not scaling in parent div
                        frazierdesignlq Level 1

                        No this still does not work...