Capturing cursor position in javascript inline with element

Question

I am trying to make a div popup next to the mouse when a table cell is hovered over.

<td onmouseover="bubblePopup("param1","param2");">This is the cell</td>

Is it possible to get the cursor position with my bubblePopup function.

function bubblePopup(param1, param2){
    var newdiv = document.createElement('div');
    newdiv.setAttribute('id', param1);

    newdiv.style.width = "200px";
    newdiv.style.height = "80px";

    newdiv.style.position = "absolute";
    newdiv.style.left = cursorX + "px";
    newdiv.style.top = cursorY + "px";

    newdiv.innerHTML = "content";
    document.body.appendChild(newdiv);
}

I would prefer native javascript(but will consider jquery options too). It only needs to work in Firefox 3.5 and up.

Dai · Accepted Answer · 2011-02-11 15:51:07Z

4

I slapped together a fiddle that might get you on the right track.

http://www.jsfiddle.net/dduncan/WccJw/2/

(Edited to pretty it up slightly)

edited Feb 11, 2011 at 15:51

answered Feb 11, 2011 at 15:44

Dai

1,5101 gold badge11 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mike Over a year ago

Any suggestions on how I could make the destroy event only happen when the cursor isn't over the table cell or the newly created div so that I could click links in the div?

Loktar · Accepted Answer · 2011-02-11 15:40:45Z

3

http://jsfiddle.net/CtCXE/

var td = document.getElementById("thetd");

td.onmouseover = function(e){bubblePopup(e, 'param1','param2')};

function bubblePopup(e, param1, param2){
    var newdiv = document.createElement('div');
    newdiv.setAttribute('id', param1);

    newdiv.style.width = 200;
    newdiv.style.height = 80;

    var cursorX = e.pageX,
        cursorY = e.pageY;

    newdiv.style.position = "absolute";
    newdiv.style.left = cursorX + 'px';
    newdiv.style.top = cursorY + 'px';

    newdiv.innerHTML = "content";
    document.body.appendChild(newdiv);
}

answered Feb 11, 2011 at 15:40

Loktar

35.3k7 gold badges96 silver badges106 bronze badges

Collectives™ on Stack Overflow

Capturing cursor position in javascript inline with element

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related