I'm having a problem in IE 9 (haven't tested 8), What the code is supposed to do is detect whether or not the mouse was dragged after clicking on a certain element. The problem is that IE 9 automatically enters the $(window).mousemove event handler even though I don't move the mouse. Works Fine in Chrome and FF.
$(Element).mousedown(function() {
$(window).mousemove(function() {
isDragging = true;
$(window).unbind("mousemove");
});
}).mouseup(function() {
$(window).unbind("mousemove");
});
You should be only starting a drag after the mouse has moved a certain minimum distance. To do that, record the mouse position in the mousedown handler and then in mousemove, only start your drag when the mouse has moved a minimum distance.
$(Element).mousedown(function(e) {
var x = e.clientX;
var y = e.clientY;
var minMovement = 3;
$(window).mousemove(function(e) {
if (Math.abs(e.clientX - x) > minMovement || Math.abs(e.clientY - y) > minMovement) {
isDragging = true;
$(window).unbind("mousemove");
}
});
}).mouseup(function() {
$(window).unbind("mousemove");
});
FYI, some mice can record very, very tiny movements (less than one pixel on the screen) so it's likely that the mouse does actually move after you press the mouse down and IE is probably just reporting that movement. Other browsers may wait until the mouse moves a whole pixel. In any case, if you require a minimum number of pixels of movement then you won't have this issue.
Because the movement of the mouse is so minute with a laser mouse I changed your method a bit to better suit my need of monitoring just the fact of weather or not the mouse is moving:
$(window).mousemove(function (e) {
var smallNo = 0;
var x = e.clientX;
var y = e.clientY;
var minMovement = 1;
if ((x - smallNo) > minMovement || (y - smallNo) > minMovement) {
countDownTime = logoutTime;
}
});
Even though the mousemove event is firing constantly the coordinates do not change unless you physically move your mouse. I used that to figure out weather or not the mouse had moved or not.
Related
I'm working on a javascript draggable interaction that has to work with both mouse and touch input and does not have any dependencies. So far it works fine on desktops and mobiles.
Except Firefox for Android shows the following behaviour:
page is not scrolled: fine
page is scrolled vertically: element can only be dragged horizontally
page is scrolled horizontally: element can only be dragged vertically
page is scrolled both vertically and horizontally: element can't be
dragged at all
scroll page back to the very top and left: element can be dragged as
expected again
The code:
var evtStart, evtMove, evtEnd;
if ('ontouchend' in window) {
evtStart = 'touchstart';
evtMove = 'touchmove';
evtEnd = 'touchend';
} else {
evtStart = 'mousedown';
evtMove = 'mousemove';
evtEnd = 'mouseup';
}
// BASIC DRAGGABLE INTERACTION
// No further configuration, just drags ....
var panel = document.querySelector('.testpanel');
panel.addEventListener(evtStart, function(e) {
e.preventDefault();
var styles = window.getComputedStyle(panel),
left = parseFloat(styles.left), // css left on mousedown
top = parseFloat(styles.top), // css top on mousedown
psx = e.pageX || e.touches[0].pageX, // pointer x on mousedown
psy = e.pageY || e.touches[0].pageY; // pointer y on mousedown
// function actually draging the elmt
var drag = function (e) {
e.preventDefault();
var pmx = e.pageX || e.touches[0].pageX, // current pointer x while pointer moves
pmy = e.pageY || e.touches[0].pageY; // current pointer y while pointer moves
panel.style.left = left + (pmx - psx) + 'px'; // set new css left of elmt
panel.style.top = top + (pmy - psy) + 'px'; // set new css top of elmt
};
panel.addEventListener(evtMove, drag);
panel.addEventListener(evtEnd, function () {
panel.removeEventListener(evtMove, drag);
});
});
Demo page
Again, it works fine on desktop and mobiles except FF for Android.
Why does it not work on FF for Android? Is it something in my code or is it a bug in FF? So far I could not find anything helpful.
I would greatly appreciate any help.
Finally I found it myself:
Just swap pageX/pageY with clientX/clientY and it works in FF for Android as well.
I guess the implementation in FF for Android is somewhat different, pageX/pageY are not finalized standards yet according to MDN.
I am having trouble trying to get a canvas based square to follow the mouse. Here is the method I am trying to use:
canvas.addEventListener('mousedown', function(event) {
document.getElementById('debug3').innerHTML = 'works';//Just debug stuff.
for (i=0;i>10;i++) { //to loop through squares.
document.getElementById('debug5').innerHTML = 'works';
if (mouseX >= square[i].x - 20 && mouseX <= square[i].x + 40 && mouseY >= square[i].y - 20 && mouseY <= square[i].y + 40) {//To see if mouse coordinates equal square ones.
square[i].x = mouseX;//Just defining that mouse coordinates equal square ones.
square[i].y = mouseY;
document.getElementById('debug6').innerHTML = 'works';
}
}
}, true);
I have ten squares I want to choose from, so I put they're coordinates in a array. The -20 and +40 are so I can have a imaginary square that signifies the range which the click is accepted (It is very hard to click on one pixel). These squares are supposed to be animated, so I have a range twice their area (the squares have an area of 400 pixels). The for loop is to loop through the possible squares the user choose. After that, it's pretty obvious.
My problem is that that doesn't happen. I stopped animating the squares to make them easier to click for me, but the code just isn't working. According to my debug statements, when I press, the event listener works. That's the first debug statement. The thing is that the for loop never gets triggered and my second debug statement never works. Therefore, nor does my third (you might see them labelled 3, 5, and 6: the first two are my mouse coordinates and the fourth is the mouse up event, which has the same problem).
EDIT: Here is the code that defines mouseX and mouseY.
function initCanvas() {
context.canvas.addEventListener('mousemove',function(event) {
var mouseX = Math.floor(event.clientX);
var mouseY = Math.floor(event.clientY);
document.getElementById('debug1').innerHTML = mouseX;
document.getElementById('debug2').innerHTML = mouseY;//test debug stuff
});
}
window.addEventListener('load', function(event) {
initCanvas();
});
I've tested this. It works. It is not the problem.
without jquery
basically what I am looking for is the ability to see if the mouse is over a div when a countdown finishes
if the user is over the div then perform action for that div
onmouseover only triggers when the mouse crosses the threshold of the div, if the mouse hasn't moved it wouldn't trigger, so that wouldn't work
I need to determine if the mouse is currently over a div at a specific point in time, if it has moved or not from the starting point
all of my hunting has only found onmousover, and nothing to see if the mouse just happens to be there to begin with
I don't have the javascript skills to determine overall coords of div, then map mouse coords and see if it fits there... which is what I believe I need to do
After reading the second answer (the one with millions of a elements) on this SO question, I've came up with this method works without moving the mouse on page load, without involving millions of elements.
HTML
<div id=t></div>
CSS
#t {
/* for illustrative purposes */
width: 10em;
height: 5em;
background-color: #0af;
}
#t:hover {
border-top-style: hidden;
}
JavaScript
document.addEventListener('click', function () {
var c = window.getComputedStyle(document.getElementById('t')).getPropertyValue('border-top-style');
if (c === 'hidden') {
alert('Mouse in box');
} else {
alert('Mouse not in box');
}
}, false);
As stated earlier, bind to the finish event of your countdown instead of the click event on the document.
You may also use any CSS style that's changed on :hover, I chose border-top-style as it is conspicuous. If you're using a border, choose something else.
Here's a jsFiddle.
set a flag to true onmouseover and to false onmouseleave. when countdown finishes if flag is true then it is over element.
HTML
<div id="div-name">the section of the code i am working with has a countdown timer, when it reaches 0 i need to know if the mouse is over a specific box</div>
<button id="notification" onclick="javascript: letsCountIt(5);">click to start countdown</button>
JS
window.ev = false;
document.getElementById('div-name').onmouseover = function () {
window.ev = true;
console.log(window.ev);
}
document.getElementById('div-name').onmouseout = function () {
window.ev = false;
console.log(window.ev);
}
window.letsCountIt = function (cdtimer) {
cdtimer--;
document.getElementById('notification').innerHTML = cdtimer;
if (cdtimer == 0) {
if (window.ev === true) {
alert('over');
} else {
alert('not over');
}
} else {
setTimeout(function(){letsCountIt(cdtimer);}, 1000);
}
}
Look into document.elementFromPoint . When you pass an x,y to elementFromPoint, it will return whatever element (or <body>, if no other specific element) is at that point. You can easily check if this element is the element you want.
The problem then is finding out what point your mouse is at. How to get the mouse position without events (without moving the mouse)? seems to say - don't. At least use mouseMove to track the cursor. The linked question gives examples of how to do so. (Look to the lower scoring answers, as the higher ones only got points for being snarky.)
Just want to say that, I think jQuery's mouseenter and mouseleave events would make this a lot easier, but if you can't use them, maybe this will help you.
Depending on how your page is laid out, this may not be too difficult. You can get the position of your element using the following. Quoting from another answer
element.offsetLeft and element.offsetTop are the pure javascript
properties for finding an element's position with respect to its
offsetParent; being the nearest parent element with a position of
relative or absolute
So, if your element is positioned relatively to the body, so far so good (We don't need to adjust anything).
Now, if we attach an event to the document mousemove event, we can get the current coordinates of the mouse:
document.addEventListener('mousemove', function (e) {
var x = e.clientX;
var y = e.clientY;
}, false);
Now we just need to determine if the mouse falls within the element. To do that we need the height and width of the element. Quoting from another answer
You should use the .offsetWidth and .offsetHeight properties. Note
they belong to the element, not .style.
For example:
var element = document.getElementById('element');
var height = element.offsetHeight;
var width = element.offsetWidth;
Now we have all the information we need, and just need to determine if the mouse falls within the element. We might use something like this:
var onmove = function(e) {
var minX = element.offsetLeft;
var maxX = minX + element.offsetWidth;
var minY = element.offsetTop;
var maxY = minY + element.offsetHeight;
if(e.clientX >= minX && e.clientX <= maxX)
//good horizontally
if(e.clientY >= minY && e.clientY <= maxY)
//good vertically
}
This code works, but the mouse has to be moved once after page load.
var coords;
var getMouseCoordinates = function (e) {
'use strict';
return {
x: e.clientX,
y: e.clientY
};
};
document.addEventListener('mousemove', function (e) {
coords = getMouseCoordinates(e);
}, false);
document.addEventListener('click', function () {
var divCoords = document.getElementById('t').getBoundingClientRect();
if (coords.x >= divCoords.left && coords.x <= divCoords.right && coords.y >= divCoords.top && coords.y <= divCoords.bottom) {
alert('Mouse in box');
} else {
alert('Mouse not in box');
}
}, false);
You wouldn't bind to the click event of document, but rather the finish event of your countdown.
Here's an example. Try clicking in the output window.
You don't need any coordinates or mouse events, if you know a selector for that element:
if (document.querySelector('#elementSelector:hover')) {
alert('I like it when you touch me!');
}
I have made something like a drag-and-drop element with JS.
function Draggable(elm) {
this.d = elm;
this.style.position = "absolute";
elm.onselectstart = elm.ondragstart = function() { return false; }
elm.addEventListener('mousedown', this._start.bindAsEventListener(this), false);
}
Draggable.prototype._start = function (event) {
this.deltaX = event.clientX;
this.deltaY = event.clientY;
if (!this.dm) {
this.dm = document.createElement("div");
this.dm.setAttribute("class", "dragger");
this.dm.onmousemove = this._move.bindAsEventListener(this);
this.dm.onmouseup = this._stop.bindAsEventListener(this);
this.dm.onselectstart = RetFalse;
this.dm.ondragstart = RetFalse;
}
document.body.appendChild(this.dm);
this.lastX = this.lastY = 0;
this.ondragstart();
return false;
}
Draggable.prototype._move = function (event) {
var newx = (event.clientX - this.deltaX);
var newy = (event.clientY - this.deltaY);
if (newx < this.x0) newx = this.x0;
if (newx > this.x1) newx = this.x1;
if (newy < this.y0) newy = this.y0;
if (newy > this.y1) newy = this.y1;
this.d.style.left = newx + "px";
this.d.style.top = newy + "px";
if (window.getSelection) window.getSelection().removeAllRanges(); else document.selection.empty();
return false;
}
Draggable.prototype._stop = function (event) {
document.body.removeChild(this.dm);
return false;
}
The "dragger" is transparent DIV that fills the whole page, to prevent the dragged target from losing capture when mouse moves too fast. (If I could capture the mouse, I would need it.)
.dragger {
cursor:move;
position:absolute;
width:100%;height:100%;
left:0px;top:0px;
margin:0px;padding:0px;
z-index:32767;
background: transparent;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
}
However, if I:
Press left mouse button on the draggable element
Drag it outside the client area (outside the brower window)
Release mouse button
The element will lose the capture, so that if I move the cursor back,
without having receive a mouse-up event, the element follows the cursor everywhere.
(until you click to make a mouse-up again.)
Just now, I saw it perfectly done on this website: (www.box.net)
Even if you release mouse button outside the browser window, the blue selecting box can still resize when the cursor moves, and disappear when button is released.
But I cannot receive any mousemove or mouseup when cursor is outside.
What API can I use to capture the mouse?
As you can see, I'm using Chrome Browser.
It is said that there's no API like HTMLElement.setCapture in non-IE browser.
This page uses jQuery, but what does jQuery use?
What is the raw javascript Code to do that?
Instead of creating a big, transparent element (dm), bind your mouse events to window.
It gets mouse events everywhere on the page; during dragging you'll keep getting mousemove events even if the cursor goes outside the window, as well as a mouseup if you release the mouse button outside the window.
P.S. If you call .preventDefault() on the mousedown event, the browser won’t select any text and you won’t have to clear the selection on mousemove.
Although it is a little outdated (FF now supports setCapture), I found this article to be extraordinarily helpful. The basis of the fix goes something like this:
var dragTarget = element.setCapture ? element : document; // setCapture fix
I've set up this little example. The javascript is copied straight from a webpage I'm building for a client where it works perfect*. Unfortunately I haven't been able to find a fix for draggable content inside an iframe, so it will still appear broken in Chrome if viewed at jsFiddle, Codepen, etc. You'll have to trust me that it works (or try it out yourself). If anyone knows of a fix for this iframe issue, please share.
*in Chrome, Safari and FF, I haven't tested in Opera or IE yet
If I have a div that is a 5x5 square or something. I want to be able to click on it, then while holding down the mouse, move it in a direction, and upon release of the mouse, have the div fly towards the direction i "flicked". How can I accomplish this with jquery or javascript? Not sure if an algorithm or logic is behind this.
From a conceptual perspective (I'll be beaten with actual code no doubt shortly) I would register the mouse coordinates on MouseDown, and compare them against the mouse coordinates on MouseUp to determine the angle at which to move the div (this would allow the DIV to continue moving in the correct direction, even when the MouseUp was close to the DIV).
The easier way would be to just move the square towards the MouseUp coordinates (i.e. mouse down coordinates don't really matter in a small DIV), but this doesn't work as well if the MouseUp is very close to the MouseDown.
Either way, use something like this answer (How to make a div or object gradually move to point of mouseclick with javascript?), except on MouseUp/MouseRelease instead of click, ideally towards a projected point (along the line between MouseDown and MouseUp at a specified distance).
Edit
I've included a Prototype example below (it's very rushed and could use plenty of optimisations + clearer concept on the differences between Page/Graph y-axis, as well as some better handling of steep slopes, as well as calculating distance to fling based on distance between mousedown/mouseup as fauxtrot mentions in comments, as well as perhaps disabling fling after the first fling as you can keep "flinging it around" at the moment, as well as "out of bounds" checks and perhaps reverse bouncing off the edges).
Running Example: http://jsfiddle.net/9B9sA/
HTML
<div id="bluebox"
style="width:100px;
height:100px;
background-color:blue;
position:absolute;
left:300px;
top:300px;"> </div>
jQuery (including jQuery UI for animate)
var startDownX, startDownY;
$(document).ready(function() {
/* Stop default Firefox etc. drag */
$(document).bind("dragstart", function() {
return false;
});
/* Capture start of flings */
$('#bluebox').mousedown(function (event) {
startDownX = event.pageX;
startDownY = event.pageY;
});
/* Work out fling direction on end of fling */
$(document).mouseup(function(event){
/* Page y-axis is different from graph */
var rise = -(event.pageY - startDownY);
var run = event.pageX - startDownX;
var newX = $('#bluebox').position().left;
var newY = $('#bluebox').position().top;
var distanceToFling = 100;
if (run == 0 || Math.abs(rise/run) > 3) {
if (rise > 0) {
newY -= distanceToFling;
} else if (rise < 0) {
newY += distanceToFling;
}
}
else {
if (run > 0) {
newX += distanceToFling;
newY -= (rise/run) * distanceToFling;
}
else {
newX -= distanceToFling;
newY += (rise/run) * distanceToFling;
}
}
$('#bluebox').animate({
left: newX,
top: newY
}, 1000);
}); });
Jquery is your friend, here is a good plugin, check it out