Question

I have a Java server page which should execute showPeopleDetails function, when a user hovers over the a-tag. showPeopleDetails is a Javascript function in a separate js file, which is imported by the framework. showPeopleDetails should display a balloon popup over the a-tag. Somehow the function is only executed for the first a-tag but not for the others! This is the HTML snippet:

| <a href="javascript:void(0);" class="PeopleLink LinkColorBlackDark" onmouseover=    "showPeopleDetails('<%=userUnique %>', event.clientX, event.clientY)" onmouseout="hidePeopleDetailsTimed()"></a>

This is my Javascript showPeopleDetails function:

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

There is nothing wrong with the showPeopleDetails function I have tested it and it is working on other parts of the website. But when I add event.clientX and event.clientY the popup is only displayed once. I only have to develop for Internet Explorer 8 so browser compatibility is not an issue.
Help is much appreciated!

Answer 1

Instead of passing event.clientX and event.clientY in the function call try this

<a href="javascript:void(0);" class="PeopleLink LinkColorBlackDark" onmouseover=    "showPeopleDetails('<%=userUnique %>', event)" onmouseout="hidePeopleDetailsTimed()"></a>

function showPeopleDetailsNow(UserId, event){
  event = event || window.event;
  var x = event.clientX, y = event.clientY;

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