jQuery UI: resize objects when content is zoomed via CSS

Question

I am creating a sort of editor, and with it the ability to zoom in and out. WHat this does is set the main content area css zoom to the one the user specifies.

When I integrated I noticed that jQUery UI .resizable no longer resizes according to mouse position, but where the mouse would be if the content is zoomed at 100%. This is due to the fact that the zoom % is not taken into account Im assuming.

JSFiddle: http://jsfiddle.net/qwMkt/

Any ideas how this can be solved? Thanks in advance

JS Code:

$(document).ready(function(){
    $('.box').resizable({
        containment: '#container',
        handles: "se",
        scroll: true
    });
});

CSS Code:

#container{
    zoom: 50%;
    background: #ccc;
    width: 500px;
    height: 500px;
}

#container .box {width: 100px; height: 100px; border: 1px solid #333}

To be honest, i don't understand what you are trying to accomplish here. Looked at your fiddle but can't grasp the issue :/. — rusln, Jun 25 '13 at 07:37
I am trying to resize the .box element when it's parent is using a css Zoom which is not 100%. If you resize the object you'll notice that the resize doesnt follow the cursors position, but what the position would be at 100% zoom. I would like to still have the resize move with the cursor position. — Jonathan Vella, Jun 25 '13 at 10:21
@ShivamD unfortunately not - eventually i decided to not include the feature as it wasnt that relevant — Jonathan Vella, Apr 07 '14 at 17:07
Here is solution [link](http://stackoverflow.com/questions/10212683/jquery-drag-resize-with-css-transform-scale) — Ivan Gusev, Jun 17 '16 at 15:49

score 0 · Answer 1 · answered Dec 09 '14 at 15:45

I faced a similar problem but have come up with this solution using the location of the mouse coupled with current zoom. In this example I am assuming that you have a variable called current_zoom which gives the current zoom as a float, and a variable called maintainAspectRatio which signifies whether the element is to maintain its aspect ratio.

This code only supports resizing using the south and east handles. You would need to extend the code if you were to use any additional ones. For instance, I have also implemented the code for the south-east handle. However, I have left it out in order to present the bare minimum:

$('.box').resizable({
   ...

   resize: function(event, ui) {
      var $element = ui.element;
      // Gets the axis that the user is dragging.
      var axis = $element.data('ui-resizable').axis;

      // Get the dimensions of the element's bounding box. We can't use 
      // leftOffset + $element.width() because it doesn't factor in the 
      // current zoom. Morever, we can't just multiply $element.width() 
      // by the current zoom to get the zoomed width because it still 
      // gives the wrong value. So we have to be sneaky and use resizable's 
      // resizer overlays to get the right and bottom values.
      var leftOffset = $element.offset().left;
      var topOffset = $element.offset().top;
      var rightOffset = $element.children('.ui-resizable-e').offset().left;
      var bottomOffset = $element.children('.ui-resizable-s').offset().top;

      // We are using the mouse location to calculate the width (during 
      // a horizontal resize) and the height (during a vertical resize) 
      // of the element. This is because we need the resize box to keep
      // up with the mouse when the user is not at 100% zoom.
      var mouseX = event.pageX;
      var mouseY = event.pageY;

      // Must remove the zoom factor before setting width and height.
      var mouseCalculatedWidth = (mouseX - leftOffset) / current_zoom;
      var mouseCalculatedHeight = (mouseY - topOffset) / current_zoom;
      var offsetWidth = (rightOffset - leftOffset) / current_zoom;
      var offsetHeight = (bottomOffset - topOffset) / current_zoom;

      // In order to maintain aspect ratio, we manually calculate it.
      var aspectRatio = offsetHeight / offsetWidth;

      // Resizing using the east handler, set the width of the element.
      // If this element maintains its aspect ratio, also set the height.
      if (axis == "e") {
         $element.width(mouseCalculatedWidth);

         if (maintainAspectRatio) {
            $element.height(mouseCalculatedWidth * aspectRatio);
         }
      }

      // Resizing using the south handler, set the height of the element.
      // If this element maintains its aspect ratio, also set the width.
      if (axis == "s") {
         $element.height(mouseCalculatedHeight);

         if (maintainAspectRatio) {
            $element.width(mouseCalculatedHeight / aspectRatio);
         }
      }
   }

   ...
});// Resizable

This one worked for me: https://stackoverflow.com/questions/10212683/jquery-drag-resize-with-css-transform-scale — Hamboy75, Oct 19 '17 at 11:48

score 0 · Answer 2 · edited Jul 26 '17 at 20:57

0

If I understand your question correctly, you should just add alsoResize: "#container" to the parameters of the resizable(..) function.

See the docs: http://api.jqueryui.com/resizable/#option-alsoResize

edited Jul 26 '17 at 20:57

cssBlaster21895

3,670
20
33

answered Jul 26 '17 at 18:37

Sergey Larin

51
4

jQuery UI: resize objects when content is zoomed via CSS

2 Answers2