Locate the exact cursor position upon user click and showcase a div at the same spot

Question

Locate the exact cursor position upon user click and showcase a div at the same spot

I am seeking a solution to determine the exact position of the cursor where a user has clicked.

My goal is to display a div at the bottom side of the page wherever the user clicks.

For instance, on the Stack Overflow homepage, if someone clicks on the logo, the div should appear at the bottom position of the logo.

Similarly, if I click on a link at the bottom of the page, the div should be displayed at that same location.

While I am currently using mootools as my JS framework, any JavaScript code would be appreciated for this task.

I hope this explanation clarifies my query.

Thank you in advance,
Avinash

javascript mootools1.2

Answer 1

Answer №1

<head>
</script>        
function getXPosition(evt) 
{
    if (evt.pageX) return evt.pageX;
    else if (evt.clientX)
        return evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
    else return null;
}
function getYPosition(evt) 
{
    if (evt.pageY) return evt.pageY;
    else if (evt.clientY)
        return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop :  document.body.scrollTop);
    else return null;
}
function handleClickedEvent(evt)
{
    if(typeof evt == 'undefined')
    evt = window.event;
    alert("X = "+ getXPosition(evt) + " Y= " + getYPosition(evt);

}
</script></head>
<body onclick="handleClickedEvent()"></body>

You can also use window.event.x, window.event.y but this method is more stable and reliable for getting positions.

[ Instead of using the alert message, you can update the

divElement.style.left ,  divElement.style.top

based on the x and y positions. Make sure the div's position(in style) is set to absolute. ]

Answer 2

<head>
</script>        
function getXPosition(evt) 
{
    if (evt.pageX) return evt.pageX;
    else if (evt.clientX)
        return evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
    else return null;
}
function getYPosition(evt) 
{
    if (evt.pageY) return evt.pageY;
    else if (evt.clientY)
        return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop :  document.body.scrollTop);
    else return null;
}
function handleClickedEvent(evt)
{
    if(typeof evt == 'undefined')
    evt = window.event;
    alert("X = "+ getXPosition(evt) + " Y= " + getYPosition(evt);

}
</script></head>
<body onclick="handleClickedEvent()"></body>

You can also use window.event.x, window.event.y but this method is more stable and reliable for getting positions.

[ Instead of using the alert message, you can update the

divElement.style.left ,  divElement.style.top

based on the x and y positions. Make sure the div's position(in style) is set to absolute. ]

Answer 3

Answer №2

Utilizing the prototype is quite straightforward:

document.observe('click', function(e) {
    $('YourDivId').setStyle({
        'left': e.clientX, 
        'top': e.clientY
    }).show();
});

To implement this functionality, simply create an HTML DIV within your body with the CSS properties "display: none" and "position: absolute;", along with the desired content.

Answer 4

Utilizing the prototype is quite straightforward:

document.observe('click', function(e) {
    $('YourDivId').setStyle({
        'left': e.clientX, 
        'top': e.clientY
    }).show();
});

To implement this functionality, simply create an HTML DIV within your body with the CSS properties "display: none" and "position: absolute;", along with the desired content.

Locate the exact cursor position upon user click and showcase a div at the same spot

Answer №1

Answer №2

Similar questions

Python and Javascript clashing with one another

How to Avoid Duplicating Documents in MongoDB?

Initiating and handling a POST request

Struggling with jQuery UI Draggable 1.10.3 bug in Firefox: Cursor center not detected when scrolling window

Inoperable await statement within a while loop

The error "Unable to create an instance of mssql.Schema" indicates that the

Having difficulty retrieving the initial selection value

Is it true that Redux Saga's select function returns mutable state?

Steps for integrating a valid SSL certificate into a Reactjs application

Utilize datetime values in chartjs ajax for data visualization

Learn how to dynamically enable or disable the add and remove buttons in the PrimeNG PickList using Angular 2

Animate hovering over a specific element within a group of similar elements using jQuery

Implementing a scrolling text feature in React

When attempting to update a task with the Microsoft Graph API, the server returned a 400 error code

Is MongoDB caching its collection in memory?

When items are removed client-side, the Listbox becomes null

What is the best way to create a full bleed background image that adjusts to different screen resolutions using CSS and JavaScript?

Progress of file uploads on the client side using Vue JS

Generating exportable dynamic code in Javascript

Enable the click functionality for a disabled MI TextField