CODEWITHSUNDEEP
jquery
user1718607
user1718607

Reputation: 191

How to know margin-left auto pixels from the left side?

I am using jQuery mousemove to follow cursor by image (I am doing this for only one div). I have centered whole page (margin-left: auto ; margin-right: auto;). But here comes problem:

$('.friendSelection').mousemove(function(e){
                $('.follow').show();
                $(".follow").css({left:e.pageX-690, top:e.pageY-30});});

that e.pageX is giving not main div's x axis, but whole page x axis(and image is really far away from cursor). And now if user has bigger screen, then I have to know how much pixels, margin-left auto had moved whole page, to change cursor position ( $(".follow").css({left:e.pageX-690, top:e.pageY-30}) ). Any Ideas?

P.S. my html code:

<html>
<body>
<div class="mainBody">
<div class="friendSelection">
<div class="friend" id="1"></div>
<div class="friend" id="2"></div>
<div class="friend" id="3"></div>
</div>
<div class="follow"></div>
</div>
</body>
</html>

Those friend classes are always falling from top to bottom, this is problem that my follow image is 115x185px and when mouse move, image follows it, but if mouse is moving in whole image then image don't follow cursor

Upvotes: 0

Views: 405

Answers (1)

VIDesignz
VIDesignz

Reputation: 4783

Try this instead...

Here is a working FIDDLE 

$("body").on({

    mousemove: function(e){
         $('.follow').fadeIn(500).css({'left' : e.pageX, 'top' : e.pageY});
     },

    mouseout: function(e){
         $('.follow').fadeOut(500);
     }

}, ".friendSelection" );

You can also place the '.follow' element centered on the cursor, and use this function for multiple '.friendSelection' elements.

FIDDLE

Upvotes: 1

Related Questions