Generate a new nested div if there is already a different child present at the specified coordinates (x, y)

My goal is to add a textarea to a sidebar on the right whenever a click is made on the page. The current code I have is as follows:

$('#page_to_be_clicked').click(function(e){
    var offset = $(this).offset();
    var comment_box_y_coord = e.pageY - offset.top;
    alert(comment_box_y_coord);

    $("#sidebar").append('<textarea id="cmmnt" rows="4" cols="10" '+
        'style="position:absolute;top:'+comment_box_y_coord +
        'px;left:5px"></textarea>');
})

The issue with this code is that if a textarea already exists at the specific location, a new textarea will be created on top of it. Ideally, I would like the textareas to be created one below the other when multiple clicks are made at the same point on the page.

Is there a way to check if a child already exists at the required coordinates before creating a new one?

Any assistance on this matter would be greatly appreciated. Thank you.

How should the textareas appear when clicked in a sequence:

Answer №1

It is essential to conduct thorough testing before implementation. I believe the following steps should be taken:

View the DEMO

Within your function, update this specific line:

var comment_box_y_coord =  checkCoords(e.pageY - offset.top);

Additionally, introduce the following function:

function checkCoords(y) {
    if ($("textarea").length > 0) {
        $ts = $("textarea");
        for (var i = 0; i < $ts.length; i++) {
            var $ti = $ts.eq(i),
                tcoords = [$ti.offset().top, $ti.offset().top + $ti.height()]
            if (y >= tcoords[0] && y <= tcoords[1]) {
                y = tcoords[1] + 3;
            }
        }
    }
    return y;
}

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

Is there a way to trigger jQuery animations even when the browser window is not in focus?

Hi there, I am currently working on developing an ajax-based multiplayer game that connects to a server for updates. The game has various game states and requires the GUI to be animated accordingly. However, I have encountered a problem where jquery anima ...

Issue with Angular 13 Bootstrap5 Navbar's functionality

Angular 13 is my framework of choice, and I recently integrated Bootstrap 5 into my project using the command below: ng add @ng-bootstrap/ng-bootstrap As for the index.js file content, it looks like this: <!doctype html> <html lang="en" ...

Determine whether a child node is an element or a text node using JavaScript

I am experiencing an issue with the childNodes property. Here is the scenario: <ol> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> //childNodes.length = 7 However, <ol><li> ...

What is the proper way to include 'rowspan' specific CSS within an HTML table?

I have an HTML table with rowspans in it: table tr, td { border: 1px solid black; } tr:nth-child(1) { background-color: red; } tr:nth-child(2) { background-color: blue; } <table> <tr> <td rowspan=2>Section 1</td> ...

Using jQuery to dynamically check or uncheck checkboxes in a JsTree based on certain conditions

I am working on implementing JsTree Checkbox functionality based on a specific condition. The checkboxes should be checked or unchecked depending on the value from a dropdown change event. In this scenario, 0 indicates unchecked and 1 indicates checked. ...

Transform form data into a specialized JSON structure

I have a form set up in the following way: <form id="myForm" ng-submit="submitForm()"> <select name="ItemName" ng-controller="ItemController"> <option value="" selected disabled>Select</option> <option ng-rep ...

Experimenting with a custom AngularJS filter designed to extract numerical values from a chunk of text

I am working on creating a unique filter that can extract numbers from text input into a text box. For example: User enters: The cat went to 4 stores and bought 3 bags of cat litter for 1 dollar. The desired output would be: [4, 3, 1] This filter works ...

How to resolve CORS error when using custom request header in Django with JavaScript and redirecting to OPTIONS request?

I am currently working on building an API library using Django. This API will be accessed by javascript, with the Django-API and javascript running on separate servers. The Django API library requires a custom request header from the javascript front end, ...

Distinction between style and styleClass on a JSF webpage

I recently began navigating a java code base that utilizes the style and styleClass keywords to customize elements within the jsf page. This particular project is built on jsf 2.2. The 'style' keyword is used for applying html attributes like: ...

Error: The function $compile does not exist

Currently, I am working on developing an AngularJS directive using TypeScript. While testing my code in the browser, I encountered the following error: TypeError: $compile is not a function at compileComponent.js:14 Interestingly, the TypeScript compiler ...

Using v-model with an input file is not supported

Is there a solution for not being able to use v-model in an input tag with type="file"? Here is an example of the HTML code causing this issue: <input v-model="imageReference" type="file" name="file"/> ...

What is the best way to iterate over JSON data and organize the output based on the key value?

Let's say I want to filter through the JSON data below and only push the home_team_conference if it matches Southeastern. My goal is to organize the data by home_team_conference in order to display each array on different pages of my website. Currentl ...

Vue - Seamlessly Editing and Creating Content Together

When using Laravel, I am attempting to pass data to a Vue component. Depending on whether the user enters the component through an edit URL or a create URL, we send either an array of data or null. Here is an example of how this process works: Blade view ...

What is the best way to notify a user one minute before their cookie expires using PHP and JavaScript?

I need a solution to alert my logged-in users one minute before their cookie expires, allowing them to save content in the CMS. Any ideas on how I can make this happen? In my auth file, I have configured the following: setcookie("USERNAME", $user,time()+ ...

Is incrementing x by 1 equivalent to x + 1?

I have a very basic angular application. It simply increases the value by 1 when clicked on using ng-click. Take a look at JSFiddle <div ng-app="app" ng-controller="ctrl"> <div ng-click="hello=hello+1">THIS WORKS ON CLICK: {{hello}}</d ...

Mapping corners with Google Maps

The mask assigned to webkit-mask-image will remain stationary even when scrolling the page. View jsFiddle Sample body{ height:1500px; } #wrapper { margin-top:250px; width: 300px; height: 300px; border-radius: 100px; overflow: hi ...

Step-by-step Guide: Building a Nested Bootstrap Navigation Tabs Component on a Webpage

Within a page, I have integrated nested bootstrap navs components. The issue arises when clicking on "Nested Tab 2," which functions correctly, and then switching to "Nested Tab 1" where the tab content is not displaying properly. I am uncertain if there ...

Struggling to establish a functioning proxy in my React and Node application

In the process of developing a react client app with a node.js express backend, I have encountered an issue related to project structure. https://i.sstatic.net/8rID0.png The client app includes a proxy configuration in its package.json file: "proxy": "h ...

The Ajax post function behaves correctly in Chrome, however, no data is being received on the server when using Internet

Looking to fetch and manipulate an image (png) created by a flash application. When a user clicks on a link, this is what happens: var dataImgBase64 = document.getElementById("flashApp").getThumbnail(); The flash app then sends me the image in base64 for ...

Preserving the HTML tag structure in lxml - What is the best method?

Here is a url link that I have: I am attempting to extract the main body content of this news page using LXML with xpath: //article, however it seems to include content beyond the body tag As LXML modifies the HTML structure upon initialization, I am see ...