CODEWITHSUNDEEP
javascriptjquery
Burt
Burt

Reputation: 7758

Mouse coordinates not working correctly,

On the following page I have a popup that is supposed to show beside the image, depending on the window size the pop-up displays further/closer to the mouse. I don't understand what is wrong with the code, that makes the pop-up not display in the same proximity to the mouse?

http://www.hughgrice.com/test/

jQuery(document).mousemove(function (e) {

    mouseX = e.pageX;
    mouseY = e.pageY;

    follow();
});

function follow(){
    d = document.getElementById("thumbTT"); 
    if(openToolTip){
        d.style.display = "block";
        d.style.left = mouseX+5 + "px";
        d.style.top = mouseY-100 + "px";
    }else{
        d.style.display = "none";
    }
}

http://www.hughgrice.com/test/

Upvotes: 1

Views: 98

Answers (2)

user160820
user160820

Reputation: 15210

As your wrapper DIV is relative positioned that's why it is not positioned correctly. Either you have to remove the position:relative from your wrapper div or you have to write your mousemove function like

jQuery(document).mousemove(function (e) {
    var offset = jQuery(this).css('offset');

            mouseX = offset.left;
            mouseY = offset.top;
            follow();
         });

maybe you have to adjust your code

Upvotes: 1

Šime Vidas
Šime Vidas

Reputation: 185933

This should work:

var $elem = $( '#thumbTT' ); 

$( document ).on( 'mousemove', function ( e ) {
    follow( e.pageX, e.pageY );
});

function follow ( x, y ) {        
    if( openToolTip ) {
        $elem.css({ left: x + 5, top: y - 100 }).show();
    } else {
        $elem.hide();
    }
}

I'm assuming that the #thumbTT element is static, so I'm caching the reference to it beforehand.

Upvotes: 1

Related Questions