Solved

Find Cursor Position In FireFox

Posted on 2006-06-14
7
799 Views
Last Modified: 2008-01-09
Hi

I am using this code to find the position of the cursor, allowing users to drag windows around the screen.

function dragWindow(){
  x = (window.Event) ? e.pageX : event.clientX;
  y = (window.Event) ? e.pageY : event.clientY;

//DRAG CODE HERE....
  }

It works fine in IE, but if i try it in FireFox i get the error 'e is not defined' on line 444, which is this:
  x = (window.Event) ? e.pageX : event.clientX;

Any help would be greatly appeciated,

Richard
0
Comment
Question by:shaggy_the_sheep
  • 4
  • 3
7 Comments
 
LVL 6

Accepted Solution

by:
pD_EO earned 500 total points
Comment Utility
I usually do it like this...

function dragWindow(evt){
      var evt = (evt)? evt : event;

      if(evt){
            var x = evt.clientX;
            var y = evt.clientY;

            return "X: " + x + " Y: " + y;
      }
}

<div style="border: 1px solid black; height: 40px; width: 40px;" onmousedown="alert(dragWindow(event))"></div>

0
 
LVL 5

Author Comment

by:shaggy_the_sheep
Comment Utility
Hi

It works fine in IE, but it still isnt working in FireFox.

Richard
0
 
LVL 6

Expert Comment

by:pD_EO
Comment Utility
Strange, my code above works fine in IE (6.0) and Firefox (1.5.0.4).

Try this just to check...

<html>
<head>
<title>Mouse Position</title>
<script type="text/JavaScript">
<!--

function dragWindow(evt){
     var evt = (evt)? evt : event;

     if(evt){
          var x = evt.clientX;
          var y = evt.clientY;

          return "X: " + x + " Y: " + y;
     }
}

//-->
</script>
</head>
<body>
<div style="border: 1px solid black; height: 40px; width: 40px;" onmousedown="alert(dragWindow(event))"></div>
</body>
</html>

If that works, then there might be another problem in your code, so maybe posting the resting would be helpful? :)
0
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
LVL 5

Author Comment

by:shaggy_the_sheep
Comment Utility
Yes your script works fine, must be something within my code.

What i am trying to do is allow the user to drag windows around my page. This is the part of the script that controls it:

var allowDrag = false;
function dragEmotion(){

var evt = (evt)? evt : event;

if(evt){
      var x = evt.clientX;
      var y = evt.clientY;
      }

alert('X:' + x + ' Y:' + y);
 
  if(allowDrag==true){
        document.getElementById('choose_emotion').style.top = y - 10;
        document.getElementById('choose_emotion').style.left = x - 10;
        if((x>-44&&x<189)&&(y>450&&y<555)){
              document.convo.colour.style.visibility = 'hidden';
              }
        else{
              document.convo.colour.style.visibility = 'visible';
              }
        if((x>-134&&x<121)&&(y>450&&y<555)){
              document.convo.font.style.visibility = 'hidden';
              }
        else{
              document.convo.font.style.visibility = 'visible';
              }
        if(x>document.body.clientWidth - parseInt(document.getElementById('choose_emotion').style.width) - 7){
              document.getElementById('choose_emotion').style.left = document.body.clientWidth - parseInt(document.getElementById('choose_emotion').style.width) - 10;
              }
        if(y>document.body.clientHeight - parseInt(document.getElementById('choose_emotion').style.height) - 7){
              document.getElementById('choose_emotion').style.top = document.body.clientHeight - parseInt(document.getElementById('choose_emotion').style.height) - 10;
              }  
      }
}

Now i have in the <body> tag onmousemove="dragEmotion(event)" to implement the script when the user moves the cursor.

This is the div that is moveable:

<div id="choose_emotion" style="position: absolute; top: 493px; left: 226px; width: 170px; height: 85px; background-color: #EEF3FA; border: 1px solid #909090; filter: alpha(Opacity=80); visibility: hidden; cursor: pointer;">
      <div style="position: absolute; top: 1px; left: 156px; cursor: pointer" onclick="document.getElementById('choose_emotion').style.visibility = 'hidden';" title="Close this dialog"><img src="http://www.fast-chat.co.uk/images/quit.png"></div>
      <div style="position: absolute; top: 1px; left: 0px; cursor: pointer; width: 18px; height: 10px; background: url(http://www.fast-chat.co.uk/images/drag.png); background-repeat: no-repeat; z-index: 0" onmousedown="allowDrag=true" onmouseup="allowDrag=false" title="Move the Emotion dialog"></div>
      <div style="background-color: #026AFE; text-align: center; color: white; font-family: Verdana; font-size: 7pt; cursor: default">Insert an Emoticon</div>
      <div id="list_emotion" style="text-align: center; margin-top: 3px; margin-bottom: -3px;">
      </div>
</div>

Hopefully this provides you with enough to find any errors, etc.

Just a thought, could it be the way that i am implementing the function that is wrong?

Thanks

Richard
0
 
LVL 6

Expert Comment

by:pD_EO
Comment Utility
Change this line...

function dragEmotion(){

To this...

function dragEmotion(evt){

See if that works :)
0
 
LVL 5

Author Comment

by:shaggy_the_sheep
Comment Utility
Hi thanks

Sorry, missed that completely!! Works a treat now! Thanks for the quick response


Richard
0
 
LVL 6

Expert Comment

by:pD_EO
Comment Utility
Anytime :)
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now