2 Replies Latest reply on Feb 23, 2014 11:12 PM by hemanthR

    Trouble with responsive projekt

    ChristofferJensen

      Hello all.

       

      I recently came across this magnificent Edge composition by user heathrowe: http://www.heathrowe.com/edge/beforeafter/beforeafter.html

      Nice work!

       

      I plan on using a similar thing on my site. Problem is that it isn't responsive. In Edge I have tried setting "Responsive scalling" to "on", but then the composition isnt working right.

      See example here: http://chri789z.mmd.eal.dk/dragger/dragme.html

       

      My project example: http://chri789z.mmd.eal.dk/example.zip

       

      Anyone got any suggestions?

       

      Chris

        • 1. Re: Trouble with responsive projekt
          elainecc Adobe Employee

          Hi, Chris-

           

          So part of the reason is that there's a lot of dynamic calculation that's happening when we turn on responsive scaling.  You'll want to adjust the offset that you calculate by the scaling offset.  This is non-trivial, unfortunately, and I'd have to ask to see how we represented this internally.

           

          Thanks,

           

          -Elaine

          1 person found this helpful
          • 2. Re: Trouble with responsive projekt
            hemanthR Adobe Employee

            HI,

            When you have selected 'responsive scaling' for your project you will have to account for scale value set for stage before setting the clip right value.

            Here is the modified code  that does that :

             

               var directionX = e.pageX - (clipper.offset().left);

                        var matrixRegex = /matrix\((-?\d*\.?\d+),\s*0,\s*0,\s*(-?\d*\.?\d+),\s*0,\s*0\)/,

                                             matches = sym.$("#Stage").css('-webkit-transform').match(matrixRegex);

            //matches[1] is the scaleX value set to stage on selecting responsive scaling.

                        var scaleX = directionX/matches[1];

                                                    clipper.css('clip','rect(0px '+scaleX+'px 522px 0px)');

             

            Hope this helps

            1 person found this helpful