How can I create a grid (10X10) in a webpage and allow an user to click any position in the grid and recording the (x,y) position in one-decimal approx such as covering the values 0.0~10.0 or 0.1~9.9?
Thanks!
Use a <canvas> for the grid, and attach a click event listener.
You can record mouse clicks using the clientX and clientY properties of the mouse event object:
document.addEventListener('click', function(event){event.clientX;event.clientY;}, false);
The above code is just a demonstration, it isn't even cross browser compatible. event.clientX and event.clientY hold the mouse coordinates.
demo
I used the jQuery library.
var boxX = 0;
var boxY = 0;
var box = '<div class="box" />'; // define the .box element
for(var i = 0; i<100;i++){ // create 100 boxes
$('#grid').append(box);
}
$('.box').on('click',function(){
boxX = $(this).position().left;
boxY = $(this).position().top;
$(this).text('X='+ boxX +' , Y='+ boxY);
});
Instead of .position() (to get the element position from the parent element) you can use .offset() to get the element offset from window boundaries.
Related
A DIV can be resize using CSS like this
resize: both;
overflow: auto;
So, when you mouse over the DIV , you will get the resize cursor on the lower right corner.
I tried to detect the cursor change to "resize" in Java Script with no luck so far. I tried to log the cursor style with this code on a "click event" when the cursor change to "resize" like this:
console.log(document.body.style.cursor);
console.log(e.target.style.cursor);
The log result id always a " " (empty) instead of a "resize" value.
Thanks in advance for your help.
Yes, I checked, string is empty for e.target.style.cursor. So I propose to solve the issue with a hack. We know, that an area where cursor changes is about 18×18 pixels, so we should detect cursor at this zone.
const textarea = document.querySelector('textarea');
const deltaX = 18;
const deltaY = 18;
const detectionOfCursorInLowerRightCorner = (e) => {
const rect = e.target.getBoundingClientRect();
const x = e.clientX; // Position X of cursor relative to the document.
const y = e.clientY; // Position Y of cursor relative to the document.
// Calculate lower and high edges of the area where cursor changes.
const lowEdgeX = rect.width - deltaX;
const highEdgeX = rect.width;
const lowEdgeY = rect.height - deltaY;
const highEdgeY = rect.height;
const elementCursorX = x - rect.x; // Position X of cursor relative to the element.
const elementCursorY = y - rect.y; // Position Y of cursor relative to the element.
console.log(' ');
console.log(elementCursorX, elementCursorY);
if (elementCursorX > lowEdgeX && elementCursorX <= highEdgeX && elementCursorY > lowEdgeY && elementCursorY <= highEdgeY) {
console.log('here'); // Cursor is in the area.
}
};
textarea.addEventListener('mousemove', detectionOfCursorInLowerRightCorner);
Do not forget do textarea.removeEventListener('mousemove', detectionOfCursorInLowerRightCorner) on element destroy. And define your own CSS class to detect when textarea has properties resize: both; and overflow: auto;.
Thanks for your answer. Indeed, I did something approximative (I skipped the Y axis logic) similar to your solution. On mousemove in the DIV, I consider that resize will occurs if my mouse X position is between the offetWidth-15px and offsetx. If not, I can drag my DIV.
I considered also the resize observer feature, but it was getting too complicated for multiple DIV elements.
The idea is to be add drag/resize events to my DIV elements for editing purpose over a canvas using absolute positioning.
Congratulation for your concise and well formatted answer and the time spent you spent on it.
I'm having problems with using the canvas/mousemove. I want to be able to draw on the entire page whenever the mouse moves with a mousemove draw/paint tool but also still click text links that appear in various other divs. The issue I have is that the canvas which is currently fixed, has a transparent background color and is set to 100% width and height blocks the div underneath with a lower z-index, meaning the links can't be clicked. Using pointer-events:none on the canvas isn't the solution as it disables the mousemove effect. If I make the canvas z-index lower than the div's with the links I want to click, the drawing will just appear outside of the div.
What do I need to add or change to make this work? I basically just want to have a functioning webpage with a mouseover effect that will draw over the page whenever it moves.
Below is the script I'm using. And here's an example http://jsfiddle.net/zAF4d/1/
$(function() {
var letsdraw = false;
var theCanvas = document.getElementById('paint');
var ctx = theCanvas.getContext('2d');
theCanvas.width = window.innerWidth;
theCanvas.height = window.innerHeight;
var canvasOffset = $('#paint').offset();
$('#paint').mousemove(function(e) {
if (letsdraw === true) {
ctx.lineTo(e.pageX - canvasOffset.left, e.pageY - canvasOffset.top);
ctx.stroke();
}
});
$('#paint').mousemove(function(e) {
$('.v').css('left', e.clientX + 'px');
$('.h').css('top', e.clientY + 'px');
letsdraw = true;
ctx.strokeStyle = 'blue';
ctx.lineWidth = 0.5;
ctx.lineCap = 'round';
ctx.beginPath();
ctx.moveTo(e.pageX - canvasOffset.left, e.pageY - canvasOffset.top);
});
$(window).mouseout(function(e) {
// bind to the window mouse up, that way if you mouse up and you're not over
// the canvas you'll still get the release of the drawing.
letsdraw = true;
});
});
You say:
The issue I have is that the canvas which is currently fixed, has a transparent background color and is set to 100% width and height blocks the div underneath with a lower z-index, meaning the links can't be clicked. Using pointer-events:none on the canvas isn't the solution as it disables the mousemove effect. If I make the canvas z-index lower than the div's with the links I want to click, the drawing will just appear outside of the div.
I think you need to either do everything on canvas or use DOM and some sort of CSS tricks/animations.
$(function() {
var letsdraw = false;
var theCanvas = document.getElementById('paint');
var ctx = theCanvas.getContext('2d');
.
.
.
//if your div's are not same every time, determine similar prop so u can pull it here on to a canvas...by'ID' || 'Class' ...etc.
var div = document.getElementByID('div01');
dix.x;
div.y;
div.h;
.
.
.
**etc. or if u cannot for any reason pull actual div, just pass on it parameters here....
then u can use them here...*
like making collision model for drawing line over the top of it...
if (mouse.x > div.x && mouse.x < div.x + div.width && mouse.y > div.y && mouse.y < div.height) {
letsdraw = false;
}
....**within draw function
**'onclick' event listener try **
$(div)onclick function();
if whole div was pulled here then it will open links...but even if u pulled just div's parameters u just pass click coordinates on to div if link coordinates match
$(div)onclick function(){
load.page(url: <link>your link</>
}
sorry if mistaken something, didn't run it all together
But give it a go hope it helps;
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 know the mouseenter is coded such that it propagates mouseover to all the elements within the DOM that it is bound to.
So, like the question states, is there a way to manually apply this propagation to other elements that are separate from the DOM, which I bound the mouseenter event to.
The function, $.stopPropagation(), stops the propagation but is there an applyPropagationTo like function?
Here is the scenario:
Say I have a div, class=divCON. I have a absolute positioned div appended to the body, called divHOV, which is hid. When I mouseenter divCON, divHOV becomes visible and follows my mouse when I am within divCON.
I want it so that when my mouse is moving within divCON, the mouse tends to enter divHOV if the browser is slow to reposition the divHOV while moving the mouse. I want it so that I can propagate divHOV's mouseenter onto divCON so that a mouseleave event is not trigger when I go on divHOV.
jsFiddle: http://jsfiddle.net/vuxcR/
Note how when the mouse enters divHOV, it mouseleaves the divCON. I want it so that when it does not mouseleave divCON when I enter divHOV.
Fiddle: http://jsfiddle.net/vuxcR/1/
Here's the desired code. See the comments and bottom for explanation:
$(document).ready(function() {
var $divCON = $(".divCON");
$divCON.bind("mouseenter", function() {
//Cancel if this function has already run (so, if the next element
// has class divHOV
if($(this).next().hasClass('divHOV')) return;
$divHOV = $("<div class='divHOV'></div>");
$divHOV.mousemove(function(ev){
var offset = $divCON.offset();
var height = $divCON.height();
var width = $divCON.width();
var left = offset.left;
var top = offset.top;
var bottom = top + height;
var right = left + width;
// If the mouse coordinates are within the box
if(ev.pageX >= left && ev.pageX <= right &&
ev.pageY >= top && ev.pageY <= bottom){
//Trigger move.
$divHOV.css({'top': ev.pageY - 3 + 'px', 'left': ev.pageX + 3 + 'px'});
}
});
$(this).after($divHOV);
});
$divCON.bind("mousemove",function(e) {
$(".divHOV").css({'top': e.pageY - 3 + 'px', 'left': e.pageX + 3 + 'px'});
});
});
When the user enters .divCON for the first time, .divHOV is added. When moving the mouse (see bottom), divHOV is positioned again. Once the mouse enters .divHOV, the coordinates are calculated again IF the mouse is within the box of divCON.
When the mouse enters .divCON again, the function immediately returns, because .divHOV already exists: if($(this).next().hasClass('divHOV')) return;.