I'm having problems while trying to play a video as long as mouse moves. I want it's time to follow mouse, as if the mouse was the time handler.
I have this code. It works fine on Internet Explorer but on Chrome or Mozi time is not fluid, as it has something to do with refreshing times. Video plays with difficult.
<script type="text/javascript">
var mouseX;
$(document).mousemove( function moveFunc(e) {
mouseX = e.clientX;
var timV = $(".video").get(0).duration;
var valV = (timV*mouseX/$(window).width());
$(".video").get(0).currentTime = valV;
});
</script>
Could you help me?
Firefox and Chrome stopped firing mousemove events for every mouse position update on the window and document in an attempt to make pages more responsive.
You can fix it by binding your event to something more specific like the video element itself or any wrapper element.
Related
Context: I am developing a game using the HTML5 Canvas and Javascript. I use JS's timeout functions to redraw the canvas or parts of it once every 20ms. One of the game's main mechanics is updating the client mouse position, as the player follows it. To do so, I make use of the onmousemove event.
Behavior: on other browsers, or on Mozilla Firefox when the computer has good processing power, I have no issues to update the mouse position, and the onmousemove event fires as frequently as the game's FPS.
Issue: on some of my player's computers, when they are using Mozilla Firefox, the mouse position doesn't update as frequently. They reported laggy behavior of the mouse's position, although the rest of the game keeps updating as frequently as before.
What I discovered so far: I tried to replicate the issue on my computer by printing the game's framerate on the console every frame. I got the same laggy behavior of the mouse as reported. What is strange is, although the framerate doesn't drop at any time, the mouse update frequency decreases the longer the page is remained open. After some minutes, onmousemove is called as rarely as once a second, but the FPS keeps high.
Is there any way of controlling how frequently Firefox fires the onmousemove event? If not, why does it stop reporting the event as time passes, but keep running my timeout functions and maintaining the FPS high? What could I do to stop the issue from happening?
EDIT:
Here is some code to help understand the issue. To handle the mouse movement:
const MouseHandler = function(){
var mouseX = 0;
var mouseY = 0;
...
return {
...
onMouseMove: function(){
mouseX = window.event.clientX - bodyMargin - WIDTH/2;
mouseY = -(window.event.clientY - bodyMargin - HEIGHT/2);
},
...
}
}();
fgCanvas.onmousemove = MouseHandler.onMouseMove;
And, to make the code run repeatedly:
const run = function(){
intervalID = setTimeout(run, FRAME_DELAY);
...
window.requestAnimationFrame(function(){
...
draw[gameState]();
});
}
I call this function I have getMouseXY, whenever the mouse moves. Works great for tracking this element with the mouse. Like so:
document.onmousemove = getMouseXY;
But I'd like to layer in some logic, so it's only when the mouse is over this one element AND the mouse is moving. I thought this would work, but it doesn't:
document.getElementById("circle1").onmouseover && document.onmousemove = getMouseXY;
Any ideas? Help is much appreciated!
You're probably looking for
document.getElementById("circle1").addEventListener('mousemove', getMouseXY);
which will fire whenever the mouse moves over the element with the ID #circle1
AWESOME FIDDLE
I am using the sketch.js plugin for drawing on HTML5 canvas. While it works fine on desktop computers it seems to have some issues on mobile browsers.
The problem is that if I draw 2 different shapes, the canvas will reset to blank as soon as I touch it.
Just to be completly clear I will make and example: drawing the number '12' will first draw '1' and then when I start drawing '2' the canvas will clear and only keep the number '2'...
<!-- CANVAS -->
<canvas id="canvas1" style="width:100%; background:white; height:150px;"></canvas>
<script type="text/javascript">
$(function () {
$('#canvas1').sketch();
});
</script>
This is it. I am wondering if there is some workaround to keep the history of the various drawings. I am open to any suggestion or to know if you have found a similar problem.
To actually fix this bug, you need to change a few different lines of code. The plugin is checking during each event if the user is using a desktop (mousedown, mousemove, mouseleave, mouseup) or a mobile (touchstart, touchend, touchcancel). To determine the mouse/finger position to draw the next point, jQuery's e.pageX is being called. This is directly defined in mobile, so the plugin is checking for mobile and if mobile is detected, saving the user's finger position defined by e.originalEvent.targetTouches[0].pageX. The problem comes from touchend or touchcancel because e.originalEvent.targetTouches[0] is not defined for these two events, so e.originalEvent.targetTouches[0].pageX returns an error and the entire canvas is redrawn. To fix this, you need to edit 2 lines of code around line 100/101.
Replace
e.pageX = e.originalEvent.targetTouches[0].pageX;
e.pageY = e.originalEvent.targetTouches[0].pageY;
With
if (e.originalEvent.targetTouches[0] !== undefined && e.originalEvent.targetTouches[0].pageX!==undefined){
e.pageX = e.originalEvent.targetTouches[0].pageX;
}
if (e.originalEvent.targetTouches[0] !== undefined &&e.originalEvent.targetTouches[0].pageY){
e.pageY = e.originalEvent.targetTouches[0].pageY;
}
See the answer below for more details.
Sketch.js pageX undefined error
See the workaround posted by leonth here: https://github.com/intridea/sketch.js/issues/1
I made a jsFiddle with the workaround and it now works for me on mobile devices:http://jsfiddle.net/ezanker/4hfkb/5/
switch (e.type) {
case 'mousedown':
case 'touchstart':
if (this.painting) { //add
this.stopPainting(); //add
} //add
this.startPainting();
break;
...
I'm really struggling on an Android app in Phonegap and JQuery.
All I want to do is bind a touchmove to an element and then check the X and Y coordinates as I move my finger (a drag, basically)
$('#someElm').bind('touchmove',function(event){
//Code here..!
});
The touchmove fires when I touch the screen, but then I don't really know what the objects of the event are - I've tried event.screenX, event.pageX, but the don't work.
Any ideas?
Here the reference for mobile safari (android is basically the same):
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html
what you want is:
var x = event.touches[0].pageX;
var y = event.touches[0].pageY;
If you are running on android you also need to cancel the touchmove event to get new ones while touching. Don't ask me why...
In Internet Explorer 7 body onmousemove or document.onmousemove events only seem to fire while the mouse is inside the browser window, not when it's outside. Yet in Firefox the onmousemove event is called correctly when I move outside of the browser window.
How can I setup an event to be called outside of the browser window in IE?
Google Maps does this in IE. If you hold the mouse button down and move the mouse outside of the browser window you can see that the map still moves.
(Note: this answer refers exclusively to the "standard" drag implementation of mousedown -> mousemove -> mouseup. It is not applicable to the HTML5 drag specification).
Allowing dragging outside the browser window is an old problem that different browsers have solved in two ways.
With the exception of IE, when a user initiates a drag operation via mousedown browsers have done something neat (and this is all just from observation): a kind of statemachine kicks in to handle the special case of mouse movements outside the window:
User triggers mousedown event inside the document
User triggers mousemove event. Event fires even when triggered from outside the document (i.e. the window)
User triggers mouseup event (inside or outside the document). mousemove events triggered from outside the document no longer fire
IE and older versions of Firefox [as late as 2.0.20] don't exhibit this behavior. Dragging outside the window just doesn't work1.
The problem for IE and FF2 actually lies in whether an element is "selectable" or not (See here and here). If a dragging implementation does nothing (thereby allowing selection by the mouse), then said implementation does not have to account for movements outside the window; the browser will go ahead and fire mousemove properly and the user is allowed to drag freely outside the window. Nice.
However by letting the browser decide what to do on mousemove you get this effect where the browser thinks the user is trying to "select" something (eg the element), as opposed to moving it, and proceeds to frantically try to highlight the element or text therein as the mouse crosses in or out of the element during the drag.
Most drag implementations I've seen do a little trick to make the element being dragged "unselectable", thereby taking full control of mousemove to simulate dragging:
elementToDrag.unselectable = "on";
elementToDrag.onselectstart = function(){return false};
elementToDrag.style.userSelect = "none"; // w3c standard
elementToDrag.style.MozUserSelect = "none"; // Firefox
This works nicely, but breaks dragging outside the window. 2
Anyway, to answer your question, to get IE (all versions) to allow dragging outside the window, use setCapture (and inversely releaseCapture when the mouse is released).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple drag demo</title>
<style>
#dragme {
position:absolute;
cursor:move;
background:#eee;
border:1px solid #333;
padding:10px;
}
</style>
<script>
function makeDraggable(element) {
/* Simple drag implementation */
element.onmousedown = function(event) {
document.onmousemove = function(event) {
event = event || window.event;
element.style.left = event.clientX + 'px';
element.style.top = event.clientY + 'px';
};
document.onmouseup = function() {
document.onmousemove = null;
if(element.releaseCapture) { element.releaseCapture(); }
};
if(element.setCapture) { element.setCapture(); }
};
/* These 3 lines are helpful for the browser to not accidentally
* think the user is trying to "text select" the draggable object
* when drag initiation happens on text nodes.
* Unfortunately they also break draggability outside the window.
*/
element.unselectable = "on";
element.onselectstart = function(){return false};
element.style.userSelect = element.style.MozUserSelect = "none";
}
</script>
</head>
<body onload="makeDraggable(document.getElementById('dragme'))">
<div id="dragme">Drag me (outside window)</div>
</body>
</html>
Demo can be seen here.
This is exactly what Google maps does (as I discovered since reverse engineering google maps back in 2004 when it was first released).
1I believe it actually only breaks when initiating a drag operation (i.e. mousedown) on a textnode. Element/container nodes do not exhibit the same behavior and can be dragged around inside or outside the document, provided the user moused down on an "empty " portion of the element
2Again, for drag initiations on textnodes.
You can look at the code here, as it seems to work in IE8 and FF3.5. If you can understand his code great.
http://www.walterzorn.de/en/dragdrop/dragdrop_e.htm