Develop Reference

JavaScript coordinates showing as greater than the image width and height

I am trying to get the location of the mouse while hovering over an image in pixels from the top left corner of the image. I am currently using the pageX and pageY event attributes but this is returning a value greater than the width and height of the image itself.
var getImgCoord = function(e) {
var x = e.pageX,
y = e.pageY;
console.log(x + ' | ' + y);
}
$('.featuredImg').mousemove(function() {
getImgCoord(event);
});
Any help would be greatly appreciated.

pageX and pageY are the coordinates relative to the top left corner of the document not your image itself (the name already says it).
you need to subtract the offsets from your element:
$('.featuredImg').mousemove(function(e) {
var x = e.pageX - $(this).offset().left,
y = e.pageY - $(this).offset().top;
console.log(x + ' | ' + y);
});

http://jsfiddle.net/D5uuA/
var getImgCoord = function(e) {
var imageOffset = $(this).offset();
//or $(this).offset(); if you really just want the current element's offset
var x = e.pageX - imageOffset.left,
y = e.pageY - imageOffset.top;
console.log(x + ' | ' + y);
}
$('.featuredImg').mousemove(getImgCoord);

Image showing different coordinates on different browsers

I am plotting an image of fixed width and height. I am allowing the user to click on the image - and storing the location (x-y coordinates) where the image was clicked. Here is a sample code:
<script language="JavaScript" type="text/JavaScript">
var posx; var posy;
function showP(e) {
// captures the mouse position
posx = 0; posy = 0;
if (!e) { var e = window.event; }
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX;
posy = e.clientY;
}
alert('X mouse is: ' + posx + ' Y mouse is: ' + posy );
}
</script>
I am noticing that for a fixed point on the image, I am getting different X and Y coordinates on different browsers.
Can anyone tell why this is the case.
Thanks

you can check all data that you get in your event
var a = "";
for (var key in e){
if( typeof e[key]!='function' && typeof e[key] !='object' )
a += key+'='+ e[key]+'\n'
}
alert(a)
this constraction helps you compare margin and padding in browsers
var padding = parseInt($("#imgId").css("padding-top"));
I think you need investigate you code and styles, maybe you have some conflict with padding and margins that influences on you result.
Hope this way helps you.

How to bind mousemove scroll and resize all into one function

Currently, I "do stuff" when the mouse moves. However, I also want to do the exact same thing if the user resizes the browser or scrolls down the browser.
jQuery(document).bind('mousemove',function(e){
var x, y;
x = e.pageX; // x coord
y = e.pageY; // y coord
//other stuff
});
I tried putting doing
jQuery(document).bind('mousemove resize scroll',function(e){...
but it didn't work. I also tried
jQuery(document, window).bind('mousemove resize scroll',function(e){...
but it also didn't work.
I also know that you can detect scroll using
$(window).scroll(function(){
and detect resize using
$(window).resize(function() {
But the if I use those detections, I won't have the "e" argument to get the x and y coordinates of the mouse
How do I bind all 3 events all into one function?
Thanks

You do still have the event data in the scroll and resize methods. Try wrapping your code into a single function with 3 handlers. The on() method requires jQuery 1.7+
function reusable(eData){
// Heres what you want to do every time
}
$(document).on({
mousemove: function(e) { reusable(e); },
scroll : function(e) { reusable(e); }
);
$(window).on({
resize : function(e) { reusable(e); }
});
edited
The events should be in their correct objects window and document or you will get unexpected values.

from your comment:
the problem is that e.pageX is undefined when the resize or scroll event is activated and that is breaking my application
So why are you using the current object properties when you know they are undefined? Why not use a global variable and hold in them the last value?
Live example in JsBin
var clientX = 0, clientY = 0,
screenX = 0, screenY = 0,
pageX = 0, pageY = 0;
// bind the events in the correct objects
jQuery(window).bind('resize',function(e) { getBindingValues(e); });
jQuery(document).bind('mousemove scroll',function(e) { getBindingValues(e); });
// your one-function
function getBindingValues(e) {
clientX = e.clientX ? e.clientX : clientX;
clientY = e.clientY ? e.clientY : clientY;
screenX = e.screenX ? e.screenX : screenX;
screenY = e.screenY ? e.screenY : screenY;
pageX = e.pageX ? e.pageX : pageX;
pageY = e.pageY ? e.pageY : pageY;
$("#hello").html(
"*** Safe values ***<br/>" +
"mouse: X." + clientX + " Y." + clientY + "<br/>" +
"page: X." + pageX + " Y." + pageY + "<br/>" +
"screen: X." + screenX + " Y." + screenY + "<br/><br/>" +
"*** More values ***<br/>" +
"window: W." + $(window).width() + " H." + $(window).height() + "<br/>" +
"type: <b>" + e.type + "</b>"
);
}
you can compare below the e (event) object on mousemove and scroll
on scroll
on mousemove

HTML5 Canvas and Firefox 4 - Getting click coordinates

I've been working on a bunch of HTML5 Video and Canvas demos. Til now I focused on Chrome, but now I'm trying to optimize them for Firefox and Safari as well.
The one I'm working on right now draws a video in Canvas and moves the video to mouseclick positions. What I have so far works in Chrome and Safari, but not in Firefox. I haven't been able to find much info on these topics (click events, coordinates, firefox-specific etc). I copied the code from here:
How do I get the coordinates of a mouse click on a canvas element?
http://answers.oreilly.com/topic/1929-how-to-use-the-canvas-and-draw-elements-in-html5/
because they gave me the impression it should work in all browsers, but Firefox still refuses. All it does is display the video, it doesn't react to mouse clicks.
This is my code (not including the definition of variables):
function activateVideo(){
setTarget();
videoElement.play();
animate();
}
function setTarget(){
targetX=xCoord;
targetY=yCoord
moverX=(targetX-currentX)/100;
moverY=(targetY-currentY)/100;
}
canvasElement.addEventListener('click', function(){
/*xCoord = event.clientX - canvasElement.offsetLeft;
yCoord = event.clientY - canvasElement.offsetTop;
txtCount.value = xCoord + " + " + yCoord;*/
if (event.pageX || event.pageY) {
xCoord = event.pageX;
yCoord = event.pageY;
} else {
xCoord = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
yCoord = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
xCoord -= canvasElement.offsetLeft;
yCoord -= canvasElement.offsetTop;
setTarget();
},false);
function animate(){
currentX += moverX;
currentY += moverY;
if(dist(currentX,targetX,currentY,targetY)<1) {
moverX=0;
moverY=0;
}
drawVideo(videoElement,context,320,256);
timer = setTimeout(animate,20);
}
function dist(x1,x2,y1,y2){
return Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1));
}
function drawVideo(videoElement,context,w,h) {
context.clearRect(0,0,1000,600);
context.drawImage(videoElement,currentX,currentY,w,h);
}
playCanvas.addEventListener('click', activateVideo, false);
So obviously I'm a bit lost, if anybody could point me in the right direction, I would appreciate it.

I have a working version of this that uses jquery, which is likely the most cross-browser way of doing it. It's not that bad. Here's my fiddle http://jsfiddle.net/jaredwilli/D3PWN/
Code
var canvas = $('canvas');
canvas.mousemove(function(e){
var pageCrds = '('+ e.pageX +', '+ e.pageY +')',
clientCrds = '('+ e.clientX +', '+ e.clientY +')';
$('span:first').text('(e.pageX, e.pageY) - '+ pageCrds);
$('span:last').text('(e.clientX, e.clientY) - '+ clientCrds);
});
var arr = [];
canvas.click(function(e) {
arr.unshift($('span.first').text());
console.log(arr);
});
Hope this helps you out some. :)

You need to pass the event object to the handler for FF (IE works becuse event is available via window.event)
canvasElement.addEventListener('click', function(event){
event = event || window.event;
...

Getting the cursor position using javascript not working in firefox

I have a javascript like
function getCursorPosition(e) {
e = e || window.event;
var cursor = {x:0, y:0};
if (e.pageX || e.pageY) {
cursor.x = e.pageX;
cursor.y = e.pageY;
}
else {
cursor.x = e.clientX +
(document.documentElement.scrollLeft ||
document.body.scrollLeft) -
document.documentElement.clientLeft;
cursor.y = e.clientY +
(document.documentElement.scrollTop ||
document.body.scrollTop) -
document.documentElement.clientTop;
}
return cursor;
}
document.onmouseup = function(e){
cursor = getCursorPosition();
alert(cursor.x + ':' + cursor.y);
};
this code alerts the X and Y position where the cursor is clicked. This works good in IE 7/8, Chrome/Safari, Opera 10 . But on testing with firefox 4.0 beta 1, it is not working.
On googling, many websites gave me the same code. But it is not working in ff 4.0b
Is this a bug with ff 4.0b ? or can anyone suggest me another cross browser cursor position script ?

You should pass the event to the getCursorPosition method:
document.onmouseup = function(e){
cursor = getCursorPosition(e); //<== added the "e" argument here
alert(cursor.x + ':' + cursor.y);
};

Or lose getCursorPosition() completely and use extremely cross-browser jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function jQueryMain ()
{
$(document).mouseup (function (evt) {alert (evt.pageX + ':' + evt.pageY);} );
}
$(document).ready (jQueryMain);
</script>