ansaurus

Question

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

Answer 1

A:

<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. ]

echo 2010-03-30 10:19:05

i have tried it but its displaying below error: evt is undefined

Avinash 2010-03-30 10:42:26

i've edited the code.. guess this will work.. try it.

echo 2010-03-30 12:16:54

Answer 2

A:

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.

Rui Carneiro 2010-03-30 11:06:01

ansaurus

tags:

views:

answers:

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

related questions