0

Hi
I'm new to Javascript and trying to get a layer div to display next to the mouse cursor. My code works great in IE and Chrome browsers but won't work in Firefox. If I remove the part bewteen the asterisks which gets the cursor position it works fine, but obviously doesn't display the div next to the mouse

Any help is really appreciated
Thanks
Chris
:)

function displayPupCurrDiv(url, target, e) {
  obj1 = document.getElementById(target);
  if (obj1.style.display == "none"){

   // ********************************************

    e = e || window.event;
    var cursor = {x:0, y:0};
    if (e.pageX || e.pageY) {
      cursor.x = e.pageX;
      cursor.y = e.pageY;
    }
    else {
      var de = document.documentElement;
      var b = document.body;
      cursor.x = e.clientX +
           (de.scrollLeft || b.scrollLeft) - (de.clientLeft || 0);
      cursor.y = e.clientY +
           (de.scrollTop || b.scrollTop) - (de.clientTop || 0);
    }

    obj1.style.top = (cursor.y - 100) + 'px';
    obj1.style.left = (cursor.x + 10) + 'px';

    // ********************************************

    obj1.style.display = "";
    obj1.innerHTML = '<br>&nbsp;&nbsp;&nbsp;Fetching data...';

    if (window.XMLHttpRequest) {
      req = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
      req = new ActiveXObject("Microsoft.XMLHTTP");
    }
    if (req != undefined) {
      req.onreadystatechange = function() {finishPupCurrDiv(url, target);};
      req.open("GET", url, true);
      req.send("");
    }
    }
else {
  obj1.style.display = "none";
  }
}

Edited by mike_2000_17: Fixed formatting

3
Contributors
6
Replies
7
Views
7 Years
Discussion Span
Last Post by harvey66
0

Here is code that I'm using for a popup:

var eXY = {x:null,y:null};
if(eventObj.pageX || eventObj.pageY)
{
  eXY.x = eventObj.pageX + xyOff.x;
  eXY.y = eventObj.pageY + xyOff.y;
}else if(eventObj.clientX || eventObj.clientY)
{
  eXY.x = eventObj.clientX + document.body.scrollLeft + document.documentElement.scrollLeft + xyOff.x;
  eXY.y = eventObj.clientY + document.body.scrollTop + document.documentElement.scrollTop + xyOff.y;
}
0

Could you share your onmouse... event(s) with us?

Sorry, here is my onmouse event code

<a href="#" onmouseOver="loadPupCurrDiv('pupCurrency.php?N=19.99&F=GBP&T=USD','pupCurrencyDiv');return false;" onmouseOut="unloadPupCurrDiv('pupCurrencyDiv')">Convert to US Dollars</a>
0

Sorry, here is my onmouse event code

<a href="#" onmouseOver="loadPupCurrDiv('pupCurrency.php?N=19.99&F=GBP&T=USD','pupCurrencyDiv');return false;" onmouseOut="unloadPupCurrDiv('pupCurrencyDiv')">Convert to US Dollars</a>
0

You are asking for help with displayPupCurrDiv(). I suppose I should have been more specific.
Could you share your onmouse... event(s) invoking that?

0

You are asking for help with displayPupCurrDiv(). I suppose I should have been more specific.
Could you share your onmouse... event(s) invoking that?

Sorry,here is the entire code which is an asp file with an onmouseover event which loads data via a php file - Thanks for your help

<%@ Language=VBScript %>
<% Option Explicit %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title></title>
</head>

<script>
function displayPupCurrDiv(url, div, e) {
  obj1 = document.getElementById(div);
  if (obj1.style.display == "none"){

    e = e || window.event;
    var cursor = {x:0, y:0};
    if (e.pageX || e.pageY) {
      cursor.x = e.pageX;
      cursor.y = e.pageY;
    }
    else {
      var de = document.documentElement;
      var b = document.body;
      cursor.x = e.clientX +
           (de.scrollLeft || b.scrollLeft) - (de.clientLeft || 0);
      cursor.y = e.clientY +
           (de.scrollTop || b.scrollTop) - (de.clientTop || 0);
    }
    // USE CURSOR CO-ORDINATES TO MOVE THE DIV AND THEN DISPLAY IT
    obj1.style.top = (cursor.y - 100) + 'px';
    obj1.style.left = (cursor.x + 10) + 'px';
    obj1.style.display = "";
    obj1.innerHTML = '<br>&nbsp;&nbsp;&nbsp;Fetching data...';
    if (window.XMLHttpRequest) {
      req = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
      req = new ActiveXObject("Microsoft.XMLHTTP");
    }
    if (req != undefined) {
      req.onreadystatechange = function() {finishPupCurrDiv(url, div);};
      req.open("GET", url, true);
      req.send("");
    }
    }
else {
  obj1.style.display = "none";
  }
}

function finishPupCurrDiv(url, div) {
  if (req.readyState == 4) { // only if req is "loaded"
    if (req.status == 200) { // only if "OK"
      document.getElementById(div).innerHTML = req.responseText;
    } else {
      document.getElementById(div).innerHTML=" Error:\n"+ req.status + "\n" +req.statusText;
    }
  }
}

function loadPupCurrDiv(url, div) {
	displayPupCurrDiv(url,div);
	return false;
}

function unloadPupCurrDiv(div) {
    obj1 = document.getElementById(div);
    if (obj1.style.display == ""){
    obj1.style.display = "none";
	return false;
    }
}

</script>


<body>

<div id="pupCurrencyDiv" style="display:none;position:absolute;z-index:100;right:25%;top:80px;width:200px;height:100px;background-image:url('images/pupCurrencyBG.png');background-repeat:repeat;">
</div>


<%Dim arrPrice, i%>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>

Price:£19.99&nbsp;<a href="#" onmouseOver="loadPupCurrDiv('pupCurrency.php?N=19.99&F=GBP&T=USD','pupCurrencyDiv');return false;" onmouseOut="unloadPupCurrDiv('pupCurrencyDiv')">$</a>&nbsp;
</table>

</body>
</html>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.