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?
Related
I have an HTML5 canvas based Javascript component that needs to capture and release mouse events. In the control the user clicks an area inside it and drags to affect a change. On PC I would like the user to be able to continue dragging outside of the browser and for the canvas to receive the mouse up event if the button is released outside of the window.
However, according to my reading setCapture and releaseCapture aren't supported on Chrome.
Is there a workaround?
An article written in 2009 details how you can implement cross-browser dragging which will continue to fire mousemove events even if the user's cursor leaves the window.
http://news.qooxdoo.org/mouse-capturing
Here's the essential code from the article:
function draggable(element) {
var dragging = null;
addListener(element, "mousedown", function(e) {
var e = window.event || e;
dragging = {
mouseX: e.clientX,
mouseY: e.clientY,
startX: parseInt(element.style.left),
startY: parseInt(element.style.top)
};
if (element.setCapture) element.setCapture();
});
addListener(element, "losecapture", function() {
dragging = null;
});
addListener(document, "mouseup", function() {
dragging = null;
}, true);
var dragTarget = element.setCapture ? element : document;
addListener(dragTarget, "mousemove", function(e) {
if (!dragging) return;
var e = window.event || e;
var top = dragging.startY + (e.clientY - dragging.mouseY);
var left = dragging.startX + (e.clientX - dragging.mouseX);
element.style.top = (Math.max(0, top)) + "px";
element.style.left = (Math.max(0, left)) + "px";
}, true);
};
draggable(document.getElementById("drag"));
The article contains a pretty good explanation of what's going on, but there are a few gaps where knowledge is assumed. Basically (I think), in Chrome and Safari, if you handle mousemove on the document then, if the user clicks down and holds the mouse, the document will continue receiving mousemove events even if the cursor leaves the window. These events will not propagate to child nodes of the document, so you have to handle it at the document level.
Chrome supports setPointerCapture, which is part of the W3C Pointer events recommendation. Thus an alternative would be to use pointer events and these methods.
You might want to use the jquery Pointer Events Polyfill to support other browsers.
I'm creating iFrame and in that iFrame script I need to catch mouse coordinates after creation (in very start). I was hoping that it's possible with custom event.
I tried
var myEvent = new Event('mouseC');
document.addEventListener('mouseC', function(e){
console.log('my event is working');
console.log('mouse x is '+e.pageX);
console.log('mouse y is '+e.pageY);
});
document.dispatchEvent(myEvent);
console is displaying 'my event is working', but mouse coordinates are undefined.
I tried wrapping it in window.onload, and I also tried screenX and clientX... always undefined
How can I catch mouse coordinates in newly created iFrame imedietly after creation?
...btw, mousemove event is working and writing coordinates when mouse is moved over new iFrame.
Could I somehow move mouse for just 1px to trigger that event?
iframElement = document.getElementBy...("...");
document.addEventListener("click", function(evt,iframElement){
var x = evt.pageX - iframElement.offset.left;
var y = evt.pageY - iframElement.offset.top;
console.log(x+" , "+y);
});
it might work
var value =parent.frames[FRAME_NAME].frameElement.offsetParent;
var x = 0, y = 0;
while (value)
{
x += value .offsetLeft;
y += value .offsetTop;
value = value .offsetParent;
//console x anf y...
}
console x and y you can get co ordinates of mouse inside iframe.
I am having what I thought was a simple problem, but after about a week of searching for the solution I can't seem to find the reason behind it.
Basically I am calling the function below every time the mouse is clicked, and it works fine in Chrome, but in Firefox the alert("This is not called") never gets called.
I know the problem is in the two lines of code:
x = event.pageX - canvas.offsetLeft;
y = event.pageY - canvas.offsetTop;
but can't seem to find whats wrong. Mozillas site says that event.pageX is a legitimate command to call,
and as well the canvas.offsetLeft.
But the function still isn't getting called. I have tried defining the variables in the function rather than globally, and that doesn't work, and have tried a few other alternatives out, including a jQuery event handler, but I want to try to stay away from jQuery if at all possible, mostly because I want to understand what's going on here, not just find something to patch over it.
Any help would be much appreciated.
also, the site in question is http://cabbibo.com.
EDIT:
If it helps at all, the rest of the Javascript in Firefox is running very slowly, which leads me to believe it could be a problem somewhere else in the code, for example when the side navigation is opening, each time the function for the animation is called, it takes much longer then it should.
function q(event){
if(hasBeenCalled==0){
event = event || window.event;
var canvas = document.getElementById('canvas');
x = event.pageX - canvas.offsetLeft;
y = event.pageY - canvas.offsetTop;
alert("This Is Not Called");
Changer2();
stopDraw();
moveToCenter();
t = setInterval(rotateDrawRec, 1);
}else{}
}
Instead of doing this:
<canvas id="canvas" onclick="q()" width="1000" height="900"></canvas>
function q(event){
if(hasBeenCalled==0){
event = event || window.event;
var canvas = document.getElementById('canvas');
x = event.pageX - canvas.offsetLeft;
y = event.pageY - canvas.offsetTop;
alert("This Is Not Called");
Changer2();
stopDraw();
moveToCenter();
t = setInterval(rotateDrawRec, 1);
}else{}
}
Try this:
<canvas id="canvas" width="1000" height="900"></canvas>
var canvasElem = document.getElementById('canvas');
canvasElem.addEventListener("click", q, false);
function q(event){
if(hasBeenCalled==0){
event = event || window.event;
x = event.pageX - this.offsetLeft;
y = event.pageY - this.offsetTop;
alert("This Is Not Called");
Changer2();
stopDraw();
moveToCenter();
t = setInterval(rotateDrawRec, 1);
}else{}
}
JSFiddle:
http://jsfiddle.net/5Xs2S/3/
Your site (http://cabbibo.com/) throws an "canvas3 is null" error on line 61:
var ctx3 = canvas3.getContext("2d");
This error halts the execution of the entire script, so understandably the alert in q() does not get called either.
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";
}
}
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