1 Reply Latest reply on Jun 5, 2014 5:49 AM by todd_rohrer

    How to dynamically update stage Height based on contained elements

    todd_rohrer Level 1

      In default HTML, elements acquire their height based on their contents.  From what I can tell, Edge Animate creates hard-coded or percent based heights for the stage.

       

      Is it possible to automatically adjust the stage height based on the contents of the animation?

       

      In my explorations, I was able to assign a new hard-coded value to the stage by setting its CSS value (in my case through the .animate method) as such:

       

      sym.$('Stage').animate({height: "560px"},1500, "swing");
      

       

      This was added to a click event for an object that also triggered the object's animation to play(), allowing it to expand.

       

      What I would like to be able to do is to track the size of the animated object and translate that into stage size (also adding a few pixels for padding).

       

      I came across the Timeline.update event, which should check the timeline at every timeframe.  My question is how to use this to both acquire the current size of the object, store it long enough to add 10 or so pixels, then apply it to the stage height?  This would be similar to jQuery's .slideDown method.

       

      The reason I would like to do this is because I have a project that, as the user clicks on various options in a flow chart, will reveal additional content to the left, right, and bottom, and this will all be contained within a web layout.  I would like to avoid having a massive white space on the bottom of the page when the page loads.

        • 1. Re: How to dynamically update stage Height based on contained elements
          todd_rohrer Level 1

          Through trial and error, I determined it is possible to access html elements that are not contained in the Edge Animation.

           

          So, right now I've got it so when a button is clicked, the Edge stage increases to set size (calculated, not dynamically, but manually based on the combined height of elements on the stage.  My code is:

           

          if (click2 == false){
          click2 = true;
          sym.getSymbol('Option2').play();
          sym.$('yes1').css({"cursor":"default"});
          sym.$('Stage').animate({height: "1290px"},100, "swing");
          var frameHeight = document.getElementById('column2').clientHeight + 300;
          $('#column2').animate({height: frameHeight},100,"swing");
          }
          

           

          I still think it would be nice if I didn't have to hardcode it as much, particularly since the Edge Animation could be set to responsively scale and may cause extra, unnecessary whitespace.