2 Replies Latest reply on Aug 30, 2014 3:10 AM by Ggash

    Add TWO Edge Animations/Stages to ONE web page (without using oam)

    Jeffscheffs

      Hi All,

       

      This is a bit of a follow on question for those who are adding scalable height/width edge compositions to web pages using the awesome piece of code created by Sarah (http://sarahjustine.com/) and other forum contributors... (attached code below).

       

      My question is: How do I add a second Edge Animate composition to the same page using this method?  So it's using "Stage" already... i'm guessing it's a matter of changing it to "Stage_02" etc in the following code?  I've tried changing the relevant code but so far I have been unsuccessful in getting it to recognise a second stage.

       

      Any help would be appreciated, many thanks in advance for your time.

      Jeff

       

      Index.html

       

      <!--Adobe Edge Runtime-->

          <script type="text/javascript" charset="utf-8" src="clouds_edgePreload.js"></script>

          <style>

              .edgeLoad-EDGE-78729757 { visibility:hidden; }

          </style>

      <!--Adobe Edge Runtime End-->

       

      <div class="stagewrap">

              <div id="Stage" class="EDGE-78729757">

              </div><!-- Close Edge Animate Stage -->

      </div><!-- Close stagewrap -->

       

       

       

      Adobe Edge Stage Script

       

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

      });