Is there a way to determine whether there is an item located at a specific point on a grid?

Imagine a scenario where we have a grid with 5 columns and 3 rows as an example. However, the number of elements and their positions are unknown.

https://i.sstatic.net/Ay0i3.png

Consider that the only element on the grid is the red area. I am in need of a function with properties named row and column, representing the coordinates of the grid. If these are set to 1, 3, the function should return false since there are no elements at those coordinates. But if we set them to 3, 4, the function should return true. Essentially, I need this function to check if any element starts at the specified coordinates or covers the point within the grid. Is this feasible using pure JavaScript?

javascriptcssgridcss-grid

Answer №1

Include an ID in each element, such as id="12"(first row, second column). Utilize "for" loops and conditional statements ("if") internally.

Answer №2

Retrieve the HTML element along with its ancestors. Then, examine their placements within the table rows and columns collection to determine how they compare to the specified row and column.

function checkPosition(row, col){
    var targetElem = table.querySelector("tag name or identifier of the element"),
        parentColumn = targetElem.parentNode,
        parentRow = parentColumn.parentNode,
        rowCollection = table.querySelectorAll("tr"),
        actualRowIndex = [].indexOf.call(rowCollection, parentRow),
        actualColIndex = [].indexOf.call(rowCollection[actualRowIndex].querySelectorAll("td"), parentColumn);
        
    return row == actualRowIndex && col == actualColIndex;
}

console.log(checkPosition(2, 3)); //true

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

The pseudo class before is experiencing issues with background color in Safari and not functioning as

Issue with Pseudo class before not displaying background colour in Safari browser To view the code, please visit the following link here HTML <div id='test'> <p>Test </p> </div> CSS #test { position: relative; per ...

csssafaricross-browserpseudo-class

What is the best way to compress a set of string data in AngularJS?

My coding attempt resulted in an error. Here is the code snippet: var UglifyJS = require("uglify-js"); var result = UglifyJS.minify("Hello world @123;", { fromString: true }); console.log(result.code); When using UglifyJs in the above code, I encountered ...

javascriptangularjsuglifyjs

Do all descendants consistently trigger rerenders?

Recently, I was exploring the React new documentation here, where I came across this interesting piece of information: The context value mentioned here is a JavaScript object with two properties, one being a function. Whenever MyApp re-renders (for examp ...

javascriptreactjs

What is the best way to center a Bootstrap Navbar and set a fixed width that is neither responsive nor static?

I just started working on my webpage school project and I've managed to create a Navbar that looks decent. However, I want to resize it to be centered and have a specific width. Can anyone guide me on how to achieve this? Thank you! <!doctyp ...

htmlcssbootstrap-4widthnavbar

Utilizing the power of JavaScript within HTML to remove elements upon being clicked

Seeking help again for the page I'm building where I keep encountering errors. As a beginner, I find myself puzzled and in need of assistance. My task is to utilize a for loop to iterate over the images and attach an event listener to each one so that ...

javascripthtml

Is there a way to submit HTML form data using the action attribute without triggering a redirection to a different page?

I am currently working with Angular and Plaid. My goal is to submit a form that sends the public_token to /authenticate using the 'action' attribute in the HTML form. How can I achieve this without being redirected to another page? Step 2: Easy ...

javascripthtmlangularjsplaid

Asymmetrical Edges for a Pair of Divisions

Is there a way to skew two divs without a white line in between, similar to this example: Desired outcome I have tried using a negative top margin, but it doesn't work well in responsive design. Current result Here is the code I am using: ... < ...

htmlcsscss-shapesskew

Tips for dynamically refreshing a collection of radio buttons using jQuery Mobile?

If I have a set of 3 radio buttons like this: <label for="a-1">A</label> <input type="radio" name="a" id="a-1" value="1" /> <label for="a-2">A</label> <input type="radio" name="a" id="a-2" value="2" /> <label for="a- ...

javascriptjqueryjquery-mobileradio-buttonchecked

The Node.js express-generator application encounters a problem and is unable to start because of a TypeError: app.set function is not recognized

During the setup of my application using nodejs and express-generator, I encountered an issue when running the following commands in my terminal: npm install multer --save npm audit fix Afterwards, when I attempted to run node ./bin/www I received an err ...

javascriptnode.jsexpressnpm

Using an image link in CodeIgniter will not function properly

Could someone please clarify why this particular code is not functioning properly in CodeIgniter? .linkBack{ background-image:url('/myBlog/CodeIgniter_1.7.2/pictures/arrow.gif'); display:block; height:58px; width:105px; text-indent:-999px ...

phpcsscodeigniterimage

The LINK CSS within the HTML code serves no purpose on the internet? Everything is working perfectly

Everything works fine in the development environment, but not online. The website URL is: The CSS URL: Both URLs can be accessed. However, the CSS file seems to have no effect. Any idea why? Thank you in advance! Additional Info: I am using nginx as a ...

htmlcssdjangobrowsernginx

What is the best way to show a pop-up message to a visitor on my site for the first time

I am seeking a way to showcase a popup the first time a user lands on my website. At present, the popup appears only upon page refresh. Check out the demo below: var popupdisplayed = false; jQuery(function() { jQuery('[data-popup-close]').o ...

jqueryhtmlcss

What steps can be taken to display database results solely for the user currently logged in and created by them?

Currently, I'm in the midst of a project that involves extracting an HTML list from JSON data using JavaScript. The list is being displayed on the logged-in user's profile, showcasing job listings from the JSON data. While I've successfully ...

javascripthtmlcssarraysjson

Error! D3.js is throwing an Uncaught TypeError because it cannot find the function .enter(...).append(...).merge

Currently, I am facing an issue while attempting to construct a table with multiple nested dropdowns using d3.js. The problem arises when switching from a newer version of d3 where my code functions flawlessly to d3.js v3. Upon replacing the newer version ...

javascripthtmld3.jshtml-tabledata-visualization

Learning about extracting the route path variable in the node.js Express route.get() function

Why am I encountering a 404-NotFound error in this scenario? var test = require('./routes/test'); app.use('/test', test); router.get('/test', function (req, res, next) { //res.render('/test', { title: 'test ...

javascriptnode.jsexpress

Scrolling to the next div will automatically align it in the center of the screen for the user

I am in the process of creating a single-page website and I would like to stack multiple divs on top of each other, all approximately 400px in size (with variations). Instead of using a smooth scroll, I want the page to jump to the next div and have it cen ...

javascriptjquerycsshtml

What could be causing the padding of my anchor element to extend outside the boundaries of its parent list

In the provided images, it is evident that the <li> element is failing to expand and is disregarding the padding of the parent element.</p> <p><a href="https://i.stack.imgur.com/4ZH65.png" rel="nofollow noreferrer"></a></p& ...

htmlcsspaddinginline

Jquery bypasses original stylesheet settings when inline styles are removed

I have a CSS file with various styles defined within it. One style in particular has the property position set to 'fixed', but this only applies to specific combinations of classes. For example: .mystyle.blue { position: fixed; } Here, el ...

jquerycss

Displaying NodeJS error messages directly in the main HTML file

After creating a form using NodeJs and implementing input validations that display errors when users enter incorrect values, I encountered an issue where the errors appear on a new blank page instead of within the main HTML file itself with stylish formatt ...

javascripthtmlnode.js

Class lacking any discernible design elements on a Bootstrap webpage

I am currently customizing a Bootstrap template and delving into its code to gain a deeper understanding. I believe it's beneficial for me to explore the code so that I can enhance my skills in creating similar websites independently. If you're c ...

jqueryhtmlcsstwitter-bootstrap