Why is pageX and pageY relative to wrapper, not document?

Question

Ok, so I want to have the the div '.prodimg' follow the mouse pos. And this works, except it's being positioned relative to the left pos of #wrapper that is a parent div of '.details' and '.prodimg'. Why is this happening? Any suggestions to fix it or alternative methods of tracking the mouse?

'.prodimg' top position was relative to the #wrapper top, then I changed it to padding-top and .prodimg was corrected. This has something to do with my problem, but I cant find a similar solution for the left position. Ideally I wouldn't have to change the wrapper to get pageX and pageY to relate to the full window.

I've tried with with the '#wrapper' position:relative and nothing changed. '.details' MUST be relative so that it can float inline. I have the jquery entered beneath my wrapper. Ive tried using 'document' in place of 'window'. Not sure if any of this has to do with it... Please help! I've lost almost 3 hours on this problem :/

here is my fiddle: http://jsfiddle.net/vg2zL/

$(document).ready(function() {
var mouseX;
var mouseY;
$(window).mousemove( function(e) {
 mouseX = e.pageX; 
 mouseY = e.pageY;
});  
$(".details").hover(
  function () {
$(this).children(".prodimg").css("visibility","visible");
$(window).bind('mousemove', function(e){
    $(".details").children(".prodimg").css({'top':mouseY,'left':mouseX});
});
 },
  function () {
    $(".prodimg").css("visibility","hidden");

   });
});

and heres my styles

#wrapper {
 width: 700px;
 padding-top: 130px;
 position: absolute;
 left:50%;
 margin-left: -351px;
 font-size: 30px;
 font-family: 'cmu_serifroman';
}

.details {
 text-align:center;
 width:200px;
 display:inline-block;
 line-height:40px;
 margin-right:50px;
 cursor:pointer;
}

.prodimg {
 visibility:hidden;
 position:absolute;
 z-index:-1;
}

score 3 · Accepted Answer · edited Aug 22 '17 at 17:38

The top and left properties of an absolutely positioned element is relative to the element's first non statically positioned ancestor, therefore (from the code on your webpage) .prodimg will be placed relative to #wrapper

You can use a fixed position element and client co-ordinates( i.e. clientX, clientY) instead

http://jsfiddle.net/vg2zL/1/

$(document).ready(function() {
var mouseX;
var mouseY;
$(document).mousemove( function(e) {
 mouseX = e.clientX; 
 mouseY = e.clientY;
});  
$(".details").hover(
  function () {
$(this).children(".prodimg").css("visibility","visible");
$(document).bind('mousemove', function(e){
    $(".details").children(".prodimg").css({'top':mouseY,'left':mouseX});
});
 },
  function () {
    $(".prodimg").css("visibility","hidden");

   });
});

#wrapper {
 width: 280px;
 padding-top: 130px;
 position: absolute;
 left:50%;
 margin-left: -141px;
 font-size: 10px;
 font-family: 'cmu_serifroman';
}

.details {
 text-align:center;
 width:60px;
 display:inline-block;
 margin-right:20px;
 cursor:pointer;
}

.prodimg {
 visibility:hidden;
 position:fixed;
 z-index:-1;
 background-color:blue;
 width:50px;
 height:50px;
    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div class="details">
      <a>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text  </a>
  <div class="prodimg"></div>
  </div>
  <div class="details">
      <a>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </a>
  <div class="prodimg"></div>
  </div>
      <div class="details">
      <a>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text  </a>
  <div class="prodimg"></div>
  </div>
</div>

score 0 · Answer 2 · edited May 23 '17 at 12:17

0

Have you looked into how offset works with jQuery? You can find more information here: http://api.jquery.com/offset/. This may help solve your problem. Is it possible to put the relevant into a jsFiddle to make it easier to help you?

jquery has some good documentation on how mouse position works: http://docs.jquery.com/Tutorials:Mouse_Position

I just found a good explanation in a similar question on here: jQuery get mouse position within an element. Hopefully that helps answer your question.

edited May 23 '17 at 12:17

Community

1
1

answered Aug 16 '12 at 02:15

ObstacleCoder

160
2
8

I made a JSFiddle, maybe you could take a look at it? http://jsfiddle.net/vg2zL/ – Michael Ray-Von Aug 16 '12 at 02:28
I have created a JSFiddle here http://jsfiddle.net/693FF/ that binds the event to the .details class and uses the offset of the parent element to determine the position. It ends up with the same results as Musa has shown below however it's just a different approach to the solution. – ObstacleCoder Aug 16 '12 at 02:37
Thanks for your help! Musa found a solution – Michael Ray-Von Aug 16 '12 at 02:38
No problem, it seems a much simpler solution than mine. – ObstacleCoder Aug 16 '12 at 02:39

Why is pageX and pageY relative to wrapper, not document?

2 Answers2

Linked