Determine current mouse position in IFRAME?

Question

I have an IFRAME inside an IFRAME and my getMousePosition method is not able to retrieve the current mouse position inside the iframe. It works in the first Iframe, but when I call the getMousePosition from a function in the parent document it returns fallback values 600 & 350. FYI: I am not able to control the content of the IFrame as it is generated, but it is not an cross domain access. Both IFRAMES and the parent document are hosted on the same server. I am only programming for Internet Explorer 8. So browser compatibility is not an issue.

  function getMousePosition(){
  if(!inframe)
      $(document).mousemove(function(e){
           mouseX = e.pageX 
           mouseY = e.pageY 
      });
  else
  {
    mouseX = 600;
    mouseY = 350;
  }

  //This is where I get the Iframe Document (I then parse through the document, picking up the specific links and storing them in the array verifiedlinks)
  var src = window.frames[iframeindex].document.getElementsByTagName("a");
  // This is where I call my function which uses the values returned by getMousePosition (verifiedlinks is an array of links inside the iframe):

    verifiedlinks[i].onmouseover = function() 
    {
        showPeopleDetails(this.getAttribute('username'));
    }
  // This should display User Details at the current Mousecoordinates
function showPeopleDetails(UserId){
var vpd = document.getElementById("PeopleDetails");
    if ( vpd != null ) {
        getMousePosition();
        vpd.style.left=mouseX+10; //mouseX and mouseY are defined globally
        vpd.style.top=mouseY+10;
        vpd.style.display="block";
    }
}

I have read this question: SOLVED QUESTION but the answer didn't solve my problem. I found this question but none of the answers seem to be working for me. My new edited code:

function showPeopleDetails(UserId, x, y){
var vpd = document.getElementById("PeopleDetails");
try
{
    if ( vpd != null ) {
        //getMousePosition();
        //alert("MouseX: " +mouseX+" MouseY: "+mouseY);
        //vpd.style.left=mouseX+10;
        //vpd.style.top=mouseY+10;
        vpd.style.left = x +10 - window.frames[2].document.body.scrollLeft;
        vpd.style.top = y +10 - window.frames[2].document.body.scrollTop;
     }
}

ShankarSangoli · Accepted Answer · 2011-08-01T14:48:20.197

1

If you call getMousePosition from a parent window then document will point to the parent window document. You should call this method in the context of iframe. Also where is inframe defined and do you update its value on any event?

You can use jquery to attach the mouseover events to link. Using this you will get event object which provides the mouse x/y coordinates of the link relative to the document. I hope it will help you.

$(verifiedlinks[i]).mouseover(function(e){
        showPeopleDetails($(this).attr('username'), e.pageX, e.pageY);
}

function showPeopleDetailsNow(UserId, x, y){
var vpd = document.getElementById("PeopleDetails");
    if ( vpd != null ) {
        getMousePosition();
        //vpd.style.left=mouseX+10; //mouseX and mouseY are defined globally
        //vpd.style.top=mouseY+10;
        vpd.style.left= x +10 + $(document).scrollTop(); //mouseX and mouseY are defined globally
        vpd.style.top= y +10;
        vpd.style.display="block";
    }
}

edited Aug 01 '11 at 14:48

answered Aug 01 '11 at 14:13

ShankarSangoli

69,612
13
93
124

Yes I update INFRAME to true everytime I parse through the iframe. I want to popup a balloontooltip when the user hovers over a specific link. – Abhischek Aug 01 '11 at 14:15
You should directly attach the mouseover events to link inside the iframe instead of doing it through parent window. The way you are trying to do is not going to work. – ShankarSangoli Aug 01 '11 at 14:24
Sorry I should have clarified: I am changing the links in the IFrame and the links are working, just the balloontooltip is displayed at the wrong coordinates: When I hover over a link inside the iframe the balloon is always displayed at 600px, 350px. So I assumed that my getMousePosition is not updating the values inside the IFRAME. – Abhischek Aug 01 '11 at 14:30
Thanks, your solution is working partially for me. For the First 6 Links the balloon is displayed correctly. But as soon I scroll to the next link the balloon is displayed way down. I only see the scrollbar expanding very much and when i scroll down to the end of the page the balloon is displayed there.. – Abhischek Aug 01 '11 at 14:46
You need to add the scroll top also, check my edited answer. It should work now for all the links – ShankarSangoli Aug 01 '11 at 14:48
Nope sry $(document).scrollTop(); didn't work, and I also tried: vpd.style.top= y + 10+ document.body.scrollTop; I should also mention that I just need it to work for Internet explorer, so browser compatibility is not an issue here. – Abhischek Aug 01 '11 at 15:01
Can you alert and see $(document).scrollTop()? You dont have to worry about browser compatibility jquery will take care of it. – ShankarSangoli Aug 01 '11 at 15:02
alert($(window).scrollTop()); always shows 0 not matter if I alert document, windows, "html" or "body". Any ideas why? EDIT: The user scrolls the Iframe window not my balloontooltip. So I need to retrieve the IFRAME's scrolltop() value to be able to display the balloon at the correct position in the iframe. – Abhischek Aug 02 '11 at 07:12
I found out that if I do this in the browser address bar: javascript:alert(window.frames[1].document.body.scrollTop); I always get 0, but javascript:alert(window.frames[1].name); returns a value! Any idea why I don't have access to the iframe scrollTop? – Abhischek Aug 02 '11 at 09:21
THANKS! After some tweaking scrolling is working now. Hopefully I will be able to include the offset of the parent Iframe because links at the borders of the page are displayed waay outside. But thanks anyway :) – Abhischek Aug 02 '11 at 09:41

Determine current mouse position in IFRAME?

1 Answers1