Retrieve the DIV id based on the given coordinates

For example, I have the following code that showcases 3 div boxes per row across multiple rows on my webpage:

      <div id='row1col1' class='duty' style="top:50px ; left:50px " ></div>
      <div id='row1col2' class='duty' style="top:50px ; left:150px " ></div>
      <div id='row1col3' class='duty' style="top:50px ; left:250px " ></div>
      <div id='row2col1' class='duty' style="top:150px ; left:50px " ></div>
      <div id='row2col2' class='duty' style="top:150px ; left:150px " ></div>
      <div id='row2col2' class='duty' style="top:150px ; left:250px " ></div>
      <div id='row3col1' class='duty' style="top:250px ; left:50px " ></div>
      <div id='row3col2' class='duty' style="top:250px ; left:150px " ></div>
      etc

I am looking to dynamically position a new div and modify it based on the id or other attribute of the div directly above it. Since the parent div is different, is there a way to retrieve this information? Given that I know the 'top' and 'left' positions, can I obtain the ID of a div this way?

Any assistance would be appreciated.

jquerycss

Answer №1

There may be a more efficient way to achieve your objective. Nevertheless, this function should help you achieve what you're looking for:

function findAbove(selector, x, y) {
    var maxpos = 0, maxel;
    jQuery(selector).each(function(i, el) {
        var $el = jQuery(el),
            ex = parseInt($el.css('left')),
            ey = parseInt($el.css('top'));
        if (ex < x && ey < y && ex + ey > maxpos) {
            maxpos = ex + ey;
            maxel = $el;
        }
    });
    return maxel;
}
// Input the coordinates of the new div
findAbove('.duty', 250, 250).css('border','2px solid green');

If you are certain that the new div will be perfectly aligned with the divs above it, you can modify ex < x to ex == x, and replace ex + ey (in both instances) with ey.

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

What is the best way to send symbols to php for updating?

Is there a way to successfully submit special characters to PHP and have it update my database tables without any issues? I've noticed that when I try using symbols like ('!@#$%^&*()_+=),, the database table doesn't get updated. Any assi ...

phpjquerymysql

steps for navigating to the second slide

I currently have a set up with 3 "main" slides and an "intermediate" slide between each of them. I am hoping to achieve a specific effect by clicking on the appropriate buttons. ("go to slide 1", "go to slide 2","go to slide 3") When the user clicks on b ...

jqueryslideshowjquery-cycle2

What are the steps for utilizing JQuery to send JSON data?

I need to send Json data to a web service located on the same server, but I am unsure of how to achieve this using JQuery. Here is the code I have attempted: $.ajax({ type: 'POST', url: '/form/', data: {"name":"jonas"}, ...

jqueryjsonajaxhttp-post

How can I determine the remaining amount of scroll left in my HTML document?

Is there a method to determine how many pixels of scroll remain on the page when the scrollbar is set at a specific position? I am currently utilizing jQuery's scrollLeft feature, which can be found here: http://api.jquery.com/scrollLeft/. I want to ...

javascriptjqueryhtmlcss

"Learn the steps to dynamically update the ng-bind value of a single element within an ng-repeat loop by

I'm new to Angular and I'm working on developing a shopping cart. I'm currently facing an issue with adding the 'Added!' value when clicking on the "add to cart" button. Here is my code <div ng-repeat="item in products"> < ...

javascriptjqueryangularjsangularjs-ng-repeat

What is the best way to achieve this grid layout using Bootstrap 4 grids?

I'm struggling to achieve the desired layout using Bootstrap 4 grid. In the desktop view, images are in positions 2, 3, and 6, while the rest are text. https://i.sstatic.net/guhWy.jpg This is how the site should look on mobile. https://i.sstatic.ne ...

htmlcsstwitter-bootstrapbootstrap-4

I'm curious if it is possible to retrieve the dates of actions on websites using Selenium with Python

Is there a way to retrieve the date of data, like the date of comments, using HTML codes? I need assistance on how to achieve this through selenium in Python. Can Jquery be used as a solution? ...

jqueryajaxpython-3.xseleniumselenium-webdriver

Tips for showcasing a drop-down menu using Jquery

I am currently utilizing jQuery to showcase a drop-down menu. It is successfully working for a single menu and displaying the appropriate drop-down. However, when I attempt to use more than one menu, it displays all of the drop-down menus simultaneously. I ...

javascriptjqueryhtmlcssdrop-down-menu

Apply the jQuery method to select elements with index 3, 4, 5, 6, or 7, then add

My current Wordpress blog displays 20 posts. I am looking to apply a specific class to posts numbered 2 through 10, and then again from 12 to 20. I do not want the first post or post number 11 to have this class added. I attempted using CSS selectors lik ...

jquerycsswordpress

Creating a unique layout with CSS: layered divs

I'm struggling with a stubborn layout issue that I just can't seem to figure out... - Left column - Fixed, Static (always in view) - Right column - Fluid/liquid/scrollable --- Header - fixed --- left/main fluid/liquid --- Right/sidebar - fixed ...

csslayouthtmlsticky-footeroverlapping

Alter the class following modifications to the list

https://i.stack.imgur.com/QZob0.pngIn my dual list, the data is displayed in a ul li format fetched from a JSON file. Users can move items between the two lists. However, I am facing an issue where I want to apply a property that only displays content with ...

javascriptjqueryhtmlcssajax

Determine the percentage of clicks on an HTML5 canvas radial progress bar

Recently, I designed a circular progress bar displaying a specific percentage. However, I am facing a challenge in determining how to calculate the percentage when a user clicks on either the black or green part of the circle. Could you provide insight on ...

javascriptjqueryhtmlcanvas

Enhancing File Upload with ASP.Net MVC and jQuery Form Plugin

Does anyone have a sample that demonstrates how to accomplish this using ASP.Net MVC? I tried implementing the example from their website for file uploads, but I'm not receiving a satisfactory response. My controller doesn't recognize it as an AJ ...

asp.net-mvcjquery

Every symbol located at the top of the <td> element

SOLVED by P. Leger: In my CSS I just modified the vertical-align property to top, which successfully resolved the issue for me I am working on creating a basic schedule system where the admin has the ability to manage users and assign them to specific dat ...

htmlcssimage

Update the Knockout JS viewmodel from an external source

Question: How can I replace an entire object within my viewmodel that was created with the knockout mapping plugin, and ensure that the controls bound to that object are updated accordingly? Additional Information: I am currently using knockout in conjun ...

jqueryknockout.jsviewmodelsignalr

Updating Mysql data via a button on the homepage using the passed ID in the URL - a step-by-step guide

I have set up a Bootstrap modal popup for editing items on the home page. My goal now is to update the details of the selected item using PHP. In this case, I am passing the item id through the URL to select the item. After clicking the edit button, a po ...

phphtmljquerycssajax

What are some ways to prompt electron to refresh its rendering with updated CSS?

I am currently in the process of developing my first Electron app on Windows 10, using Visual Studio Code and Git Bash as my primary tools. However, I have encountered a frustrating issue where my app has suddenly stopped updating based on css changes. Spe ...

cssnode.jselectronbrowser-cache

The background extends beyond the confines of its container

I'm facing some challenges trying to create this specific layout, particularly with setting a background that should cover 50% of the screen size. My initial thought was to use an image as the background, but I need different colors for each page. ht ...

htmlcssionic2ionic3

Utilizing JQuery to extract data from a <select> dropdown menu

Is there a way to retrieve the current value of a SELECT tag using JavaScript or jQuery? I have tried using $('select').val(), but it only returns the default value and does not update when changed. Any suggestions on how to solve this issue? $( ...

javascriptjquery

Tips on achieving vertical movement within a div element from the bottom of the wrapper to the

I am struggling to animate a .alert div within its wrapper to fly up from the bottom of the wrapper by 40px. However, I am encountering difficulty as the alert div does not start at the bottom of the wrapper as intended. The desired behavior is for it to s ...

csscss-animations