I need to record the mouse position every n seconds, but jQuery seems to only offer ways to retrieve the x and y position values when there is a mouse event. Can this be done with setInterval()?
EDIT - I'm thinking to set a setInterval() to increase a value every n seconds (say 'i'), and then on mousemove record the current i alongside the x and y values. There really should be an easier way than this though
What you can do is bind a function to the mousemove event on the document, and inside the function set a global variable with the mouse position. then every interval you can read the mouse position.
example:
$(document).ready(function () {
var mousePosition = {'x': 0, 'y': 0};
$(document).bind('mousemove', function(e) {
mousePosition = {'x': e.pageX, 'y': e.pageY};
});
setInterval(function () {
// do something with mousePosition
}, 1000);
});
This should help.
http://jsbin.com/owifu3/
http://docs.jquery.com/Tutorials:Mouse_Position
Might as well paste the code...
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
$(document).mousemove(function(e){
$('#status').html(e.pageX +', '+ e.pageY);
});
})
</script>
<body>
<h2 id="status">
0, 0
</h2>
</body>
</html>
Here is a solution that doesnt use jQuery. Although I do prefer the jq option:
http://www.codelifter.com/main/javascript/capturemouseposition1.html
You could make usage of the .timeStamp property which is available in the event object:
var stored = 0;
$( document ).mousemove(function( event ) {
if( event.timeStamp - stored >= 2000 ) {
console.log('stored!');
stored = event.timeStamp;
}
});
Of course, that technique would only store data while moving the mouse. On idle time, nothing happens. If you also need idle position's you really need to go with an interval timer.
jQuery(document).ready(function(){
var myx, myy;
$(document).mousemove(function(e){
myx = e.pageX;
myy = e.pageY);
});
window.setInterval(function() {
$('#status').html('mouse position is '+myx+','+myy);
}, 1000);
});
I had to do something like that once, and I used this kind of a hacky solution:
document.onmousemove=function(){
x = e.pageX;
y = e.pageY;
}
setInterval(function(){
array.push(x+','+y);
},'1000');
The length of this array will be your i. You can get the individual terms using the split method.
Demo that just prints them to a div
Two solutions, neither of which uses Jquery:
http://javascript.about.com/library/blmousepos.htm
http://hartshorne.ca/2006/01/23/javascript_cursor_position/
Related
I'm currently using the following javascript as shown below.
It's working well when I place just text within the div .image_scroll_3 but as soon as I insert images the scroll glitches and won't move past the top of the image.
Any advice would be much appreciated
JS
<script>
(function($, undefined) {
$.fn.loopScroll = function(p_options) {
var options = $.extend({
direction: "upwards",
speed: 60
}, p_options);
return this.each(function() {
var obj = $(this).find(".image_scroll_2");
var text_height = obj.find(".image_scroll_3").height();
var start_y, end_y;
if (options.direction == "downwards") {
start_y = -text_height;
end_y = 0;
} else if (options.direction == "upwards") {
start_y = 0;
end_y = -text_height;
}
var animate = function() {
// setup animation of specified block "obj"
// calculate distance of animation
var distance = Math.abs(end_y - parseInt(obj.css("top")));
//alert("animate " + obj.css("top") + "-> " + end_y + " " + distance);
//duration will be distance / speed
obj.animate(
{ top: end_y }, //scroll upwards
1500 * distance / options.speed,
"linear",
function() {
// scroll to start position
obj.css("top", start_y);
animate();
}
);
};
obj.find(".image_scroll_3").clone().appendTo(obj);
$(this).on("mouseout", function() {
obj.stop();
}).on("mouseout", function() {
animate(); // resume animation
});
obj.css("top", start_y);
animate(); // start animation
});
};
}(jQuery));
$("#example4").loopScroll({ speed: 700 });
</script>
I think the problem is that your text_height is calculated before the images are actually loaded inside your .image_scroll_3 elements. So you'll need to wait for the images to load.
Put your loopScroll call inside a $(window).load like so:
$(window).load(function(){
$('#example4').loopScroll({speed:700});
});
That massive glitch should now be gone as the fix above should have helped mitigate it.
However, there is still some unwanted jank / stutter (don't want to use the word glitch again, lets keep it reserved for the initial problem) in movement of all images if you notice and I am guessing that is probably because we are animating the whole thing too fast. Passing in speed like 100 or 200 resolves that but this is not really a solution because, ideally, you should be able to put in any speed value and it should just produce smooth animations out of it.
I am working on exactly the same thing but before that, I want to know if the above fix for the glitch helps you and we are finally done with it? Let me know.
Update:
Here is my version that I spoke of earlier, for your perusal.
Because all you are trying to do is loop images in a very linear fashion, I, for one, do not see the need to rely on animate() function of jQuery. There is requestAnimationFrame API that I have leveraged instead. In fact, in my demonstration below I have completely abandoned jQuery in favour of vanilla JavaScript only because I kept finding alternatives to pretty much everything we needed to do in this demo. But of course, this is also a very subjective matter; a taste thing; so if you want to go with jQuery, then by all means.
Another fundamental change I brought is rather than updating top values, I have resorted to updating translateY values.
Take a look at this jsFiddle and let me know if it fits your needs.
JavaScript code of which is as belows:
// [http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/]
window.requestAnimFrame=(function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(callback){window.setTimeout(callback,1000/60);};})();
var main=null;
var imageScroll2=null;
var imageScroll3=null;
var totalHeight=null;
var initY=null;
var destY=null;
var currY=null;
var increment=null;
var direction=null;
var UP=null;
var DOWN=null;
var isPlaying=null;
function init(){
main=document.getElementById('example4');
imageScroll2=main.getElementsByClassName('image_scroll_2')[0];
imageScroll3=main.getElementsByClassName('image_scroll_3')[0];
totalHeight=imageScroll3.clientHeight;
UP='upwards';
DOWN='downwards';
isPlaying=true;
direction=UP;
increment=10;
if(direction===DOWN){
initY= -totalHeight;
destY=0;
}else{
initY=0;
destY= -totalHeight;
}
currY=initY;
imageScroll2.appendChild(imageScroll3.cloneNode(true));
if(imageScroll2.addEventListener){
imageScroll2.addEventListener('mouseover',function(){isPlaying=false;},false);
imageScroll2.addEventListener('mouseout',function(){isPlaying=true;},false);
}else{
imageScroll2.attachEvent('onmouseover',function(){isPlaying=false;});
imageScroll2.attachEvent('onmouseout',function(){isPlaying=true;});
}
requestAnimFrame(render);
}
function render(){
if(isPlaying){
imageScroll2.style.transform='translate(0px,'+currY+'px)';
if(direction===DOWN){
currY+=increment;
if(currY>=destY){currY=initY;}
}else{
currY-=increment;
if(currY<=destY){currY=initY;}
}
}
requestAnimFrame(render);
}
//
init();
I want to keep my table move when I click, for this I try this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".next").click(function() {
var position = $(".slide_table").position().left;
var movepos = parseInt(position) - parseInt(450) + 'px';
$('.slide_table').css('margin-left',movepos);
});
});
</script>
Prev
<div class="slide">
<table class="slide_table" style="border:1px solid gray; background:#CCCCCC">
When I click first time it works, So how can I keep it unless the right position is 0 or less than 450.
Thanks for help....
Let's say you want to move 10 px to the right for every click on the button, the code would be:
<script>
$(document).ready(function(){
$(".next").click(function() {
var position = $('.slide_table').css('margin-left');
var movepos = position + 10;
$('.slide_table').css('margin-left',movepos);
});
});
</script>
You don't need to add the string 'px' at the end of the distance to move.
I am not sure if I understand your question correctly but:
If you want to move the table 450px (more) to the right side every time you click on the ".next"-button, then you can do that as follows:
$(document).ready(function(){
$(".next").click(function() {
var posLeft = $('.slide_table').position().left;
var newPosLeft = posLeft - 450;
$('.slide_table').css('left', newPosLeft + 'px');
});
});
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 know I can use mousedown selection for it, but I am wanting the clicked on sprite to follow my mouse, there is a mousetracker function of sorts mentioned in the api; but unfortunately there are no examples of this other than stating that it allows mouse detection.
//add mousedown events for yarnballs.
$(".gQ_sprite").mousedown(function() {
clickedDivId = $(this).attr('id');
if(clickedDivId.charAt(8) == "-")
{
currentClickedDivId = clickedDivId
$(document).mousemove(function(e){
spriteXPosition = e.pageX
spriteYPosition = e.pageY
});
}
});
I have the location of the mouse selected, just not sure how to get the selected sprite to follow it.
any help would be greatly appreciated.
What Mati said is correct: $.gQ.mouseTracker allows you to access the mouse's state outside of an event handler. The example he gives is correct but it can't be used to move a gQ object (sprite, tile-map or group) around because you'r not allowed to use the .css() function for those. Doing so will break collision detection.
If what you want is to move a gQ object you should do this instead :
$('#' + currentClickedDivId).xy($.gQ.mouseTracker.x, $.gQ.mouseTracker.y);
But since this should be done in a periodical callback, the smoothness of the dragging will depend on the refresh rate.
If you want to use event handlers instead you could modify you code to look like this (without using the mouseTracker):
var clickedDiv;
var clickedDivOffset = {x:0, y:0};
$(".gQ_sprite").mousedown(function(e) {
clickedDiv = $(this);
clickedDivOffset = {
x: e.pageX - clickedDiv.x() - $().playground().offset().left,
y: e.pageY - clickedDiv.y() - $().playground().offset().top
};
});
$(".gQ_sprite").mouseup(function() {
clickedDiv = false;
});
$().playground().mousemove(function(e) {
if(clickedDiv){
clickedDiv.xy(
e.pageX - clickedDivOffset.x,
e.pageY - clickedDivOffset.y,
);
}
});
This will implement a drag-n-drop effect. If you want the clicked element to stick to the mouse you will have to slightly adapt the code but the basics will remain the same.
According to the documentation:
If the mouse tracker is enabled you can check the state of the mouse at anytime by looking into the object $.gQ.mouseTracker where x and y contain the position of the mouse and 1, 2 and 3 a boolean value where true means that the first, second or thrid button is pressed.
Observe the output of:
$("#playground").playground({ refreshRate: 60, mouseTracker: true });
$.playground().startGame();
$.playground().registerCallback(function(){
console.log( $.gQ.mouseTracker );
}, 1000);
To make those divs actually follow the cursor, you have to use .css()
$('#' + currentClickedDivId).css({
top: $.gQ.mouseTracker.y + 'px',
left: $.gQ.mouseTracker.x + 'px'
});
I'm trying to hide the mouse if it hasn't moved for a period of time.
This is the code I'm using:
$(document).ready(function() {
var j;
$(document).mousemove(function() {
clearTimeout(j);
$('html').css({cursor: 'default'});
j = setTimeout('hide();', 1000);
});
});
function hide() {
$('html').css({cursor: 'none'});
}
When the hide() function is called the cursor is hidden, but unhides a split second later. Any help is appreciated.
Your initial problem is that the hiding of the mouse triggers mousemove and thus immediately resets it back to default. So you could solve that like this...
var justHidden = false;
$(document).ready(function() {
var j;
$(document).mousemove(function() {
if (!justHidden) {
justHidden = false;
console.log('move');
clearTimeout(j);
$('html').css({cursor: 'default'});
j = setTimeout('hide();', 1000);
}
});
});
function hide() {
$('html').css({cursor: 'none'});
justHidden = true;
}
...BUUUUUT...
You face a problem here which at the moment seems unsolvable to me. That is, a hidden mouse does not trigger mousemove ever, so once it's hidden you will not be able to unhide it as far as I can tell.
I'll keep investigating to see if there's a solution I'm missing.
I found this thread when I was looking for solution for this challenge in 2019. Based on answer here and in 'Hiding the mouse cursor when idle using JavaScript' I made a slightly different solution:
var DEMO = {
INI: {
MOUSE_IDLE: 3000
},
hideMouse: function() {
$("#game").css('cursor', 'none');
$("#game").on("mousemove", DEMO.waitThenHideMouse);
},
waitThenHideMouse: function() {
$("#game").css('cursor', 'default');
$("#game").off("mousemove", DEMO.waitThenHideMouse);
setTimeout(DEMO.hideMouse, DEMO.INI.MOUSE_IDLE);
},
showMouse: function() {
$("#game").off("mousemove", DEMO.waitThenHideMouse);
$("#game").css('cursor', 'default');
},
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
This simple and clear example gives you the option to start hiding mouse (DEMO.hideMouse()) and also to turn this off (DEMO.showMouse()). It does not create multiple events on same element. This example shows hiding mouse pointer over #game div element. Just change this to the div of your choice or body.
As of fully updated Chrome and FF in October 2019: it works on both.
I'm 8 years late but I have a solution:
• First of all download an image of a cursor from the internet or copy my svg code:
<svg id="cursor" width="20" height="20" viewBox="0 0 95 92" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M84.6925 46.0105L40.25 20.3516C35.25 17.4648 29 21.0733 29 26.8468L29 78.1645C29 84.9879 37.3721 88.2664 42.0056 83.2575L58.1424 65.8134C58.4853 65.4427 58.9324 65.1846 59.4249 65.0729L82.6003 59.8201C89.255 58.3118 90.6017 49.4222 84.6925 46.0105Z" fill="black" stroke="white" stroke-width="5"/></svg>
And add it to your html file.
•Of course, if you want to made it in jQuery, you need to add this script above your js file:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
•Then add this (in your JavaScript file):
let timedelay = 1;
function delayCheck() {
if (timedelay == 2) { //Here you can change this value which changes the time it takes the mouse to hide
$('#cursor').fadeOut();
timedelay = 1;
}
timedelay += 1;
}
$(document).mousemove(function() {
$('#cursor').fadeIn();
timedelay = 1;
clearInterval(_delay);
_delay = setInterval(delayCheck, 1000);
});
_delay = setInterval(delayCheck, 1000);
Now you'll see just a cursor on the top left of the screen that does what you asked but it's not YOUR cursor, to replace the cursor with the svg do the following:
//in the same js file as before
$(document).mousemove(function (e) {
$('#cursor').offset({
left: e.clientX,
top: e.clientY
});
});
/* on the css */
html {
cursor: none;
}
If it doesn't work, make sure that you put the jquery file ABOVE the file you wrote.
I hope I have helped someone!
You might want to check if this really works, here's the demo.
(Sorry if my English was bad, I'm italian).
(Tip) You will notice that there are two identical functions, if you want to merge them just replace them with this:
$(document).mousemove(function(e) {
$('#cursor').fadeIn();
timedelay = 1;
clearInterval(_delay);
_delay = setInterval(delayCheck, 1000);
$('#cursor').offset({
left: e.clientX,
top: e.clientY
});
});