9 Replies Latest reply on Feb 2, 2016 5:11 AM by jerome di pietro

    Edge Animation won't scale to width and height parent div

    Mochamoo Level 1

      We have an existing site that was built in 2007, but was designed to mesh perfectly with responsive css, there have been a few hiccups but this has by far been the biggest issue I have encountered. I am working on replacing a flash animation with an animation I made in edge animate cc 2014,  and everything went lovely until I asked it to play nicely with my existing webpage.

       

      I have been messing with my files for a few days now, and I was wondering if anyone else is having this issue. (I have been placing the code manually as html, not as an .oam) It seems that my edge animation, on the responsive settings available, insists on scaling to the size of the view port rather than the size of the parent div I have placed it in. I've come up with one rough fix which modifies the javascript so that the animation shows up at 90% of the viewport, but as soon as you resize the window it goes back to 100%. Which is bothersome because I need it to be at 90% with a 5% margin/padding on each side (which is what the content div is set at anyway, so when the edge animate is set to width 100% it should only go to 100% width of the content div that it is in) and even more bothersome because that doesn't even begin to solve my problems with the desktop version of the site. As much as I love the sarcastic musings of my friend in IT during the afternoons, I think we are both ready to abandon this aspect of the project entirely.

       

      When I  tried importing it as a media file .oam it just doesn't show up at all, no code, no javascrip, nothing shows up past the parent div and the empty stage in the developer tools (I check the code for troubleshooting purposes through google chrome).

       

      I really am at the point where I am hoping that I just did something terribly wrong and I will be able to salvage this new way to add in animation. That would be the best case scenario at this point.

       

      Please help!

        • 1. Re: Edge Animation won't scale to width and height parent div
          Symeon Level 1

          Really happy that I found another person that has exactly the same problems as I do!!! I thought I was getting crazy! I hope someone can have a more constructive comment than I just did...

          Also, please tell us here if you find the answer.

          • 2. Re: Edge Animation won't scale to width and height parent div
            Mochamoo Level 1

            Okay, here is how I fixed the problem

             

            Set the animation up as 100% w and 100%h

            You will have to take it out of responsive mode for that, also uncheck the center stage option.

             

            Next, I put a container around my stage in the html. I called it class="stagewrap"

             

            Then I added javascript so that stagewrap would maintain a certain aspect ratio but scale to 100%width.

             

            This is what my html looked like

             

            <div class="stagewrap">

                    <div id="Stage" class="edge-###">

                        </div>

             

              <script language="javascript" type="text/javascript">

             

                        var thisRatio =x;

                      

                        $(document).ready(setRatio);

                        $(window).resize(setRatio);

                      

                        var sw = $('.stagewrap');

                      

              var originalWinWidth = y;

              var originalFontSize = z;

             

                        function setRatio() {

                                sw.height(sw.width() * thisRatio);

                        }

              </script>

                    </div>

             

             

            My CSS looked like this:

             

            .stagewrap {

              margin-top:20px;

              width:100%;

              position: relative;

              overflow:hidden;

              margin-bottom: 30px;

              float:left;

              font-size: 2.5vw;

            }


            Some of these styles will need changing according to your needs or negating according to your needs.

             

            x is going to be your ration, which is your width devided by your height, you can just divide the pixel numbers, the units cancel out and that ratio will work for any other unit.

             

            y is the width at which your animation is at 100% resolution without being scaled up or down. This is a VERY important number to maintain your percentages throughout correctly.

             

            And z is probably 1, unless you want your text to be larger or smaller, you can play with that yourself.

             

            In my code I also wanted to set it so that after a certain window width the animation went to a static size so i did this"

             

            <div class="stagewrap">

                    <div id="Stage" class="edge-###">

                        </div>

             

              <script language="javascript" type="text/javascript">

             

                        var thisRatio = x;

                      

                        $(document).ready(setRatio);

                        $(window).resize(setRatio);

                      

                        var sw = $('.stagewrap');

                      

              var originalWinWidth = y;

              var originalFontSize = z;

             

                        function setRatio() {

                            if ($(window).width() <= s) {

                                sw.height(sw.width() * thisRatio);

                            }

                            else {

                                sw.height(sh);

                            }

                        }

              </script>

                    </div>

             

            s= the window width at which you want the size to go static MINUS 1px

             

            sh= the static height at which you want the image to stay at, this number will automatically set the width through the ratio.

             

            Just as assurance, in you css for the window size you want the static image to hold at set the size of the .stagewrap in px

             

            I hope this helps!!

            1 person found this helpful
            • 3. Re: Edge Animation won't scale to width and height parent div
              johnrau Level 1

              I have been desperately struggling with this for the last few days.

               

              Thanks for the code - I tried it and can't seem to get it to work.

               

              Do you have a working demo somewhere/would you be kind enough to post it? Or even the zip file of everything working?

               

              Thanks

               

              John

              • 4. Re: Edge Animation won't scale to width and height parent div
                Mochamoo Level 1

                Do you have this line of code in your <head>?

                 

                <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

                • 5. Re: Edge Animation won't scale to width and height parent div
                  johnrau Level 1

                  Found the solution in another post -- Re: Scale to parent element, not window

                  Thanks!

                  1 person found this helpful
                  • 6. Re: Edge Animation won't scale to width and height parent div
                    Mochamoo Level 1

                    Sorry for the late posting of files, I'm glad you found a solution though.

                    I'm not sure if this is the best way to post files but:

                     

                    Dropbox - edge-js-responsive-solution.zip

                    • 7. Re: Edge Animation won't scale to width and height parent div
                      mohammada85075456 Level 1

                      Excuse me, where shall we add the css code to?

                      • 8. Re: Edge Animation won't scale to width and height parent div
                        Starlark Level 1

                        Hello,

                         

                        I have a same problem. I used what you suggested here.

                        But it doesn't work properly. I can see the animation running in the wraper div, but it is still too big. The wraper div working like a mask.

                         

                        I tried the code "bScaleToParent: true" as well, but it causes sytax problem.

                        • 9. Re: Edge Animation won't scale to width and height parent div
                          jerome di pietro Level 1

                          This is a far better solution than the accepted answer. Thanks.

                           

                          See Johnrau's solution