Question

I’m writing a little script that allows the user to move and resize a div. I need to keep the aspect ratio and my logic doesn’t work.

function resizing() {
    var currentHeight = elmnt.offsetHeight;
    var currentWidth  = elmnt.offsetWidth;
    var newHeight     = currentHeight + (event.pageY - currentY);
    var newWidth      = currentWidth  + (event.pageX - currentX);
    var ratio         = currentWidth  / currentHeight;

    if(ratio < 1) {
        newwidth = parseInt(newHeight * ratio);
    }
    else {
        newheight = parseInt(newWidth / ratio);
    }

    elmnt.style.height = newHeight + "px";
    elmnt.style.width  = newWidth  + "px";

    currentY = event.pageY;
    currentX = event.pageX;
}

The script kind of works. But unfortunately it doesn’t keep the aspect ratio completely correct. Sometimes, when I resize horizontyl only, the old height remains the same, sometimes it works, but one length gets resized with a little offset.

When I resize up and down and up and down again, the lengths gets more and more equal and when it is a proper square, everything is right.

Hwo can I fix my problems? Where is my fallacy?!

Answer 1

I could fiy it.

THANK YOU VERY MUCH!

My problem was that I first, had to track of which axis has more change. The second problem, which I didn’t recognized was, that I had BIG problems with rounding issues.

When setting the css size using jQuery, it rounds. And I took the height for ratio calculations every single event.

That means that the inaccuracy was getting more and more bad.
Now I took this into account and figured out a way to get this working very good.

I now do this directly onclick and just update them instead of getting from the element:

currentHeight = $("#dragger").height();
currentWidth = $("#dragger").width();

So thanks again for your help! Here is my final result:
http://jsfiddle.net/julian_weinert/xUAZ5/30/