6 Replies Latest reply on Jan 30, 2014 12:13 PM by Peccare

    Sarhunt's Resizing Code and Adobe Muse

    Peccare

      Hey everyone,

       

      First, I want to say thank you to the people who have already helped me. You guys are really a great community and fantastic resource for newbies like myself.

       

      Second, I am having difficulty with resizing/scaling. I was able to discover an old post about dynamic resizing/scaling by sarhunt. The code works beautifully when I preview it in Adobe Animate. But when I drag and drop the published .oam file into my Adobe Muse website and then preview the website, it no longer rescales. Can anyone help explain where I might be going wrong and what I can do to the fix the problem?

       

      Currently, I have in CompositionReady:

       

       

       

       

       

       

       

       

       

       

       

      var stageHeight = sym.$('Stage').height(); // Set a variable for the height of the stage

       

       

      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 stageWidth = stage.width(); // Get the stage width

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

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

       

       

      // 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();

      });

       

       

       

       

       

       

       

       

       

       

       

       

       

       

      Thank you.