CODEWITHSUNDEEP
javascript
BigDave
BigDave

Reputation: 13

Using mouse/cursor coordinates to position popup

I'm using this code to show a popup, for a mini-profile in phpBB, triggered by a mouseover event

<style type="text/css">
.popUpProfile
{
position: absolute;
z-index: 3;
         left: 100px;
        top: 200px;
font-size: 14px;
background-color: #DCEBFE;
margin: 0 10px;
padding: 5px;
width: 450px;
border: solid 2px red;
border-radius: 8px;
resize:both;
overflow:auto;
 
visibility: hidden;
}
</style>

I'm looking to use the mouse coordinates to display the popup with the top at the same level as the hovered text, ie the mouse y position, and the left of it around 200px to the right. Using this code, which I have just found

<script type="text/javascript">
window.onload = init;
function init() {
	if (window.Event) {
	document.captureEvents(Event.MOUSEMOVE);
	}
	document.onmousemove = getCursorXY;
}

function getCursorXY(e) {
	document.getElementById('cursorX').value = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
	document.getElementById('cursorY').value = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
}
</script>

I've now got x and y variables, called cursorX and cursorY, but struggling to get these into the first code, and thus pass the coordinates to the popup. I've tried

left: cursorX + "px"

which looks like it should work from instances shown on this site, but it doesn't!

Can anyone advise on how to pass the variables, and also if the code used to obtain them is as efficient as it could be?

Any help would be appreciated (and apologies if this is old ground, but I have searched to no avail!)

Cheers!

Upvotes: 1

Views: 4268

Answers (1)

chRyNaN
chRyNaN

Reputation: 3692

The following code captures mouse coordinates and places your element at that position (Code taken from this Stack Overflow answer.

document.onmousemove = handleMouseMove;
function handleMouseMove(event) {
    var dot, eventDoc, doc, body, pageX, pageY;

    event = event || window.event; // IE-ism

    // If pageX/Y aren't available and clientX/Y are,
    // calculate pageX/Y - logic taken from jQuery.
    // (This is to support old IE)
    if (event.pageX == null && event.clientX != null) {
        eventDoc = (event.target && event.target.ownerDocument) || document;
        doc = eventDoc.documentElement;
        body = eventDoc.body;

        event.pageX = event.clientX +
          (doc && doc.scrollLeft || body && body.scrollLeft || 0) -
          (doc && doc.clientLeft || body && body.clientLeft || 0);
        event.pageY = event.clientY +
          (doc && doc.scrollTop  || body && body.scrollTop  || 0) -
          (doc && doc.clientTop  || body && body.clientTop  || 0 );
    }

    // Use event.pageX / event.pageY here
    //now you must set your elements left and top values dynamically using JavScript
    //This assumes one element with that class name so it takes the first element 
    //returned by getElementsByClassName()
    var myElem = document.getElementsByClassName("popUpProfile")[0];

    myElem.style.left = event.pageX + "px";
    myElem.style.top = event.pageY + "px";
}

Upvotes: 1

Related Questions