3

I am working on a script where I have to resize a div with jQuery ui controls. The resize controls works great when there is no rotation transform applied. But when you rotate the div and then resize it, the div starts moving to the bottom left or bottom right (See the animated GIF here (open the link in new tab)).

Here is the complete code: jsfiddle

Below is the code in the resize of the element.

 var inner = elem.find(".inner");
        var values = transform_matrix(inner);


        if(values != "none"){
            var innerWidth = ui.size.width/values[0];
        }
        else{
            var innerWidth = ui.size.width;
        }
        inner.width(innerWidth);

        var innerHeight = inner.height() * values[0];

        elem.css({
            height: innerHeight,
            left: ui.position.left + 10,
            top: ui.position.top +10,
        });
        controls.css({
            height: innerHeight,
        });

Any help will greatly be appreciated.

Saadi
  • 1,292
  • 13
  • 22
  • Unable to view the GIF. I suspect the issue is that the Box model is the same, in CSS, yet after it's been transformed, you're moving the wrong parts. Since the handle is increasing the width and the center remains still, the DIV appears to move down and to toward the direction you're pulling. The height changes as the DIV gets wider and the wrapping is effected. – Twisty Jun 06 '16 at 15:30
  • @twisty can you help in making changes to the jsfiddle I provided above? – Saadi Jun 07 '16 at 07:54
  • I'm not sure that I can at this time. Your div does the same thing when it is not rotated as it does when it is, so I am not sure what you're trying to accomplish. – Twisty Jun 07 '16 at 13:45
  • @twisty open the gif link in new tab to see the problem. – Saadi Jun 07 '16 at 13:47
  • When you resize the div without rotation applied, it does not move. But when you rotate it and then resize it it move to the far bottom left or right – Saadi Jun 07 '16 at 13:49
  • When you make it wider or thinner, the height changes. The same thing happens when rotated. So now the bottom left or bottom right corner, as well as the top left/right corner, move along Y & X Axis, changing the location of the DIV on the page. When not rotated, they only move along the X Axis. With no change to the Y it does not appear to move up or down. – Twisty Jun 07 '16 at 13:53
  • Example: https://jsfiddle.net/zrjmrp94/4/ – Twisty Jun 07 '16 at 13:57
  • Also, get a `403 Forbidden` when I attempt to open the GIF link. – Twisty Jun 07 '16 at 14:04
  • @twisty open the gif link in a new tab. It won't show the error then – Saadi Jun 07 '16 at 14:09
  • I was doing that already. Still get the error. You keep trying to explain the issue, which I believe I understand. You have not been able to explain what you want it to do or accomplish. – Twisty Jun 07 '16 at 14:56
  • @twisty I want it not to move when I resize it when it's rotated – Saadi Jun 07 '16 at 15:02
  • You want what not to move? Something will have to move if you're resizing the box the way you have it configured. – Twisty Jun 07 '16 at 15:46
  • I want the the box that has the text not to move from its location. It even move out of the screen when I resize it. – Saadi Jun 07 '16 at 16:04
  • It sounds like you would like the handles to be on a wrapper DIV that allows you to extend the width of the space that contains the text and not actually change the width of the DIV that contains the text itself. This will extend the width, causing the text to flow further, but the height will not change. – Twisty Jun 07 '16 at 17:22

0 Answers0