Resizing a div dynamically based on its parent's position using JavaScript

Question

Resizing a div dynamically based on its parent's position using JavaScript

I've been working on a code to dynamically resize multiple divs. The original code only resized one element, but I modified it to handle multiple div resizers.

However, I'm facing an issue where there is a gap between the mouse and the div while resizing. My goal is to ensure each element is resized in relation to the exact mouse location relative to its parent position. I welcome any new approach that can change my perspective on this matter. It's not necessary to use the resize nodes; directly manipulating the div borders is also an option.

What I've accomplished so far:

- Made multiple divs resizable based on mouse location.

- Stored initial location information in a function.

- Calculated the difference between child and parent elements.

What I aim to achieve:

- Ensure that the div stays under the mouse location without any space between them during resizing.

After several attempts at resizing, I noticed a gap caused by margins and paddings of parent elements, resulting in resizing with a gap between the div and the mouse. A recursive solution is needed to accurately resize and reposition the divs. Another approach might involve calculating only x, y, w, h values inside the parent, but I need guidance on how to implement this effectively using the mouse...

For a clearer demonstration, you can refer to the following CodePen: https://codepen.io/BerkerYuceer/pen/gOYwqdb

javascript html css resize

Answer 1

Answer №1

To retrieve the value of the transform property using regex and adjust the coordinates as needed, you can utilize getComputedStyle along with applying a reciprocal scale factor to the required coordinates. I managed to resolve the issue specifically for the container oriented towards the East direction (my comprehension of coordinate geometry is somewhat limited):

let match = getComputedStyle(element)
           .transform.match(/matrix\((-?\d*\.?\d+),\s*0,\s*0,\s*(-?\d*\.?\d+),\s*0,\s*0\)/);
let scale = 1; //for regular individuals
if (match && +match[1] != 0)
   scale = 1 / +match[1]; //to reverse the applied transformation

Sample:

(...JavaScript code snippets continue here...)

You can also achieve this by following this method presented in another thread.

var element = document.querySelector('...');
var scaleX = element.getBoundingClientRect().width / element.offsetWidth;

"This technique works because getBoundingClientRect provides the actual dimensions while offsetWidth/Height represent the unscaled size."

Edit: Added window.scrollX/Y for usability on scrolled pages.

This method remains reliable across different sections of the page, even when dealing with scaled objects.

Answer 2

To retrieve the value of the transform property using regex and adjust the coordinates as needed, you can utilize getComputedStyle along with applying a reciprocal scale factor to the required coordinates. I managed to resolve the issue specifically for the container oriented towards the East direction (my comprehension of coordinate geometry is somewhat limited):

let match = getComputedStyle(element)
           .transform.match(/matrix\((-?\d*\.?\d+),\s*0,\s*0,\s*(-?\d*\.?\d+),\s*0,\s*0\)/);
let scale = 1; //for regular individuals
if (match && +match[1] != 0)
   scale = 1 / +match[1]; //to reverse the applied transformation

Sample:

(...JavaScript code snippets continue here...)

You can also achieve this by following this method presented in another thread.

var element = document.querySelector('...');
var scaleX = element.getBoundingClientRect().width / element.offsetWidth;

"This technique works because getBoundingClientRect provides the actual dimensions while offsetWidth/Height represent the unscaled size."

Edit: Added window.scrollX/Y for usability on scrolled pages.

This method remains reliable across different sections of the page, even when dealing with scaled objects.

Answer 3

Answer №2

Have you ever considered using jQuery resizable? It can be a real time-saver and make your life easier :)

If you want to see how it works, check out this simple example: https://jsfiddle.net/maehy5tj/1/

It's really all you need to do to get started :)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8>
  ....(omitted for brevity)...
</body>
</html>

Answer 4

Have you ever considered using jQuery resizable? It can be a real time-saver and make your life easier :)

If you want to see how it works, check out this simple example: https://jsfiddle.net/maehy5tj/1/

It's really all you need to do to get started :)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8>
  ....(omitted for brevity)...
</body>
</html>

Resizing a div dynamically based on its parent's position using JavaScript

Answer №1

Answer №2

Similar questions

What is preventing the MenuItem component from functioning as a Link in React Material-UI?

What is the best way to arrange list items in this manner?

Display/Conceal the UL subelement when selected

While creating a customer profile sample, I encountered an issue where I received an error message stating "POST http://localhost:3000/cusprofiles/add 400 (Bad Request)" when attempting to add data

Is there a way to utilize AJAX to submit a request to a PHP XML-RPC server?

What significance does the slash hold in a package name when using require for an npm package?

Tips for troubleshooting a node module that is part of a build process

Incorporating geocoding functionality in an asp.net mvc project and looking to efficiently transfer latitude and longitude data from JavaScript to a controller function

Is it possible to create a functionality in Google Sheets where a cell, when modified, automatically displays the date of the edit next to it? This could be achieved using a Google

Is it possible to view the code within the .js files located in the api directory of NextJS using web browsers?

The onScroll event is failing to trigger when scrolling to a particular div on Next.js

What is the best way to adjust the spacing between elements using CSS?

Is it possible to swap out a webpage link for a different one based on the size of the screen?

What is the best method for handling and analyzing error objects within a catch statement following an API request?

Is it possible for an object to be null even when its type is object

Transform all characters to lowercase, then capitalize them using only CSS

What is the Best Way to Create a Form Inside a Box?

What is the best way to create a video that adjusts to different screen sizes within

How to shift an image to the right side of the navbar

Webpack: Live reloading is not functioning properly, however the changes are still successfully compiling