Identifying rectangular shapes in an image and overlaying a div on top using Jquery

I am currently exploring the possibility of achieving the following:

Imagine having an image within a div (serving as the background image). This image resembles an Excel sheet. My goal is to generate an input tag or contenteditable div when a user clicks on any cell of the image. The border of the created div or input should match the size of the cells in the image.

Could someone please provide me with some guidance or point me in the right direction?

One potential solution that caught my eye is:

However, it seems to have an alignment issue with the cells in the image.

javascriptjqueryhtmlcss

Answer №1

Not sure about your level of expertise, so please bear with me if this sounds basic. I suggest experimenting with JQuery functions to extract dimension variables and then use that information to guide your logic.

For example:

$( "img" ).click(function() {
     var height = $( this ).css( "height" );
     var width = $( this ).css( "width" );
     var ratio = height/width;

     if( min_rectangle_ratio < ratio < max_rectangle_ratio)
     {
          //set div dimensions based on the values you obtained
     }
 });

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

Tips for connecting a SharePoint Online list to an HTML table using jQuery

Seeking guidance on connecting SharePoint online list data to an HTML table. I am able to retrieve the data using CamlQuery, but unsure how to display it in an HTML table format. ...

jquerysharepointdata-binding

Trouble Logging In: User Login Issue with SailsJS and PassportJS Plugin (sails-generate-auth)

I'm currently facing an issue with user authentication in my SailsJS app using PassportJS. I followed a tutorial on setting up authentication in SailsJS using sails-generate-auth, which can be found here. The POST request seems to be routed correctl ...

javascriptnode.jsauthenticationsails.js

Obtain a collection of the corresponding keys for a given value from dictionaries

I'm implementing a function that retrieves a list of keys associated with a specific value in the dictionary. Although I am able to print out the first key successfully, I'm facing difficulties in displaying subsequent keys. I understand that I ...

javascript

subscriptions to behavior subjects may not function properly across all components

When setting up my global service, I instantiate a BehaviorSubject variable dataWorkflowService: export class CallWorkflowService { url = 'http://localhost:3000/'; selectedNode : BehaviorSubject<Node> = new BehaviorSubject(new Node(&a ...

javascriptangularrxjssubscriptionbehaviorsubject

The `parent()` method in jQuery is a powerful

Assistance Required with parent() in jQuery. I am facing an issue related to the parent() function in jQuery. I have a series of images, each paired with a form allowing users to execute actions such as modifying the image description. <div id='i ...

jqueryjquery-selectors

How can I utilize ng-repeat in AngularJS to iterate through an array of objects containing nested arrays within a field?

Here is the structure of an array I am working with: 0: {ID: null, name: "test", city: "Austin", UserColors: [{color: "blue"},{hobby:"beach"} ... ]} }... I am currently attempting to ng-repeat over this initial array in my code. However, when I tr ...

javascriptarraysangularjsangularjs-ng-repeat

clear JavaScript array of elements

I've been grappling with this issue for hours now, and it seemed so straightforward at first; My goal with JavaScript is to iterate through an array, retrieve the current index value, and then remove that value from the array. I've read that spl ...

javascriptunsetsplice

What is the best way to swap out an observable array with an array retrieved from an API response

I have a custom material autocomplete input that allows users to select items in a dynamic form component. Since the fields of the form are dynamic, I need to filter the list of items every time a user types something into the input. filteredOptions: { [k ...

javascriptarraysangularrxjssubscription

Utilizing React to highlight buttons that share the same index value upon hover

I have some data in a JavaScript object from a JSON file, where certain entries have a spanid (number) while others do not. I've written React code to highlight buttons with a spanid on hover, but I'm looking for a way to highlight or change the ...

javascriptcssreactjs

Using ASP.NET MVC to Accept JSON in an Action as an Anonymous Object

When making a POST Ajax request to a controller action with JSON data, it is important to consider the data structure. Here is an example of how the request might look: $.ajax({ type: "POST", url: "/AssembleProducts/UpdateProduct", data: JSON. ...

jqueryasp.net-mvcjsonpost

Injecting components into the DOM using JavaScript in Vue.js

I am currently developing a GUI for a webgame using Vue.JS and opting to use http-vue-loader instead of Webpack or similar tools. Personally, I find them cumbersome and prefer to avoid using them. Typically, in order to integrate my components into the DO ...

javascriptvue.jsvuejs2vue-component

Implementing Facebook conversion tracking when there is no distinct 'Thank you' page can be done by utilizing the onclick event

Currently working on incorporating Facebook conversion tracking into a Facebook Tab. To see the page, visit this link. The issue I'm facing is that a separate page does not load after the form has been submitted. Is there a way to execute a section of ...

javascriptajaxfacebookonclicktracking

Using Plupload plugin to handle file uploads triggers unexpected page refresh when making Ajax requests

I have implemented the Plupload plugin to facilitate the uploading of multiple files. I have linked the FileUploaded event to the uploader in order to execute additional actions once a file has been uploaded. Below is where I am attaching the event. uploa ...

javascriptjqueryajaxplupload

The dropdown in the HTML tbody section is displayed above the thead

I'm experiencing an issue where my tbody element is appearing above the thead section in my table. I've been unable to identify the cause of this problem. <table id="myTable" class="table table-inverse table-hover"> <thead id = "h ...

phphtml

Converting blobs to strings and vice versa in Javascript

After successfully converting a blob to a string using FileReader, the challenge now is to convert it back: var reader = new window.FileReader(); reader.readAsDataURL(blob); reader.onloadend = function() { base64data = reader.result; var blobToSend ...

javascriptfilereader

An automated feature that smoothly transitions a large image onto the screen

I came across a plugin, possibly a slideshow plugin, that smoothly slides a large image along the y-axis. It's hard to explain, but imagine the visible image is only 600px by 300px, while the actual image is 600px by 600px. This plugin would scroll t ...

javascriptjqueryslideshow

Implementing AJAX notifications in a contact form integrated with PHP, Google reCAPTCHA, and SweetAlert

I've implemented an AJAX script to handle the submission of a basic contact form with Google reCAPTCHA at the end of my HTML. Here's the relevant HTML code: <div class="col-md-6"> <form role="form" id="form" action="form.php" method ...

javascriptphpjqueryhtmlforms

Determine if two instances are within the same week, where each week starts on Friday and ends on Thursday, using moment.js

Currently, I'm in the process of developing a Discord bot using node.js and discord.js. One of the features allows users to vote through a command, but I want to restrict them to voting only once per week. The challenge lies in the fact that in this ...

javascriptnode.jsdatemomentjsdiscord

The functionality of the controls is not functioning properly when attempting to play a video after clicking on an image in HTML5

While working with two HTML5 videos, I encountered an issue with the play/pause functionality. Despite writing Javascript code to control this, clicking on one video's poster sometimes results in the other video playing instead. This inconsistency is ...

javascriptjqueryhtmlvideo

Strategies for extracting data from a third-party website that utilizes JavaScript to set the value

Before, I would use jQuery to load external website content such as html or json. Sometimes, I even utilized a proxy PHP page in order to bypass strict origin policies on certain sites. However, I've encountered an issue with some websites. In the HT ...

javascriptphpjquery