1 Reply Latest reply on Sep 1, 2014 11:12 PM by julkjen

    using transform scale affects elements top and left values

    julkjen Level 1

      I have a grouped set of elements"Elvekraftverk" that I want to increase from 25-30% on mouseover and down to 25% again on mouseout.

       

      Using this piece of code:

       

      mouseover

      //skaler elvekraftverk opp til 30%

      $(sym.lookupSelector("Elvekraftverk")).css({

           "transform":"scaleX(0.3) scaleY(0.3)",

           "-ms-transform":"scaleX(0.3) scaleY(0.3)", /* IE 9 & 10 */

           "-moz-transform":"scaleX(0.3) scaleY(0.3)", /* Firefox */

           "-webkit-transform":"scaleX(0.3) scaleY(0.3)", /* Safari and Chrome */

           "-o-transform":"scaleX(0.3) scaleY(0.3)" /* Opera */

      });

       

      mouseout

      //skaler elvekraftverk tilbake til 25%

      $(sym.lookupSelector("Elvekraftverk")).css({

           "transform":"scaleX(0.25) scaleY(0.25)",     

           "-ms-transform":"scaleX(0.25) scaleY(0.25)", /* IE 9 & 10 */

           "-moz-transform":"scaleX(0.25) scaleY(0.25)", /* Firefox */

           "-webkit-transform":"scaleX(0.25) scaleY(0.25)", /* Safari and Chrome */

           "-o-transform":"scaleX(0.25) scaleY(0.25)" /* Opera */

      });

       

      and it does work, but with an unwanted addition, it also moves the grouped elements to the center of my stage...

       

      I played around a bit and I think I know why it happens, the group will later on be scaled to 100% (onclick) and repositioned to fill the stage. When in 25-30% it it positioned of to the left of the stage.

       

      How can I make it "stay put" when using transform to scale it ?

        • 1. Re: using transform scale affects elements top and left values
          julkjen Level 1

          I've gotten one step further by including "position" and "left" and "top" in the code.

          My group of elements now stay put on mouseover and mouseout

           

          //hvis posisjon er utenom Elveanimasjonen

          if (sym.getPosition() <= sym.getLabelPosition("enter elv")) {

               //skaler elvekraftverk opp til 30%

               $(sym.lookupSelector("Elvekraftverk")).css({

                    'position':'absolute',

                    'left':-436,

                    'top':173,

                    "transform":"scaleX(0.3) scaleY(0.3)",

                    "-ms-transform":"scaleX(0.3) scaleY(0.3)", /* IE 9 & 10 */

                    "-moz-transform":"scaleX(0.3) scaleY(0.3)", /* Firefox */

                    "-webkit-transform":"scaleX(0.3) scaleY(0.3)", /* Safari and Chrome */

                    "-o-transform":"scaleX(0.3) scaleY(0.3)" /* Opera */

               });

          }

           

          But (!!) now when i click on the gouped elements (and then play a timeline animation where the whole groups scales to fill the stage and repositions to center, the positioning is off. Clearly the css positioning I've added on the mouseover is still in effect, is there anyway I can say "when click ignore css positioning" ?

           

          Or a better way to fix the initial problem?