Combining CSS3 transform scale with jQuery UI resizable for enhanced functionality

Question

Combining CSS3 transform scale with jQuery UI resizable for enhanced functionality

I am currently working on factoring in the impact of scaling an element while utilizing jquery ui resizable.

Although there have been some discussions regarding css3 transform issues with resizing/dragging, I have not come across a solution that works effectively.

For now, I am putting the rotation problem on hold and focusing on getting it to function with scale.

I was able to make adjustments to the draggable feature, but I am encountering difficulties with the resizable functionality.

HTML

 <div id= 'div1'> 
resize the div and take note of how the mouse cursor's
distance from the resize handle increases over time
<div>

  CSS
 #div1{
  margin:100px;
 width:100px;
 height:100px;
 border:1px solid black;
 font-size:12pt;
 overflow:hidden;
 -webkit-transform:scale(2);
 }

  JS
 $('#div1').resizable();

http://jsfiddle.net/asaf/JBE2r/1/

jquery jquery-ui css jquery-ui-resizable

Answer 1

Answer №1

To achieve this goal, one effective method is to adjust the dx and dy variables by dividing them by the transform scale attribute within the _mouseDrag event. (In my scenario, the x and y transform values always remain consistent) I am initializing the 'scaleFactor' parameter during the mousestart event.

    _mouseDrag: function(event) {
   console.log(this.size.width);
 var xDiff = event.pageX / this.originalMousePosition.left;
 //console.log(xDiff);

    //Optimizing performance, avoiding regex
    var el = this.helper, o = this.options, props = {},
        self = this, smp = this.originalMousePosition, a = this.axis;

    var dx = (event.pageX-smp.left)||0, dy = (event.pageY-smp.top)||0; 
    var trigger = this._change[a];
    if (!trigger) return false;

    //Adjusting dx and dy below by the transform scale factor:

    dy = dy / self.scaleFactor;
    dx = dx / self.scaleFactor;

Answer 2

To achieve this goal, one effective method is to adjust the dx and dy variables by dividing them by the transform scale attribute within the _mouseDrag event. (In my scenario, the x and y transform values always remain consistent) I am initializing the 'scaleFactor' parameter during the mousestart event.

    _mouseDrag: function(event) {
   console.log(this.size.width);
 var xDiff = event.pageX / this.originalMousePosition.left;
 //console.log(xDiff);

    //Optimizing performance, avoiding regex
    var el = this.helper, o = this.options, props = {},
        self = this, smp = this.originalMousePosition, a = this.axis;

    var dx = (event.pageX-smp.left)||0, dy = (event.pageY-smp.top)||0; 
    var trigger = this._change[a];
    if (!trigger) return false;

    //Adjusting dx and dy below by the transform scale factor:

    dy = dy / self.scaleFactor;
    dx = dx / self.scaleFactor;

Answer 3

Answer №2

I provided a solution to the issue at hand and shared the specifics in this post:

It's unnecessary to modify the source code of jquery-ui. All that is required is a callback for the resize event of the resizable element that compensates for the scale factor as shown in the CodeToads response.

function resizeFix(event, ui) {
    var changeWidth = ui.size.width - ui.originalSize.width; // calculate width change
    var newWidth = ui.originalSize.width + changeWidth / zoomScale; // adjust new width based on zoomScale

    var changeHeight = ui.size.height - ui.originalSize.height; // calculate height change
    var newHeight = ui.originalSize.height + changeHeight / zoomScale; // adjust new height based on zoomScale

    ui.size.width = newWidth;
    ui.size.height = newHeight;
}

$(this).resizable({
    minWidth: -(contentElem.width()) * 10,  // these values should be large and negative 
    minHeight: -(contentElem.height()) * 10, // to allow resizing while scaled
    resize: resizeFix
});

Answer 4

I provided a solution to the issue at hand and shared the specifics in this post:

It's unnecessary to modify the source code of jquery-ui. All that is required is a callback for the resize event of the resizable element that compensates for the scale factor as shown in the CodeToads response.

function resizeFix(event, ui) {
    var changeWidth = ui.size.width - ui.originalSize.width; // calculate width change
    var newWidth = ui.originalSize.width + changeWidth / zoomScale; // adjust new width based on zoomScale

    var changeHeight = ui.size.height - ui.originalSize.height; // calculate height change
    var newHeight = ui.originalSize.height + changeHeight / zoomScale; // adjust new height based on zoomScale

    ui.size.width = newWidth;
    ui.size.height = newHeight;
}

$(this).resizable({
    minWidth: -(contentElem.width()) * 10,  // these values should be large and negative 
    minHeight: -(contentElem.height()) * 10, // to allow resizing while scaled
    resize: resizeFix
});

Combining CSS3 transform scale with jQuery UI resizable for enhanced functionality

Answer №1

Answer №2

Similar questions

Changing ch to Px in CSS

The issue of Jquery .click event handler failing to work for class selector specifically in CHROME

Aligning a div in relation to the background image

What is the best way to use jQuery ajax to send various row identifiers when updating table data on another PHP page by selecting checkboxes?

Give instructions on how to sequence multiple ajax requests in a specific order

What benefits does sending data in JSON offer when using JQuery Ajax?

What is the best way to eliminate the space between two columns of a row in Bootstrap 5 grid system?

Can one open a unique custom pop-up before the window is about to close?

Is there a way to configure the positioning of Bootstrap carousel thumbnails to be above and beside?

What is the best way to halt a CSS transition using JavaScript when dealing with an image?

The troubleshooting issue with jQuery animate Scrolltop malfunctioning

Retrieving information from a table row and using it as a parameter in the URL for an AJAX request

Generate unique identifiers to rotate images dynamically on the webpage

Utilizing d3.js to filter a dataset based on dropdown selection

Creating an expand and collapse animation in a `flex` accordion can be achieved even when the container size is fixed using

When using jquery.hide() and show(), the content within the div disappears momentarily before reappearing

Get back a variety of substitutions

Uploading Images Dynamically with AJAX

Empty space under the banner in Wordpress theme Avada

What is the best way to place a JavaScript or jQuery variable within an HTML tag?