Tips on creating a resizable box that can move from left to bottom and also from right to top

Hey there, I'm currently working on developing my own catalog and I'm in the process of creating a selection tool to allow users to zoom in on a specific part of an image. If you're interested, you can check out the project here.

However, I seem to have hit a roadblock with my logic when it comes to resizing the selection box while dragging from the bottom right corner to the top left. I realized that the issue lies in how the box is currently positioned, as positioning is typically based on the top left corner. I've been exploring a couple of solutions, but haven't made much progress.

One approach I considered was finding a way to position the box relative to its bottom right corner.

Another idea I've been experimenting with is adjusting the box's position by its height and width to potentially achieve a bottom right position.

If you're interested in checking out the JavaScript related to this project, you can find it here.

If anyone has any suggestions or guidance on how to tackle this problem, I would greatly appreciate it.

Thanks,
Levi

javascriptjquerycss

Answer №1

To simplify, you just need to draw a box from the top left corner to the bottom right corner. Let's assume the following:

  • (downX,downY): coordinates when the mouse is pressed;
  • (currentX,currentY): current coordinates.

Then:

  • Top: minimum of downY and currentY;
  • Left: minimum of downX and currentX;
  • Bottom: maximum of downY and currentY;
  • Right: maximum of downX and currentX.

There's no need for the complexity of determining left to right or right to left.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Dynamic jQuery URL truncater

Is there an on-the-fly URL shortener similar to Tweetdeck available? I have come across several jQuery and JavaScript plugins that can shorten a URL through services like bit.ly when a button is clicked. However, I am looking for one that shortens URLs aut ...

javascriptjqueryurl-rewritingbit.lyurl-shortener

The error message "TypeError: 'undefined' is not an object ('_this.props')" indicates that the property '_this

Having trouble solving this issue. Need assistance with evaluating 'this.props.speciesSelection.modalize' <BarcodeInput speciesSelection={this.props.speciesSelection} species={species[0]} barcode={{ manufacturerValue: ...

javascripttypescriptreact-native

How come I am unable to save an array of objects in a State within React JS?

React JS component: When I make a request to the backend to fetch data stored in a MySQL table, it returns an array of objects. I store this data in a state called `favcoin`. However, when I console.log(favcoin), it displays an empty array [ ]. Strangely, ...

javascriptmysqlnode.jsreactjs

Having trouble with React Page crashing when trying to access the component state

I'm attempting to create a side-bar menu that swaps out content in a <main> tag when menu buttons are clicked. However, I'm facing an issue where the page becomes unresponsive and eventually crashes due to React issues while trying to read ...

javascriptreactjsmaterial-ui

The addClass, removeClass, and css functions in jQuery are malfunctioning

I stumbled upon this website and I am looking to switch the font color from black to white. I attempted various methods but unfortunately, none of them seemed to work: Implementing jQuery's addClass function (to add a class to the SPAN tag) Uti ...

jqueryhtml

Looking for a solution to the problem: Module 'import-local' not found

internal/modules/cjs/loader.js:596 throw err; ^ Error: Cannot find module 'import-local' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:594:15) at Function.Module._load (internal/modules/cjs/loader.js:520:25) Encoun ...

javascriptnpmbabeljs

There are a few steps to take in order to sort an array of objects by a

I want to organize and display data in a sortable table format javascript let dataList = [ { idx: number, name: string, btn: number, index: number }, { idx: number, name: string, btn: number, index: number }, { idx: number, name: string, btn: number ...

javascriptangularsortingngfor

Iterate over the keys within a JSON array that begin with a certain key name

Is there a more efficient way to dynamically loop through keys in a JSON array starting with 'option' and either loop through them all or set a maximum limit? Currently, I am using the following approach: $.each(shopifyProductJSON.variants, fun ...

javascriptjqueryjson

Tips for keeping the header section anchored to the top of the page

I am having trouble getting the menu bar and logo to stick at the top of my header section in the template. I have been trying different solutions, including using the sticky.js plugin for almost 4 days now but it's not working. I also have parallax e ...

javascriptjqueryhtmlcss

What is the best way to link assets within an Angular custom element (Web Components)?

After successfully creating a web component and referencing an image from my asset folder, everything was running smoothly on my local environment. However, when I published my custom element to Firebase hosting, I encountered some issues. When trying to ...

javascriptangularweb-componentcustom-element

Steps to display an angled bracket to indicate a line break

I have a div that is editable, allowing me to display the entered text. To indicate each new line, I would like to show a ">" symbol at the beginning of the line. HTML <body> <div> <span> &gt; </span> ...

jquerycsshtml

Assign a value to a cookie using Node.js

I'm currently working on a web project using node.js and express. What is the best way to establish a cookie value? ...

javascriptnode.jsexpresscookies

Is there a way for me to easily showcase a randomly selected product from my database in a box on my website

For my Rails 3.0 project, I am considering building a partial that refreshes periodically to display products from a list using jQuery. Is this the recommended way of doing it in the Rails framework? ...

ruby-on-railsruby-on-rails-3jquery

Are you interested in triggering a personalized event when attempting to sort data in Datatables?

Is there a way to trigger my own event without sorting when the user clicks on a column header? I have looked into different methods, but none seem to be suitable for this purpose. Although I can bind to the sort event to perform custom actions, the sorti ...

javascriptjquerysortingdatatables

What is the best method to assign a property to a model within AngularJS by utilizing an attribute parameter?

I am in the process of creating a custom directive in AngularJS for a UI slider that can be used multiple times. Each slider should be able to bind to a specific property. My idea was to use an attribute called "property" which would automatically update w ...

javascriptangularjsangularjs-directive

Automatically assigning a FormData key/value pair upon clicking using Puppeteer in NodeJS

While working on a NodeJS project, I am using Puppeteer to fill out a form. So far, the regular type and click functions work perfectly. After clicking the "submit" button, a POST request is sent to the server with some form data. I want to add a key/value ...

javascriptnode.jspuppeteerform-data

What is the best way to hide the drop down menu after it has been opened by clicking on the same element

My attempt to create a code that toggles a drop-down menu on every click and closes any other open menus is not working as expected. The menu doesn't close upon clicking it again. $(document).ready(function(){ "use strict"; $(".dropdown").hi ...

jqueryhtmlcssdrop-down-menu

Ensuring the Angular Material bottom sheet (popover) stays attached to the button

Recently, I've been working on an Angular project where I successfully integrated a bottom sheet from Angular Material. However, I encountered an issue when trying to make the opened popup sticky to the bottom and responsive to its position, but unfor ...

cssangularsassangular-material

What is the best way to update the content of a particular div and its associated link ID whenever the link is clicked?

I need to update the content of a div by clicking on an href link that includes an id named data. The issue I'm facing is that I can't access the id value within my script because it's passed within a function. How can I pass the data variab ...

javascriptphpjqueryajax

Utilize an A-frame feature to dynamically enable or disable a component through a

I have set up a virtual environment using A-frame () with some raining effects and a button. What I want to achieve is to have a function executed when the button is clicked, that function should remove the rain component from the scene. Here is the code s ...

javascriptfunctionthree.jsaframewebvr