jQuery.fn.getCoord = function(){
var elem = $(this);
var x = elem.offset().left;
var y = elem.offset().top;
console.log('x: ' + x + ' y: ' + y);
return {
x,
y
};
};
The above function can be used to extend jQuery, it returns an object with the x and y coordinate of a given element, left and top value respectively.
Is there a way to set focus to an element based on these x, and y coordinates.
E.g
//Get button coordinates
let coords = $("#gridButton3").getCoord();
//Get height of current element in focus
let itemHeight = $("#gridButton").scrollHeight;
//Delta value representing some space in between elements
const delta = 30;
//coords.x = 200
//coords.y = 50
//itemHeight = 200
Given the above values in a n x n grid, lets say I want to set focus to a grid button just below gridButton3.
I would do the following :
let {focusX , focusY } = coords;
//Only changing y coordinate because we are navigating down, x coordinates doesn't change
focusY = focusY + itemHeight + delta;
//Here is the part I need some insight on
//scroll to new y location
$('html, body').animate({
scrollTop: focusY
}, 500)
//Now focus on element at coordinates (focusX,focusY)
I know how to set focus via element id or by some selector, I need to figure how to do it based on element at a given x,y .
To get an element from a point in the DOM you can use document.elementFromPoint()
Related
I am trying to use getBoundingClientRect to get the coordinates of my click on canvas, but am always getting the same result.
My code is here: http://fiddle.jshell.net/nH74F/1/
As you can see i always get 8,8
No idea why, is there another way to get this info?
That's because you always use the absolute position of the element returned by getBoundingClientRect, and not the mouse position.
Try this instead:
canvas.addEventListener('click', function(e) { // use event argument
var rect = canvas.getBoundingClientRect(); // get element's abs. position
var x = e.clientX - rect.left; // get mouse x and adjust for el.
var y = e.clientY - rect.top; // get mouse y and adjust for el.
alert('Mouse position: ' + x + ',' + y);
...
Modified fiddle
I'm trying to make a drawing pad that keeps sending the location of the mouse AND registers a "click" every 1 second. I've tried this, but it doesn't seem to be working -
$( "#canvas" ).mouseover(function() {
setInterval(function(){
var mouseLocation = new jQuery.Event("mouseup");
var x = mouseLocation.pageX ;
var y = mouseLocation.pageY ;
$('#canvas').trigger(mouseLocation);
console.log('Interval function is working');
console.log(mouseLocation.pageX);
},400);
});
the console shows the 'Interval function is working', but it says x is not definted
Click events dont have x and y coordinate.
Do grab x and y coordinate you have to attach mousemove or mouseover event to the element.
$(function(){
var canvas = document.getElementsByTagName("canvas")[0];
var offset = $("canvas").offset();
var a = document.getElementById("a");
canvas.addEventListener("mousemove",function(event){
a.innerText = (event.x - offset.left) + " " + (event.y - offset.top)
})
})
since you want continuous polling of x and y coordinates mousemove is better event to be attached.
fiddle:http://jsfiddle.net/BBnuu/
I was wandering if any one could help me with this svg problem. How do I get the mouse coordinate version of an svg object. Usually when a user clicks on the page, the click event gets trigger and the object has a mouse position in terms of x and y. In my case, I don't want to do it with an event. Is getting the mouse position possible by simply examining the svg object's properties like the x and y coordinate? I put together an example page, hope it makes it clearer. http://jsfiddle.net/kenny12/XBCHF/ is the link. Excerpt is:
var svg = document.getElementsByTagName('svg')[0];
var pt = svg.createSVGPoint();
var el1 = document.getElementsByTagName('rect')[0];
var log_svgcursorPoint,
log_mouseclick,
log_mousecoord;
function svgcursorPoint(evt){
pt.x = evt.clientX; pt.y = evt.clientY;
var a = svg.getScreenCTM();
log_svgcursorPoint = "offset based on svg"+ " x:" + a.e +" y:" + a.f;
var b = a.inverse();
return pt.matrixTransform(b);
};
(function(elem){
elem.addEventListener('mousedown',function(e){
log_mouseclick = "mouse clicked at"+ " x:" + e.clientX +" y:" + e.clientY ;
var svgmouse = svgcursorPoint(e);
log_mousecoord = "svg mouse at"+ " x:" + svgmouse.x +" y:" +svgmouse.y;
document.getElementById('op').innerHTML = log_svgcursorPoint + "<br>" + log_mouseclick + "<br>" + log_mousecoord;
},false);
})(el1);
(function calc_manually(){
var rec = document.getElementsByTagName("rect")[0];
var root = document.getElementsByTagName("svg")[0];
var x = rec.getAttribute("x");
var y = rec.getAttribute("y");
var CTM = root.getScreenCTM();
// How to get the mouse position these information without using events is the problem.
})();
Why don't you want an event? That's what they're for. If you're dealing with mouse coordinates, just stick standard DOM event listeners on your objects and then when they trigger, use the event.target.getBoundingClientRect() function for the element's position on-screen, and the event.offsetX/screenX and event.offsetY/screenY properties for the mouse coordinates.
simple demonstrator: http://jsfiddle.net/HBmYV/1/
you can use event layer as well which works better if the svg element is positioned some where besides 0,0 on the page p.x =event.layerX || event.clientX;
I have an edge animate document where I would like to create/trigger a symbol whenever the user touches anywhere on the stage. I want the center of the symbol to be where their pointer was located on the stage at the time of the click.
I know how to determine the click x,y coordinates using Javascript, but how do I place a symbol in that location?
I did it this way:
//Create symbol on stage.
//The number 1 indicates the position in the list
//of the symbol instances on the stage,
//like the one you see in the right panel called "Elements".
//Use it to set the z-index (position elements in front or in background).
var myNewSymbol = sym.createChildSymbol("myNewSymbol", "Stage", 1);
var x = e.pageX;
var y = e.pageY;
// I wanted position to be in percentage
var bodyHeight = $(window).height();
var bodyWidth = $(window).width();
var xPercent = 100 * x / bodyWidth;
var yPercent = 100 * y / bodyHeight;
//Set the position
myNewSymbol.getSymbolElement().css("position", "absolute");
myNewSymbol.getSymbolElement().css("left", xPercent + "%");
myNewSymbol.getSymbolElement().css("top", yPercent + "%");
I have a div with a width of 308px. In this div I have a buffer bar (which can be any length from 0 to 308).
The div is used to show the progress of a playing audio track. The audio track has a duration in milliseconds.
I am trying to enable the user to change the position in the track based on a click in the div. However my math is all wrong.
What I currently have is:
var pos = e.pageX - $(this).offset().left; // returns the position of the click in the div (0 to 380)
var relpos = parseInt(308, 10)/parseInt(pos, 10);
var newpos = parseInt(duration, 10)/parseInt(relpos, 10);
How to calculate the new position based on the position of the click on the div?
I've setup a fiddle if you want to test it.
First the 308 is actualy the buffer width you should replace that if you need to resize.
The code is:
(function($) {
var duration = 138736;
$(document).on('click', '.buffer', function(e) {
var pos = e.pageX - $(this).offset().left;
var relpos = duration*pos;
var newpos = relpos/308;
$('.test').html(pos + '/' + newpos + '/' + duration);
});
})(jQuery);
if 308 is duration
than pos is x, x = (pos * duration) / 308