Develop Reference

How to correctly get mouse coordinates with JavaScript without JQuery?

I am aware of the fact that variations of that question were asked many times before. Looking through Google output I found pages with examples like that:
function point_it(event) {
pos_x = event.offsetX ? (event.offsetX) : event.pageX - document.getElementById("pointer_div").offsetLeft;
pos_y = event.offsetY ? (event.offsetY) : event.pageY - document.getElementById("pointer_div").offsetTop;
document.pointform.form_x.value = pos_x;
document.pointform.form_y.value = pos_y;
}
The code works, but when I look at
MouseEvent.offsetX it says "This is an experimental technology...".
So my question is, is it save to use the above construction or not? Is it better to learn how to use JQuery?

Please try this
function getClickPosition(e) {
var xPosition = e.clientX;
var yPosition = e.clientY;
}
Call this function on "onClick" event. You can get the coordinates.
Output the coordinates of the mouse pointer when the mouse button is clicked on an element.

JavaScript Windows 8 app setInterval() issue

Basically I have this code in MS Visual studio 2012 for a windows 8 JavaScript+jQuery app.
<script>
window.setInterval(function () {
var currentx = $(".ball").css("left");
var currenty = $(".ball").css("top");
$(".ball").css("top", currentx + 1);
$(".ball").css("left", currenty + 1);
//debug
var time=1;
$("p.test").text("Has been called " +time);
var time=time+1;
}, 100);
</script>
Yes, I am using jQuery 2.0
Now I looked at the API's here http://www.w3schools.com/js/js_timing.asp
and here http://api.jquery.com/css/
My code compiles, but it just is not updating the position of the ball. It appears it is only being called once. If it helps the ball is a DIV element. Maybe windows 8 Apps don't fully support DOM manipulation, or just the Window global variable, I don't really know.
What code would I need to achieve my goal of updating this element of class ball's top and left CSS rules at set intervals?

.css("left") and .css("top") return a string (e.g. 0px) and not a number so you need to parse it with parseInt otherwise the currentx + 1 results in e.g. 0px1
And it looks like it is only called once because time is defined and set to 1 in the setIntervalcallback, you need to define and initialize it outside of the callback of setInterval.
instead of .css("left") you could also think over using .position().left.
(function() {
var time=1;
window.setInterval(function () {
var currentx = parseInt($(".ball").css("left"),10);
var currenty = parseInt($(".ball").css("top"),10);
$(".ball").css("top", currentx + 1);
$(".ball").css("left", currenty + 1);
//debug
$("p.test").text("Has been called " +time);
time=time+1;
}, 100);
})();

Use mouseover event mousecoordinates as function input

I have a Java server page which should execute showPeopleDetails function, when a user hovers over the a-tag. showPeopleDetails is a Javascript function in a separate js file, which is imported by the framework. showPeopleDetails should display a balloon popup over the a-tag. Somehow the function is only executed for the first a-tag but not for the others! This is the HTML snippet:
|
This is my Javascript showPeopleDetails function:
function showPeopleDetailsNow(UserId, x, y){
var vpd = document.getElementById("PeopleDetails");
if ( vpd != null ) {
getMousePosition();
vpd.style.top= x +10 + $(document).scrollTop(); //mouseX and mouseY are defined globally
vpd.style.left= y +10;
vpd.style.display="block";
}
}
There is nothing wrong with the showPeopleDetails function I have tested it and it is working on other parts of the website. But when I add event.clientX and event.clientY the popup is only displayed once. I only have to develop for Internet Explorer 8 so browser compatibility is not an issue.
Help is much appreciated!

Instead of passing event.clientX and event.clientY in the function call try this
function showPeopleDetailsNow(UserId, event){
event = event || window.event;
var x = event.clientX, y = event.clientY;
var vpd = document.getElementById("PeopleDetails");
if ( vpd != null ) {
getMousePosition();
vpd.style.top= x +10 + $(document).scrollTop(); //mouseX and mouseY are defined globally
vpd.style.left= y +10;
vpd.style.display="block";
}
}

javascript onmousemove get relative coordinates

function aim() {
var mousex = ?
}
<div class="gameArea" onmousemove="aim();"> </div>
I can't find how to get the mouse coordinates for an onmousemove event in javascript.

var guide = null;
function aim(event) {
if(window.event)
event = window.event; //grrr IE
var mousex = event.clientX - guide.offsetLeft;
alert('mouse x' + mousex)
}
function init() {
guide = document.getElementById("guide")
guide.onmousemove = aim;
}
<body onload="init();">
This appears to work on both browsers. I cant do onmousemove="aim();" in html because it doesn't pass the mousemove event object.

The above example using guide.offsetLeft only works if the enclosing element is at (0,0). If not, you can use guide.getBoundingClientRect().left (and similar for vertical coord)

Take a lot at the following script. I believe it should be exactly what you're looking for.
Capture Mouse Position

Getting mouse position in major internet browsers with javascript

I read this article regarding creating popup notes with javascript and css
The problem is that this one works only in IE since window.event is undefined in Firefox.
// assigns X,Y mouse coordinates to note element
note.style.left=event.clientX;
note.style.top=event.clientY;
So could you point me a fully working example? Or at least, how could i modify the javascript code to make it work in both internet browsers?

There are more than two browsers, but the following should work in most of them (adapted from the function on the page you linked to):
showNote = function(evt) {
evt = evt || window.event;
// gets note1 element
var note1=document.getElementById('note1');
// assigns X,Y mouse coordinates to 'note1' element
note1.style.left=evt.clientX;
note1.style.top=evt.clientY;
// makes note1 element visible
note1.style.visibility='visible';
};
The problem is that not all browsers have an event property of window and instead use an event object implicitly passed in as a parameter to an event handler function such as showNote. The evt = evt || window.event; line assigns window.event to the evt variable if no event parameter was passed into the function (which is what happens in Internet Explorer).

You can separate the two branches when you define the method.
It takes more characters than bundling them together,
but you do not have to check for support on every every call.
//
window.whereAt= (function(){
var fun;
if(typeof pageXOffset== 'number'){
fun= function(e){
var pX, pY, sX, sY;
pX= e.clientX || 0;
pY= e.clientY || 0;
sX= window.pageXOffset;
sY= window.pageYOffset;
return [(pX+sX), (pY+sY)];
}
}
else{
fun= function(e){
e= (e && e.clientX)? e: window.event;
var pX, pY, sX, sY;
pX= (e.clientX);
pY= (e.clientY);
var d= document.documentElement;
var b= document.body;
sX= Math.max(d.scrollLeft, b.scrollLeft);
sY= Math.max(d.scrollTop, b.scrollTop);
var pwot= [(pX+sX), (pY+sY)];
return pwot;
}
}
return fun;
})()
//test case
document.ondblclick= function(ev){
alert(whereAt(ev))
};

I finally found a solution, but using canvas.addEventListener instead of onclick funion bind in attributes of canvas. And it works in IE, FF, Chrome.
canvas.addEventListener('mousedown', ev_canvas, false);
function ev_mousedown(ev){
var posx=0;posy=0;
if (e.offsetX > 0) { // IE, Chrome
posx = e.offsetX;
posy = e.offsetY;
} else{ // Firefox
posx = e.layerX;
posy = e.layerY;
}
} // This also works correctly while zoom!=100%
<div style="position: relative;">
<canvas id="canvas" width="600" height="600" onClick="newClick()" style="position: relative;"></canvas>
</div>
See reference: http://dev.opera.com/articles/view/html5-canvas-painting/
The following codes doesn't work in Firefox.
showNote = function(evt) {
evt = evt || window.event;
// gets note1 element
var note1=document.getElementById('note1');
// assigns X,Y mouse coordinates to 'note1' element
note1.style.left=evt.clientX;
note1.style.top=evt.clientY;
// makes note1 element visible
note1.style.visibility='visible'
}
I have google for many solutions and referenced the relatively official site for browers differs: http://www.quirksmode.org/dom/w3c_cssom.html#mousepos
But still have not found a solution in Firefox 20.
window.event has no definition in FF. But works well in IE and Chrome.
I wonder have I misunderstood something in this point?