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>
Related
I am stuck in an issue. I have to fetch mouse positions on firefox browser. However it is not working may be I am doing any mistake in code. So far I have done is given below.
Javascript Code :
function MousePos(event){
if ($.browser.mozilla == true){
if(typeof event.offsetX === "undefined" || typeof event.offsetY === "undefined"{
var targetOffset = $(event.target).offset();
event.offsetX = event.pageX - targetOffset.left;
event.offsetY = event.pageY - targetOffset.top;
alert(event.offsetX + " " + event.offsetY);
}
}
}
HTML Code :
<div class="paymentTracker" onmouseover="MousePos();">
</div>
The function is working if I show an alert box only but this code having issue. I want mouse positions only on Firefox browser.
Thanks in advance.
try this : I think its not working because its not taking onmouseover function you have defined in html.
$( ".paymentTracker" ).mouseover(function(event) {
var x = event.clientX;
var y = event.clientY;
var coords = "X coords: " + x + ", Y coords: " + y;
alert(coords);
});
<div class="paymentTracker"></div>
<style>
.paymentTracker {width:300px; height:300px;border:1px solid;}
</style>
heres the fiddle : https://jsfiddle.net/0yptrjdw/
with your code
$( ".paymentTracker" ).mouseover(function(event) {
var targetOffset = $(event.target).offset();
event.offsetX = event.pageX - targetOffset.left;
event.offsetY = event.pageY - targetOffset.top;
alert(event.offsetX + " " + event.offsetY);
});
My program uses the mouse movement to control the location of a graphic on the screen, the graphic moves with the mouse. This works as intended in Chrome and IE but not in Firefox. Is there a html or javascript method that will work in all three browsers?
Here are the code steps that are working in Chrome & IE: (full program link here) http://www.midaslink.com/mastermind.htm
<body onMousemove=setup()>
<img id = "spot" name = "spot" src = "blank_dot.gif">
this calls setup()
function setup()
{
mouseX = window.event.x;
mouseY = window.event.y;
window.status = mouseX + " " + mouseY;
this.document.all.spot.style.left = mouseX - 15;
this.document.all.spot.style.top = mouseY - 10;
}
throughout the program, spot is changed by the user clicking on a graphic, which changes the spot .src to the new graphic as in the following:
function green()
{
document.spot.src = "green_dot.gif"
}
function red()
{
document.spot.src = "red_dot.gif"
}
Often times, browser differences drive developers to use frameworks like jQuery to normalize things like this.
quirksmode.com is a good resource if you don't want to go that route. Here is what you are looking for: http://www.quirksmode.org/js/events_properties.html#position
function doSomething(e) {
var posx = 0;
var 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 + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
// posx and posy contain the mouse position relative to the document
// Do something with this information
}
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.
I created a small function to get mouse coordinates in div but somehow it is not working. I checked my function thoroughly but I didn't find the bug.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript">
function SetValues()
{
var s = "X:" + window.event.clientX + " Y:" + window.event.clientY ;
document.getElementById('divCoord').innerHTML = s;
}
</script>
</head>
<body onmousemove=SetValues()>
<div id="divCoord"></div>
</body>
</html>
The window.event property is only present in Internet Explorer, and only in some versions I think. In fact, the entire operation you are trying to do requires some fairly advanced cross-browser coding.
I suggest you consider using a JavaScript framework that normalizes events, such as jQuery.
Using jQuery, and this will work in all browsers:
$(document).mousemove(function(e) {
$('#divCoord').html('X:' + e.pageX + ' Y:' + e.pageY);
});
Try this code :
JS
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.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
}
else { // grab the x-y pos.s if browser is NS
tempX = e.pageX;
tempY = e.pageY;
}
HTML
X <input type="text" name="MouseX" value="0" size="4"><br>
Y <input type="text" name="MouseY" value="0" size="4"><br>
Source
window.event.clientX & window.event.clientY
try:
$(document).ready(function(e) {
$('body').live('mousemove', function(e) {
alert('x: ' + window.event.clientX + ', y: ' + window.event.clientY);
})
});
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;
...