find the position of the cursor where user have clicked and display one div where user have clicked

Question

find the position of the cursor where user have clicked and display one div where user have clicked

778 Views Asked by Avinash At 05 April 2025 at 19:07

I want to determine the position of the cursor where user have clicked.

And display one div at bottom side of the page where user have clicked.

For example on stack over flow home page if some one click on the logo.

Then the div should be displayed at the bottom position of the logo.

Same way if i click on the bottom link then that div should be displayed at the bottom portion of the page.

I am using mootools as my JS framework. But any JavaScript code will be helpful for me.

Hope this is clear to all.

Thanks in advance
Avinash

Original Q&A

There are 2 best solutions below

**raj** · Answer 1

<head>
</script>        
function mouseX(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 mouseY(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 clicked(evt)
{
    if(typeof evt == 'undefined')
    evt = window.event;
    alert("X = "+ mouseX(evt) + " Y= " + mouseY(evt);

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

You can use simply the window.event.x, window.event.y but this is a more stable & reliable method of getting positions..

[ instead of alert, u'll be changing the divElement.style.left , divElement.style.top.. make sure the div's position(in style) is absolute. ]

**Rui Carneiro** · Answer 2

With prototype is pretty simple:

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

All you need to do now is create a html DIV on your body with "display: none" and "position: absolute;" and the content you want.

find the position of the cursor where user have clicked and display one div where user have clicked

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in MOOTOOLS1.2

Trending Questions

Popular # Hahtags

Popular Questions