Get cursor position at frequent interval - javascript

I'm trying to get mouse cursor current position at frequent interval.
function checkMousePos(ev){
alert(true);
var x = ev.clientX,
y = ev.clientY;
alert('' + x + ' ' + y);
}
setInterval(checkMousePos, 500);
This code alerts true, but never x and y.
What am I not doing right ?

When debugging something you far better using something like console.log(myVariable) and then viewing it in the console. In your case ev not being pass by your interval and there for it's undefined. What seems like this:
var x;
var y;
document.addEventListener('mousemove', function(event){
x = event.pageX;
y = event.pageY;
})
function checkMousePos(){
console.log("Cursor at: " + x + ", " + y);
}
setInterval(checkMousePos, 500);
Although it's usually not the best solution.

Related

How to Add and subtract var in Jquery?

I'm a completely nooby on Jquery.
I'm trying to calculate and obviously didn't work.
$(document).ready(function() {
var x = $('.a').height();
var y = $('.b').height();
$('.c').height(y - x + x);
});
I'm close to make it work? :))
https://jsfiddle.net/kav5y0vf/
Instead of:
var x = $('.a').height();
Use
var x = $('.a').outerHeight();
height() returns height of element with no padding, whereas outerHeight() does.
jsfiddle below:
https://jsfiddle.net/kav5y0vf/2/
Change this line
$('ul.logad li.o').height(y - x + x);
To
$('ul.logad li.o').css('height', (y - x + x) + 'px');
Don't know why you need this but y-x+x = y

Javascript: Onkeydown, move the text to a certain direction but needs to be pressed twice

In this code, for some reason I need to double press the key so that the text would go to the direction I want. If I don't do that the text will keep on going to the previous direction it went in. I was looking for a solution for this for 2 hours now, I seem to not be able to find the right code to place.
Here's the code:
https://jsfiddle.net/MindZeroJ5/4cykaLs8/
HTML:
<canvas id="canvas" style="border:1px solid black;" width="500" height="500" ></canvas>
JAVASCRIPT:
"use strict";
var c = document.getElementById("canvas"),
ctx = c.getContext("2d"),
y,
x,
kpd,
kcd,
kpu,
kcu,
HEIGHT,
WIDTH;
x = 50;
y = 50;
HEIGHT = 500;
WIDTH = 500;
ctx.font = "20px Georgia";
ctx.fillText("Hello World!", x, y);
function movetextup() {
ctx.clearRect(0, 0, HEIGHT, WIDTH);
y -= 10;
ctx.fillText("Hello World!", x, y);
console.log(x + " " + y);
}
function movetextdown() {
ctx.clearRect(0, 0, HEIGHT, WIDTH);
y += 10;
ctx.fillText("Hello World!", x, y);
console.log(x + " " + y);
}
function movetextleft() {
ctx.clearRect(0, 0, HEIGHT, WIDTH);
x -= 10;
ctx.fillText("Hello World!", x, y);
console.log(x + " " + y);
}
function movetextright() {
ctx.clearRect(0, 0, HEIGHT, WIDTH);
x += 10;
ctx.fillText("Hello World!", x, y);
console.log(x + " " + y);
}
document.onkeydown = function (e) {
kpd = String.fromCharCode(e.keyCode);
kcd = e.keyCode;
console.log('pressed ' + kpd);
if (kpu == "W") {
movetextup();
}
if (kpu == "S") {
movetextdown();
}
if (kpu == "A") {
movetextleft();
}
if (kpu == "D") {
movetextright();
}
};
document.onkeyup = function (e) {
kpu = String.fromCharCode(e.keyCode);
kcu = e.keyCode;
console.log('unpressed ' + kpu);
};
Thanks!
It seems like you are overwriting the global variable that holds the direction on the "keyup", so if you're moving to the left (D), and then press A (to go to right), the "keyup" even will set the direction (kpu) to D, only when you press again it will be set to A.
My recommendation is to use only the onkeydown event, and set the direction there, that way you won't have conflict of events overwriting the same variable with different values:
https://jsfiddle.net/0d8ue6po/
Note that in your example, you don't even need a global variable (not sure what you'll do in the future with it), but you could just do:
document.onkeydown = function (e) {
var kpu = String.fromCharCode(e.keyCode);
var kcd = e.keyCode;
/* rest of the code for moving */
}
That way you wouldn't have the overwriting problem either.
Seems you're using wrong variable when checking keycode onkeydown, use kpd instead of kpu, i've updated your jsfidle
You are using keyup event result (kpu) in keydown event handler which means that a key should be made down and up and down again in order to hit the correct key value.
Well, in your case it seems that there is no need for keyup event handler, hence you had better use kpd variable in your keydown event handler to dispatch the key event user sends.

Can't get mouse coordinates through javascript

Recently I have been trying to get a grasp of javascript. I've been experimenting through the past couple of months with different code to see what all is possible through javascript. Recently I've been trying to find various ways to capture the mouse coordinates through javascript with a canvas. Here's my attempt: http://jsfiddle.net/f8n2one4/
As you can see, there's a MouseHandler which is supposed to capture the mouse coordinates through the ClientX and ClientY variables. However, when I try to display these variables, nothing comes up. Why is that?
document.getElementById("test").innerHTML = "x: " + x + " y: " + y;
Shouldn't it show the x and y values?
The x and y variable are out of the scope of your draw() method.
try the following:
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
player();
MouseHandler.init(document);
var clientPosition = MouseHandler.getPos();
document.getElementById("test").innerHTML = "x: " + clientPosition.x + " y: " + clientPosition.y;
}
See it working here.
I would recommend not to initialize the whole MouseHandler every interval, just getting the position on every interval.
Also if you are animating use .requestanimationframe() instead of setInterval, you'll get better performance.
In your example are you are initializing the mouse handler (with MouseHandler.init(element)) but the x and y values have to be accessed using the getPos() method:
document.getElementById("test").innerHTML =
"x: " + MouseHandler.getPos().x +
" y: " + MouseHandler.getPos().y;
You can see a working update to your fiddle here
The x and y do not exist. You need to use:
document.getElementById("test").innerHTML = "x: " + MouseHandler.getPos().x + " y: " + MouseHandler.getPos().y;
Fiddle: http://jsfiddle.net/f8n2one4/3/
It's actually really simple, your x, y are out of scope.
You could access them via your MouseHandler variable :
MouseHandler.getPos().x
MouseHandler.getPos().y
Or try OOP Javascript and instantiating the MouseHandler with a 'new' operator
var MouseHandler = function() {
this.x = 0;
this.y = 0;
}
var myMouseHandler = new MouseHandler();
console.log(myMouseHandler.x + myMouseHandler.y);

event.clientX and event.clientY vs event.x and event.y

When detecting mouse x and y coordinates, is it best to use event.clientX and event.clientY like this:
function show_coords(event){
var x=event.clientX;
var y=event.clientY;
alert("X coords: " + x + ", Y coords: " + y);
}
or use x and y, like this:
function show_coords(event){
var x=event.x;
var y=event.y;
alert("X coords: " + x + ", Y coords: " + y);
}
Is one method better/faster than the other? They seem to work identically to me.
I guess event.x/y are defined only in IEs. A quote from IE documentation:
"event.clientX: Retrieves the x-coordinate of the mouse cursor relative to the client area of the window, excluding window decorations or scroll bars."
"event.x: Retrieves the x-coordinate of the mouse cursor relative to the parent element."
As putvande stated, clientX maybe not cross-browser either. pageX/Y might be a safer choice.

How do I get the original position of "ui.draggable" in the "drop" event?

I drag a "draggable" object to a "droppable" object. I want to know if something is already there in the position. I have already done that (without jQuery UI).
Can I do it somehow with jQuery UI?
If there is an object already present, the dragged object must revert to the original position. How can I get the original position of ui.draggable inside the "drop" event?
Thanks.
You can find answer from previous post Draggable revert if outside this div and inside of other draggables (using both invalid and valid revert options)
Demo is here http://jsfiddle.net/htWV3/1/
Look at the following, this may help
$(document).ready(function() {
var x;
var y;
$("#div1").mousedown(function(e) {
var pos = $(this).offset();
x = e.pageX - pos.left;
y = e.pageY - pos.top;
//alert(x + "," + y);
$("#drag").show().css({
top: y,
left: x
});
$("#drag").draggable();
});
$("#div1").mouseup(function(e) {
var pos = $(this).offset();
var a = e.pageX - pos.left;
var b = e.pageY - pos.top;
alert("Start-Top:" + y + "Start-Left" + x + "End-Top" + b + "End-Left" + a);
});
});​

Categories