How to Detect If a Clicked Div is Above, Below, or Between Specific Divs in JavaScript

Learn to easily check the position of a clicked `.seat-row` div relative to `.exit-row` divs using JavaScript, all without additional libraries!
---

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How to detect if a clicked div is above or below a specific div?

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Detecting the Position of Divs in JavaScript

In web development, there are times when we need to determine the positioning of certain elements within a structured layout. One common task is to find out if a clicked element lies above, below, or between other specific elements on the page. This post will dive into how to achieve this using plain JavaScript, specifically focusing on detecting the position of a .seat-row div relative to an .exit-row div.

The Challenge

Imagine you are working with a specific HTML structure where you have multiple .seat-row divs representing different seats, along with .exit-row divs that delineate exits. The challenge is to set up a detection mechanism so that when any of the .seat-row elements are clicked, we can identify their position in relation to the exit rows. The desired outcomes are:

Above: The clicked .seat-row is located above all .exit-row.

Below: The clicked .seat-row is below all .exit-row.

Between: The clicked .seat-row is situated between two .exit-row.

The Solution

Step 1: Set Up Event Listeners

First, we need to set up event listeners on all .seat-row elements, so that we can respond to clicks. We will loop through each .seat-row element using querySelectorAll and check for any click events.

Step 2: Capture the Clicked Element's Index

When an element is clicked, we need to determine its index within the list of .seat-row elements. This is crucial as we will compare this index to the indices of the .exit-row divs.

Step 3: Determine the Position of the Clicked Element

We will collect the indices of all .exit-row elements and compare them with the index of the clicked .seat-row. Based on this comparison, we can categorize the clicked .seat-row as being above, below, or between the exit rows.

Implementation

Here’s the JavaScript code that accomplishes the above steps:

[[See Video to Reveal this Text or Code Snippet]]

Explanation of the Code

Event Listener Attachment: Adds an event listener to each .seat-row that ignores those containing an .exit-row.

Index Capture: Upon a click, it saves the index of the clicked .seat-row and collects the indices of .exit-row elements.

Position Check: The code checks:

If there are no exit rows above the clicked seat-row (is it above?).

If there are no exit rows below the clicked seat-row (is it below?).

If there are exit rows both above and below to determine if it is between.

Conclusion

By following these steps, you can effectively determine the positioning of clicked <div> elements in relation to others in a plain JavaScript environment. This method is efficient and does not require any additional libraries, making it lightweight for web applications.

Implement this code in your project to enhance user interaction and manage layouts more dynamically. Happy coding!