Adjust the placement of a div within another div based on various screen sizes dynamically

Currently, I am working on an Ionic 2 app where the user is required to select specific points on the screen. These coordinates will then be utilized on another screen with a different size. My initial attempt at using rule of three/cross multiplication provided an approximate value that was not precise enough for my requirements.

https://i.sstatic.net/SP86l.jpg

Here is an example of my current project, where I tried using values that seemed appropriate on one screen, and applied the same percentage on another screen with a varying size:

makePosition() {
  let canvasRect = document.getElementById("shapeBoard").getBoundingClientRect();
  let top = this.elementHead.nativeElement.style.top; 
  let left = this.elementHead.nativeElement.style.left; 
  this.elementHead.nativeElement.style.top = canvasRect.top + (canvasRect.height * 1.931634728536)/100 + "px";
  this.elementHead.nativeElement.style.left = canvasRect.left + (canvasRect.width * 48.738582882804224)/100 + "px";
}

html: https://codepen.io/jmachado/pen/ybzNzr

Is there a method to dynamically adjust the position of the circle div to consistently remain in the same location over the image?

javascripthtmlcssangularionic2

Answer №1

By following these 5 steps, you can achieve a precise positioning:

1) Ensure that the circle is positioned relative to the container of the image.

2) Set the image width to 100% of its container.

3) Save the top and left positions as percentages.

4) Use percentages for top and left instead of pixels.

5) Make sure that neither the image nor its container has borders or padding defined.

Using percentages for the top and left positions allows for automatic adjustment during screen resizing without needing JavaScript.

When setting the top and left positions, consider that they are relative to the top and left of the circle. You may need to center the circle by adjusting the margin to half of its width.

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

Checkbox option to change background color of table cell

$('#selectall1').click(function(event) { if (this.checked) { $('.first').each(function() { this.checked = true; }); $('.second').each(function() { this.checked = false; }); $('.third&apos ...

jqueryhtmlcss

I am looking to implement screen reader capabilities for both the select-2 combo box and bootstrap's datetime-picker. How can I go about doing

On my existing website, I have select-2 combo boxes for drop-down lists and a Bootstrap Calendar widget. While these features work well, they lack accessibility for users with disabilities. In an effort to make the website inclusive for everyone, I am work ...

javascripthtmlaccessibilityscreen-readersangular-bootstrap-calendar

Vuetify alters the text color of the <vs-button> element

Outline of the Issue Upon installing vuetify, the text color of my <vs-button> has changed from white to black. Despite trying to adjust the color in the vuetify theme, I am unable to change it back. I have also created a custom filter rule using po ...

javascriptvue.jsvuetify.js

Having difficulties fetching data from Express server to React

My current project involves fetching data from an Express server to a React application using the Fetch API. The Express server interacts with a PostgreSQL database to retrieve relevant data that should be sent to the React frontend. The code snippets bel ...

javascriptreactjsnode.jsexpressfetch-api

Is there a way to modify the background color of a button once it has been clicked, specifically using JavaScript?

I am looking to change the background color of a button that I have clicked on in my code. Do I need to use loops and conditions for this task? I attempted to access the first index, but I am unsure how to change the background color of other buttons. l ...

javascripthtmlarrayssimple-html-dom

How is it that the identical group is unable to produce an accurate line chart and its corresponding range chart?

Check out my code snippet on JSFiddle here: https://jsfiddle.net/8yf7j3k6/11/ I am currently working on replicating a similar visualization of my data for a range chart, allowing me to scrub through the chart while utilizing tooltips in the line chart rep ...

javascriptd3.jsdata-visualizationdc.jscrossfilter

Delay the .show class in Bootstrap 4 navbar collapse after disabling the .collapsing class

In Bootstrap 4 collapse functionality, I am looking to remove the delay in displaying the .show class after the .collapsing class. What I want is for the .show class to appear on the .collapse element immediately after a click event triggers the toggle. ...

jqueryhtmlcsstwitter-bootstrapbootstrap-4

Unable to reach the array file

Having trouble accessing the elements of the file array const p_page = postP.new_pages; const p_page_o = postP.new_pages_order; const p_page_o_len = p_page_o.length; if (p_page_o_len > 0) { for (let i = 0; i < p_page_o_len; i++) { c ...

javascriptarraysvue.jsnuxt.js

What causes a useState to revert back to false when navigating back and forth on the screen?

Recently, I've been working on a feature to toggle favorite products and store their unique id along with an isFav property on a Firebase database. This data is then used to display the favorites on the FavoritesScreen. While testing this functionali ...

javascriptreactjsreact-nativereact-navigation

Text that is superimposed onto an image

Struggling to implement a hovering text over an image? I attempted to follow a tutorial, but couldn't adapt it to my project. While I managed to create a fixed overlay, I aim for a responsive solution that adjusts with resolution changes. My goal is t ...

htmlcss

Phonegap app unable to process AJAX post request, functions properly in browser

My AJAX request is encountering issues specifically when tested on the Phonegap App using iOS10. The code I am working with is as follows and functions perfectly in a browser: if($.trim(firstname).length > 0 & $.trim(email).length > 0 & $.t ...

javascriptiosajaxcordovaphonegap

JQuery fails to remove the "display:hidden" attribute

List of methods I attempted: Utilizing .removeClass and addClass functions Applying show() and hide() methods Modifying the CSS properties Initially, I confirmed that my script contains onLoad. Furthermore, all other elements are functioning correctly. D ...

javascripthtmljquery

Error detected at /register/ Invalid Fernet key format - it should be 32 bytes in length and encoded in url-safe base

I'm currently working on encoding the payload data from a form I've made using React on the frontend. Here's the code snippet I am using: const handleSubmit = (e) => { e.preventDefault(); const encryptedPassword = CryptoJS.AES.en ...

javascriptpythonreactjsdjangodjango-rest-framework

Ensure that the promise is fulfilled only if a specific condition is met

I have a complex if-else condition in my code that includes different promises. Once the logic determines which condition to enter and executes the corresponding promise, I need to ensure that a final promise is always executed. if (a < 5) { vm.pr ...

javascriptangularjs

Jquery scripts seem to have a hit-or-miss success rate

Recently, I added a couple of Jquery scripts in my header to handle the fading in of a specific CSS class and scrolling down another one. Both of these classes are initially set to display: none in CSS, with Jquery responsible for making them visible. Here ...

javascriptjqueryhtmlcss

Display an icon button when a user edits the text in a text field, and make it disappear once clicked on

Figuring out how to incorporate a v-text-area with an added button (icon) that only appears when the text within the text area is edited, and disappears once it is clicked on, has proven to be quite challenging. Below is a simplified version of my code to ...

javascripthtmlvue.jsvuetify.js

Navigating routes with regular expressions in Express

Recently, I've implemented the regex pattern /^\/(\d{5})$/ in my express route. However, an error has surfaced. The error message reads: SyntaxError: Invalid regular expression: /^\/^\/(?(?:([^\/]+?)){5})$\/?$/: Inval ...

javascriptregexnode.jsexpress

The body parser is designed to efficiently parse and handle both gzip and json formatted HTTP POST request bodies

I've set up an API endpoint to manage http POST requests from a client. At the moment, I'm using Express framework and bodyParser to handle request bodies. What I need help with is configuring body-parser to effectively handle cases where request ...

javascriptnode.jsexpresshttp-postbody-parser

Get information from one div and implement it in a different div

I am working on an application that creates div boxes dynamically and loads images through AJAX to place inside these boxes. To avoid unnecessary loading, I want to check if a box already exists before loading images. If it does exist, then I would like t ...

jqueryajaxdomhtml

Issues with Ionic 3 Directive Not Functioning

Struggling to create a custom directive in Ionic that won't resize automatically? I can't figure out what's going wrong. Here's the code snippet from my project, which is an Ionic 3 app with Angular 4: import { Directive, HostListener ...

angulartypescriptionic2