Mastering jQuery placement using CSS3 "transform: scale"

Question

Mastering jQuery placement using CSS3 "transform: scale"

There seems to be an issue with jQuery not functioning well with CSS "transform: scale()" (however, it works fine with "transform: translate()")

Please examine this straightforward example:

$(document).ready(function() {

  $('#root').dblclick(function() {
    $('#box').position({
      my: 'right bottom',
      at: 'right bottom',
      of: $('#root')
    });
  })

  $('#box').draggable({
    containment: $('#root'),
  });

});

body {
  position: relative;
  margin: 0;
}
#root {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 500px;
  height: 500px;
  border: solid 2px red;
  transform-origin: 0 0 0;
  transform: scale(0.5);
}
#box {
  position: absolute;
  top: 100px;
  left: 50px;
  display: inline-block;
  width: 50px;
  height: 50px;
  background: red;
  border: solid 1px black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

drag red box :)
<br/>double click in square to position box
<div id="root">
  <div id="box"></div>
</div>

The root node needs to be scaled because I utilize fullscreen mode in my actual application and must adjust content to the window resolution. However, when scaling the parent element, jQuery UI draggable and jQuery position do not function correctly.

The crucial question is how to rectify this issue and make it work seamlessly?

Although there are numerous similar inquiries, a suitable solution remains elusive.

javascript jquery css css-transforms

Answer 1

Answer №1

After reviewing this answer originally posted by Martii Laine, I made adjustments to accommodate containment and improve double-click positioning:

$(document).ready(function () {

    var $root = $('#root');
    var $box = $('#box');
  
    var minLeft = parseFloat($root.css("paddingLeft"));
    var minTop = parseFloat($root.css("paddingTop"));
    var maxLeft = minLeft + $root.width() - $box.outerWidth();
    var maxTop = minTop + $root.height() - $box.outerHeight();

    $root.dblclick(function () {
        $box.css({
            left: maxLeft,
            top: maxTop
        });
    })
    
    var zoom = 0.5;
    var click = { x: 0, y: 0 };
  
    $box.draggable({
        start: function (event) {
            click.x = event.clientX;
            click.y = event.clientY;
        },
      
        drag: function (event, ui) {
            var original = ui.originalPosition;
            var left = (event.clientX - click.x + original.left) / zoom;
            var top = (event.clientY - click.y + original.top) / zoom; 
            ui.position = {
                left: Math.max(minLeft, Math.min(maxLeft, left)),
                top: Math.max(minTop, Math.min(maxTop, top))
            };
        }
    });
});

body
{
    position: relative;
    margin: 0;
}

#root
{
    position: absolute;
    top: 20px;
    left: 20px;
    width: 500px;
    height: 500px;
    border: solid 2px red;
    transform-origin: 0 0 0;
    transform: scale(0.5);
}

#box
{
    position: absolute;
    top: 100px;
    left: 50px;
    display: inline-block;
    width: 50px;
    height: 50px;
    background: red;
    border: solid 1px black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

drag red box :)
<br/>double click in square to position box
<div id="root">
    <div id="box"></div>
</div>

To achieve different alignments upon double-clicking within the root div, the code:

$root.dblclick(function () {
    $box.css({
        left: maxLeft,
        top: maxTop
    });
})

can be modified as shown below:

left: minLeft,                  // Left aligned
left: maxLeft,                  // Right aligned
left: (minLeft + maxLeft) / 2,  // Centered (horizontally)

top: minTop,                    // At the top
top: maxTop,                    // At the Bottom
top: (minTop + maxTop) / 2,     // Centered (vertically)

Answer 2

After reviewing this answer originally posted by Martii Laine, I made adjustments to accommodate containment and improve double-click positioning:

$(document).ready(function () {

    var $root = $('#root');
    var $box = $('#box');
  
    var minLeft = parseFloat($root.css("paddingLeft"));
    var minTop = parseFloat($root.css("paddingTop"));
    var maxLeft = minLeft + $root.width() - $box.outerWidth();
    var maxTop = minTop + $root.height() - $box.outerHeight();

    $root.dblclick(function () {
        $box.css({
            left: maxLeft,
            top: maxTop
        });
    })
    
    var zoom = 0.5;
    var click = { x: 0, y: 0 };
  
    $box.draggable({
        start: function (event) {
            click.x = event.clientX;
            click.y = event.clientY;
        },
      
        drag: function (event, ui) {
            var original = ui.originalPosition;
            var left = (event.clientX - click.x + original.left) / zoom;
            var top = (event.clientY - click.y + original.top) / zoom; 
            ui.position = {
                left: Math.max(minLeft, Math.min(maxLeft, left)),
                top: Math.max(minTop, Math.min(maxTop, top))
            };
        }
    });
});

body
{
    position: relative;
    margin: 0;
}

#root
{
    position: absolute;
    top: 20px;
    left: 20px;
    width: 500px;
    height: 500px;
    border: solid 2px red;
    transform-origin: 0 0 0;
    transform: scale(0.5);
}

#box
{
    position: absolute;
    top: 100px;
    left: 50px;
    display: inline-block;
    width: 50px;
    height: 50px;
    background: red;
    border: solid 1px black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

drag red box :)
<br/>double click in square to position box
<div id="root">
    <div id="box"></div>
</div>

To achieve different alignments upon double-clicking within the root div, the code:

$root.dblclick(function () {
    $box.css({
        left: maxLeft,
        top: maxTop
    });
})

can be modified as shown below:

left: minLeft,                  // Left aligned
left: maxLeft,                  // Right aligned
left: (minLeft + maxLeft) / 2,  // Centered (horizontally)

top: minTop,                    // At the top
top: maxTop,                    // At the Bottom
top: (minTop + maxTop) / 2,     // Centered (vertically)

Answer 3

Answer №2

Using an iframe, I successfully applied a transformation to it :)

UPDATE: The previous version of my solution turned out to be buggy. However, I have saved the snippet for anyone who wishes to review it.

/*
 * jQuery UI FIX
 * Take focus on window.transformScale
 */

// Offset fix
(function() {

function getWindow(elem) { return jQuery.isWindow(elem) ? elem : elem.nodeType === 9 && elem.defaultView; }

jQuery.fn.offset = function( options ) {
  
  // Preserve chaining for setter
  if ( arguments.length ) {
      return options === undefined ?
          this :
          this.each( function( i ) {
              jQuery.offset.setOffset( this, options, i );
          } );
  }
  
  var docElem, win, rect, doc,
      elem = this[ 0 ];
  
  if ( !elem ) {
      return;
  }
  
  // Support: IE <=11 only
  // Running getBoundingClientRect on a disconnected node in IE throws an error
  if ( !elem.getClientRects().length ) {
      return { top: 0, left: 0 };
  }
  
  var transform = $(document.body).css('transform');
  $(document.body).css('transform', 'none');
  
  rect = elem.getBoundingClientRect();
  
  $(document.body).css('transform', transform);
  
  // Make sure element is not hidden...

Answer 4

Using an iframe, I successfully applied a transformation to it :)

UPDATE: The previous version of my solution turned out to be buggy. However, I have saved the snippet for anyone who wishes to review it.

/*
 * jQuery UI FIX
 * Take focus on window.transformScale
 */

// Offset fix
(function() {

function getWindow(elem) { return jQuery.isWindow(elem) ? elem : elem.nodeType === 9 && elem.defaultView; }

jQuery.fn.offset = function( options ) {
  
  // Preserve chaining for setter
  if ( arguments.length ) {
      return options === undefined ?
          this :
          this.each( function( i ) {
              jQuery.offset.setOffset( this, options, i );
          } );
  }
  
  var docElem, win, rect, doc,
      elem = this[ 0 ];
  
  if ( !elem ) {
      return;
  }
  
  // Support: IE <=11 only
  // Running getBoundingClientRect on a disconnected node in IE throws an error
  if ( !elem.getClientRects().length ) {
      return { top: 0, left: 0 };
  }
  
  var transform = $(document.body).css('transform');
  $(document.body).css('transform', 'none');
  
  rect = elem.getBoundingClientRect();
  
  $(document.body).css('transform', transform);
  
  // Make sure element is not hidden...

Mastering jQuery placement using CSS3 "transform: scale"

Answer №1

Answer №2

Similar questions

Replacing a DOM Element on Page Load using jQuery

Inaccurate Guild Member Filtering

I'm struggling to make this script replace the values within the table

Monochrome tabletop solid in one hue

How to Convert Python Lists into JavaScript?

Unable to set the height for ul/div elements

Is it possible to use CSS to create a gap between the cursor and the placeholder text within an input field?

The typescript error TS2339 is triggered by the property 'webkitURL' not being found on the 'Window' type

Which file is the optimal placement for the Bootstrap directory: 'header.php' or 'function.php'?

JavaScript - Uncaught TypeError: type[totypeIndex] is not defined

Have I potentially compromised my project by executing the command `npm audit fix --force`?

The functionality of the WordPress Contact Form 7 Plugin becomes erratic when integrated into dynamically loaded AJAX content

Tips for centering content in the middle of a line

Loading a gallery dynamically using AJAX in a CakePHP application

Troubleshooting issue: Inability to assign classes to child elements within divs of a designated class

``The problem of cross-origin resource sharing (CORS)

Issue with exporting data from Datatables

Triggering a modal window with unique content by clicking on various images

Eliminate the unnecessary code repetition in my functions using Typescript

Modifying button styles in Angular UI Datepicker