By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
464,571 Members | 952 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 464,571 IT Pros & Developers. It's quick & easy.

Getting mouse coordinates for FF

P: 5
Hello,
I am new to leaning Java, and I have a problem, I have created a script that will pull up a little article when the mouse goes over a link (to sort of preview it). My problem is it works fine in IE but not in FF. Can anyone please help.

*/
//Function to show and hide div

var IE = document.all?true:false;

if (!IE) document.captureEvents(Event.MOUSEMOVE)

//document.onmousemove = getMouseXY;

var tempX = 0;
var tempY = 0;
function getMouseXY(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.documentElement.scrollLeft;
tempY = event.clientY + document.documentElement.scrollTop;
}
else { // grab the x-y pos.s if browser is NS
tempX = e.pageX;
tempY = e.pageY;
}
if (tempX < 0){tempX = 0;}
if (tempY < 0){tempY = 0;}

return true;
}
function funcshowdiv(divname, moveYN)
{
getMouseXY();

tempX = tempX - 10;
tempY = tempY - 10;
if(document.layers)
{ // browser="NN4";
document.layers[divname].display= '';
if (moveYN)
{
document.layers[divname].top = tempX + 'px';
document.layers[divname].left = tempY + 'px';
}
}
if(document.all){ // browser="IE";
//alert('here');
var obj;
obj = eval('document.all.' + divname)
obj.style.display= '';
if (moveYN)
{
obj.style.top = tempY + 'px';
obj.style.left = tempX + 'px';
}
}
if(!document.all && document.getElementById){ // browser="NN6+ or IE5+ if you're willing to dump the !document.all stuff";
document.getElementById(divname).style.display= '';
}
}
function funchidediv(divname, moveYN)
{
if(document.layers)
{ // browser="NN4";
document.layers[divname].display= 'none';
}
if(document.all){ // browser="IE";
var obj;
obj = eval('document.all.' + divname)
obj.style.display= 'none';

}
if(!document.all && document.getElementById){ // browser="NN6+ or IE5+ if you're willing to dump the !document.all stuff";
document.getElementById(divname).style.display= 'none';
}

}

// -->
Feb 6 '07 #1
Share this Question
Share on Google+
8 Replies

Ganon11
Expert 2.5K+
P: 3,652
Is this Java or Javascript? They are two different things.

Also, please enclose your code with the [ CODE ] [/ CODE ] tags (without spaces).
Feb 6 '07 #2

P: 5
I'm sorry this is java script
Expand|Select|Wrap|Line Numbers
  1. */
  2. //Function to show and hide div
  3.  
  4. var IE = document.all?true:false;
  5.  
  6. if (!IE) document.captureEvents(Event.MOUSEMOVE)
  7.  
  8. //document.onmousemove = getMouseXY;
  9.  
  10. var tempX = 0;
  11. var tempY = 0;
  12. function getMouseXY(e) {
  13. if (IE) { // grab the x-y pos.s if browser is IE
  14. tempX = event.clientX + document.documentElement.scrollLeft;
  15. tempY = event.clientY + document.documentElement.scrollTop;
  16. }
  17. else { // grab the x-y pos.s if browser is NS
  18. tempX = e.pageX;
  19. tempY = e.pageY;
  20. if (tempX < 0){tempX = 0;}
  21. if (tempY < 0){tempY = 0;} 
  22.  
  23. return true;
  24. }
  25. function funcshowdiv(divname, moveYN)
  26. getMouseXY();
  27.  
  28. tempX = tempX - 10;
  29. tempY = tempY - 10;
  30. if(document.layers)
  31. { // browser="NN4"; 
  32. document.layers[divname].display= ''; 
  33. if (moveYN)
  34. {
  35. document.layers[divname].top = tempX + 'px';
  36. document.layers[divname].left = tempY + 'px';
  37. }
  38. if(document.all){ // browser="IE"; 
  39. //alert('here');
  40. var obj;
  41. obj = eval('document.all.' + divname)
  42. obj.style.display= ''; 
  43. if (moveYN)
  44. {
  45. obj.style.top = tempY + 'px';
  46. obj.style.left = tempX + 'px';
  47. }
  48. if(!document.all && document.getElementById){ // browser="NN6+ or IE5+ if you're willing to dump the !document.all stuff"; 
  49. document.getElementById(divname).style.display= ''; 
  50. }
  51. function funchidediv(divname, moveYN)
  52. {
  53. if(document.layers)
  54. { // browser="NN4"; 
  55. document.layers[divname].display= 'none'; 
  56. if(document.all){ // browser="IE"; 
  57. var obj;
  58. obj = eval('document.all.' + divname)
  59. obj.style.display= 'none'; 
  60.  
  61. if(!document.all && document.getElementById){ // browser="NN6+ or IE5+ if you're willing to dump the !document.all stuff"; 
  62. document.getElementById(divname).style.display= 'none'; 
  63.  
  64. }
  65.  
  66. // -->
  67.  
Feb 6 '07 #3

10K+
P: 13,262
I'm sorry this is java script
Expand|Select|Wrap|Line Numbers
  1. */
  2. //Function to show and hide div
  3.  
  4. var IE = document.all?true:false;
  5.  
  6. if (!IE) document.captureEvents(Event.MOUSEMOVE)
  7.  
  8. //document.onmousemove = getMouseXY;
  9.  
  10. var tempX = 0;
  11. var tempY = 0;
  12. function getMouseXY(e) {
  13. if (IE) { // grab the x-y pos.s if browser is IE
  14. tempX = event.clientX + document.documentElement.scrollLeft;
  15. tempY = event.clientY + document.documentElement.scrollTop;
  16. }
  17. else { // grab the x-y pos.s if browser is NS
  18. tempX = e.pageX;
  19. tempY = e.pageY;
  20. if (tempX < 0){tempX = 0;}
  21. if (tempY < 0){tempY = 0;} 
  22.  
  23. return true;
  24. }
  25. function funcshowdiv(divname, moveYN)
  26. getMouseXY();
  27.  
  28. tempX = tempX - 10;
  29. tempY = tempY - 10;
  30. if(document.layers)
  31. { // browser="NN4"; 
  32. document.layers[divname].display= ''; 
  33. if (moveYN)
  34. {
  35. document.layers[divname].top = tempX + 'px';
  36. document.layers[divname].left = tempY + 'px';
  37. }
  38. if(document.all){ // browser="IE"; 
  39. //alert('here');
  40. var obj;
  41. obj = eval('document.all.' + divname)
  42. obj.style.display= ''; 
  43. if (moveYN)
  44. {
  45. obj.style.top = tempY + 'px';
  46. obj.style.left = tempX + 'px';
  47. }
  48. if(!document.all && document.getElementById){ // browser="NN6+ or IE5+ if you're willing to dump the !document.all stuff"; 
  49. document.getElementById(divname).style.display= ''; 
  50. }
  51. function funchidediv(divname, moveYN)
  52. {
  53. if(document.layers)
  54. { // browser="NN4"; 
  55. document.layers[divname].display= 'none'; 
  56. if(document.all){ // browser="IE"; 
  57. var obj;
  58. obj = eval('document.all.' + divname)
  59. obj.style.display= 'none'; 
  60.  
  61. if(!document.all && document.getElementById){ // browser="NN6+ or IE5+ if you're willing to dump the !document.all stuff"; 
  62. document.getElementById(divname).style.display= 'none'; 
  63.  
  64. }
  65.  
  66. // -->
  67.  
In which case we'll move this to the Javascript forum.
Feb 6 '07 #4

Atli
Expert 5K+
P: 5,058
This will get the mouse cords and the window size.
I've tested it in IE, Firefox, Opera

I use it with the mousemove event

Expand|Select|Wrap|Line Numbers
  1. function on_mousemove(e)
  2. {
  3.     if (navigator.userAgent.indexOf("MSIE") != -1) {
  4.         // Internet Explorer (Also works for Opera)
  5.         MouseX = window.event.x+document.body.scrollLeft;
  6.         MouseY = window.event.y+document.body.scrollTop;
  7.         Width = document.body.clientWidth+document.body.scrollLeft;
  8.         Height = document.body.clientHeight+document.body.scrollTop;
  9.  
  10.     } else {
  11.         // Netscape, (Firefox, Opera, ...)
  12.         MouseX = e.pageX;
  13.         MouseY = e.pageY;
  14.         Width = window.innerWidth+window.pageXOffset;
  15.         Height = window.innerHeight+window.pageYOffset;
  16.     }
  17. }
Feb 6 '07 #5

acoder
Expert Mod 15k+
P: 16,027
This will get the mouse cords and the window size.
I've tested it in IE, Firefox, Opera

I use it with the mousemove event

Expand|Select|Wrap|Line Numbers
  1. function on_mousemove(e)
  2. {
  3.     if (navigator.userAgent.indexOf("MSIE") != -1) {
  4.         // Internet Explorer (Also works for Opera)
  5.         MouseX = window.event.x+document.body.scrollLeft;
  6.         MouseY = window.event.y+document.body.scrollTop;
  7.         Width = document.body.clientWidth+document.body.scrollLeft;
  8.         Height = document.body.clientHeight+document.body.scrollTop;
  9.  
  10.     } else {
  11.         // Netscape, (Firefox, Opera, ...)
  12.         MouseX = e.pageX;
  13.         MouseY = e.pageY;
  14.         Width = window.innerWidth+window.pageXOffset;
  15.         Height = window.innerHeight+window.pageYOffset;
  16.     }
  17. }
Instead of browser sniffing, just check for support of the object, e.g.
Expand|Select|Wrap|Line Numbers
  1. if (window.event) {
Feb 6 '07 #6

acoder
Expert Mod 15k+
P: 16,027
I'm sorry this is java script
Expand|Select|Wrap|Line Numbers
  1. */
  2. //Function to show and hide div
  3.  
  4. var IE = document.all?true:false;
  5.  
  6. if (!IE) document.captureEvents(Event.MOUSEMOVE)
  7.  
  8. //document.onmousemove = getMouseXY;
  9.  
  10. var tempX = 0;
  11. var tempY = 0;
  12. function getMouseXY(e) {
  13. if (IE) { // grab the x-y pos.s if browser is IE
  14. tempX = event.clientX + document.documentElement.scrollLeft;
  15. tempY = event.clientY + document.documentElement.scrollTop;
  16. }
  17. else { // grab the x-y pos.s if browser is NS
  18. tempX = e.pageX;
  19. tempY = e.pageY;
  20. if (tempX < 0){tempX = 0;}
  21. if (tempY < 0){tempY = 0;} 
  22.  
  23. return true;
  24. }
  25. function funcshowdiv(divname, moveYN)
  26. getMouseXY();
  27.  
  28. tempX = tempX - 10;
  29. tempY = tempY - 10;
  30. if(document.layers)
  31. { // browser="NN4"; 
  32. document.layers[divname].display= ''; 
  33. if (moveYN)
  34. {
  35. document.layers[divname].top = tempX + 'px';
  36. document.layers[divname].left = tempY + 'px';
  37. }
  38. if(document.all){ // browser="IE"; 
  39. //alert('here');
  40. var obj;
  41. obj = eval('document.all.' + divname)
  42. obj.style.display= ''; 
  43. if (moveYN)
  44. {
  45. obj.style.top = tempY + 'px';
  46. obj.style.left = tempX + 'px';
  47. }
  48. if(!document.all && document.getElementById){ // browser="NN6+ or IE5+ if you're willing to dump the !document.all stuff"; 
  49. document.getElementById(divname).style.display= ''; 
  50. }
  51. function funchidediv(divname, moveYN)
  52. {
  53. if(document.layers)
  54. { // browser="NN4"; 
  55. document.layers[divname].display= 'none'; 
  56. if(document.all){ // browser="IE"; 
  57. var obj;
  58. obj = eval('document.all.' + divname)
  59. obj.style.display= 'none'; 
  60.  
  61. if(!document.all && document.getElementById){ // browser="NN6+ or IE5+ if you're willing to dump the !document.all stuff"; 
  62. document.getElementById(divname).style.display= 'none'; 
  63.  
  64. }
  65.  
  66. // -->
  67.  
This is very old code. document.all is IE-specific (Opera supports it too), and layers were in buggy Netscape 4. This kind of code used to be used during the mid-1990s. The standard is to use document.getElementById. It will make your code a lot less too. Use the code provided by Atli for your getMouseXY function.
Feb 6 '07 #7

P: 5
Thank you for your help. I think it is now reading the coordinates fine, but my preview boxes still wont pop up, am I using my displaying of my document correctly.?
Expand|Select|Wrap|Line Numbers
  1. function funcshowdiv(divname, moveYN)
  2. {    
  3.    getMouseXY();
  4.  
  5. tempX = tempX - 10;
  6. tempY = tempY - 10;
  7.     if(document.layers)
  8.     { // browser="NN4"; 
  9.     document.layers[divname].display= ''; 
  10.     if (moveYN)
  11.     {
  12.     document.layers[divname].top = tempX + 'px';
  13.     document.layers[divname].left = tempY + 'px';
  14.     }
  15.     } 
  16.     if(document.all){ // browser="IE"; 
  17.     //alert('here');
  18.     var obj;
  19.     obj = eval('document.all.' + divname)
  20.     obj.style.display= ''; 
  21.     if (moveYN)
  22.     {
  23.     obj.style.top = tempY + 'px';
  24.     obj.style.left = tempX + 'px';
  25.     }
  26.     } 
  27.     if(!document.all && document.getElementById){ // browser="NN6+ or IE5+ if you're willing to dump the !document.all stuff"; 
  28.     document.getElementById(divname).style.display= ''; 
  29.     }   
  30. }
  31. function funchidediv(divname, moveYN)
  32. {
  33.     if(document.layers)
  34.     { // browser="NN4"; 
  35.     document.layers[divname].display= 'none'; 
  36.     } 
  37.     if(document.all){ // browser="IE"; 
  38.     var obj;
  39.     obj = eval('document.all.' + divname)
  40.     obj.style.display= 'none'; 
  41.  
  42.     } 
  43.     if(!document.all && document.getElementById){ // browser="NN6+ or IE5+ if you're willing to dump the !document.all stuff"; 
  44.     document.getElementById(divname).style.display= 'none'; 
  45.     }   
  46.  
  47. }
  48.  
  49.  
Feb 6 '07 #8

Atli
Expert 5K+
P: 5,058
Could it be that you don't move the div in the case?

Expand|Select|Wrap|Line Numbers
  1. if(!document.all && document.getElementById){ // browser="NN6+ or IE5+ if you're willing to dump the !document.all stuff"; 
  2.     document.getElementById(divname).style.display= ''; 
  3. }   
Feb 7 '07 #9

Post your reply

Sign in to post your reply or Sign up for a free account.