2 Replies Latest reply on Jan 14, 2013 9:05 PM by rodlab2x

    Help with Animation Resize on Tablet devices

    rodlab2x Level 1

      Hi,

       

      I would appreciate any help to fix this problem. I have this edge animation that doesn't resize correctly on tablet devices.

       

      http://www.lab2x.com/guest/Jaime/lab2x-1/

       

      It happens especially on vertical view of tablets.

      IMG_0047.PNG

       

       

      When I publish from edge directly it works perfect on tablets, but when I insert it to the html page I get the problem.

       

      Here is the animation alone and how I want it to work on tablets.

       

      http://www.lab2x.com/pacificdental/edge/v5/header.html

       

       

       

      Thanks,

       

      Rodrigo

        • 1. Re: Help with Animation Resize on Tablet devices
          shadowfax007 Level 1

          Rodrigo-

           

          I checked on a first gen. iPad and you are right, it does not resize.  Funny thing is, it does re-size when you close your browser to between 750px - 775px :-)

           

          My first thought is your script to check for tablet usage:

           

          <!-- Mobile Specific Metas -->

                    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

           

                    <script type="text/javascript">

                              var browser                              = navigator.userAgent;

                              var browserRegex          = /(Android|BlackBerry|IEMobile|Nokia|iP(ad|hone|od)|Opera M(obi|ini))/;

                              var isMobile                    = false;

                              if(browser.match(browserRegex)) {

                                        isMobile                              = true;

                                        addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);

                                        function hideURLbar(){

                                                  window.scrollTo(0,1);

                                        }

                              }

                    </script>

           

           

          I'm rather new to Edge and havent gotten to making a "Tablet" sized animation yet, so I don't know if Edge created the script or you added it it.

           

          Since it re-sizes in a regular browser, coun ld you try switching the size based on the browser size by adding these div's to your CSS, just to see if it affects it?

           

          Tablet:

          @media only screen and (min-width: 481px) {

          .tablet_div {

          add around your Edge animation.

          }

           

           

          Desktop:

          @media only screen and (min-width: 769px) {

          .desktop_div {

          add around your Edge animation.

          }

          }

           

           

          James

          • 2. Re: Help with Animation Resize on Tablet devices
            rodlab2x Level 1

            Thanks for your comment. I really think that anyone getting into responsive animation has to learn how to setup edge really well. I did most animations on a Symbol container but it seems I cannot add the feature to resize the symbol as other things change. I think you can just do that individually to each object and to see how it works is better to do it in the main timeline.

             

            I'm still trying to figure it out. Will post if I learn how to do this correctly.