CODEWITHSUNDEEP
htmlcssjquery-uiresizescale
ArunValaven
ArunValaven

Reputation: 1959

How to get ScaleX and ScaleY value while resizing a resizable div..?

I have set the width as 100px and height as 100px. I need to get the ScaleX and ScaleY value while resizing the resizable div..? I have used Jquery-ui to resize. Please check in chrome first. Please help me. Thanks in Advance.

$("#resize_div").resizable({
            resize: function(){
                node = $("#resize_div")[0];
                var curTransform = new WebKitCSSMatrix(window.getComputedStyle(node).webkitTransform);       
                $("#scalex").text("Scale X: " + curTransform.a);
                $("#scaley").text("Scale Y: " + curTransform.d);
           }
});

My code in Jsfiddle.!

Upvotes: 0

Views: 647

Answers (2)

ArunValaven
ArunValaven

Reputation: 1959

I noticed that, Scale-X value can get by dividing the current width(while resize) divided by the initial width(in this case the initial width is 100px). Try this..

 $("#resize_div").resizable({
            resize: function(){                 
                    var width = $(this).width();
                    var height = $(this).height();
                    var scalax = width/100;
                    var scalay = height/100;
            $("#scalex").text("Scale X: " + scalax);
            $("#scaley").text("Scale Y: " + scalay);
}
      });

Upvotes: 0

Bilgesu Erdoğan
Bilgesu Erdoğan

Reputation: 600

can you try this?

$("#resize_div").resizable({
            resize: function(){
              var width = $(this).width();
            var height = $(this).height();
            var scalax = width/height;
            var scalay = height/width;
                    node = $("#resize_div")[0];
                    var curTransform = new WebKitCSSMatrix(window.getComputedStyle(node).webkitTransform);
                $("#scalex").text("Scale X: " + scalax);
                $("#scaley").text("Scale Y: " + scalay);
           }
      });

Upvotes: 1

Related Questions