So basically I've seen a lot of advance animation websites. And I tried to create a image wherein it follows the images as I move my mouse cursor along with div coordinates.
Basically the code is like this in my codepen.
https://codepen.io/myth-vince/pen/PoQJOXj
When you try to move the cursor into the image..it will just like teleport on the top left because I think that is the constant rect height ord width of the image.
If anyone can help me with this..It will be a big thanks. I've created some advance animation like this but never met this before that just teleport suddenly.
I believe it has something with this
var rect = e.target.getBoundingClientRect();
console.log(rect)
var x = e.clientX - rect.left; //x position within the element.
var y = e.clientY - rect.top; //y position within the element.
Or maybe the SCSS but I don't know where because everything seems fine..but I think the only really problem here is because when I try to make it also center the image in the mousecursor it will just adjust itself and will not align in center of mousecursor cause it is avoiding it to teleport.
EDIT
For more information..
the part of mouseover and mousemove the mousemove will only starts when the mouse is hovering the div so it the image will start to move out.
Now for the second I need to get the e.clientX and e.clientY so that it could get the where the part of div is. And as rectX and rectY is the getting the height and width part of it
Show DIV at mouse cursor on hover of span
you can see it here the link.
and where did I get the delaying the motion of images is here
https://stackoverflow.com/questions/9136261/how-to-make-a-setinterval-stop-after-some-time-or-after-a-number-of-actions#:~:text=To%20stop%20it%20after%20running,reached%20that%20number%20clear%20it.
var rect = e.target.getBoundingClientRect();
There's your problem.
Like most other event types, the mousemove event bubbles up through the DOM.
When you put the cursor over one of those images - then e.target is not the box any more, but that particular image. So you are not working with the getBoundingClientRect data relating to your box now, but to the particular image.
As soon as you make this
var rect = box.getBoundingClientRect();
instead, the problem is gone.
New to Js I am building an interactive pronunciation guide through an inline svg.
You can view it here: https://codepen.io/r-pg/pen/OJgoXWQ
I am currently trying to add basic styled tooltips which will display an associated sentence. I have bound its coordinates relative to the cursor position.
The js I am using for this is here:
function tooldef() {
let t1 = document.querySelector('text[data-tooltip]');
let t2 = document.querySelector('text:nth-of-type(2)');
t1.addEventListener('onmousemove', showToolTip(evt));
t2.addEventListener('onmousemove', showToolTip(evt));
}
function showToolTip(evt) {
let t = evt.currentTarget;
let phrase = t.getAttribute('data-tooltip');
document.getElementById('tooltip').innerHTML = phrase;
tooltip.style.display = "block";
tooltip.style.left = evt.offsetX + 0 + 'px';
tooltip.style.top = evt.offsetY + 0 + 'px';
/* console.log(tooltip);*/
console.log(evt.offsetX);
console.log(evt.offsetY);
}
function hideToolTip(evt) {
tooltip.style.display = "none";
}
This functions perfectly fine when loaded in through codepen or locally however when I apply this to Wordpress it pushes the tooltip far to the right ad I cannot Identify why. Is there an issue with the code or is this an internal problem within WP?
Your code for positioning the tooltip assumes a couple of things:
That your SVG is at 100% scale.
That your SVG is at the top left of the page
If you are embedding the SVG inside other content, then one or both of those will not be true any more.
You are attaching the mousemove events to SVG <text> elements. So the coordinates returned in the event will be in SVG coordinate space. If the SVG is scaled to any size other than 1070 x 900, then your event coordinates won't match up with page coordinates.
If you are always displaying the SVG at 1070 x 900, then your fix might be as simple as just getting the page offset of the SVG, then add that X and Y position to the position returned in the event.
However if you are scaling the SVG, then you will need to convert the coordinates from SVG coordinates to page coordinates. There are many other questions on here about that topic. For example, this one: https://stackoverflow.com/a/48354404/1292848
I have an image which as a "ruler" (made of basic divs positioned absolute on top of the image) that are use to measure the ends of the image. Now the idea is that if you long press one of the ruler ends (the dots at the end of the line which are draggable), the image in the background would zoom in that point, and follow the dot if the user moves it. I am able to detect the long press but I cannot get the image to zoom and follow the dot once detected. The code below is where I have done the detection and now I should apply the styling to move the image. I thought of using the transition property but couldn't get it to zoom on the dot. Any help is appreciated...
Here's a codesandbox with how the ruler works: Link
Meaningful code:
const x = get('x', varToUse); //This just gives the x coordinate of the ruler end
const y = get('y', varToUse); //This just gives the y coordinate of the ruler end
const image = ruler.current.parentElement.parentElement.childNodes[1].childNodes[1];
if (zoom) {
image.style.transform = `translate(${x * 2}px, ${y * 2}px) scale(2.0)`;
} else {
image.style.transform = `scale(1.0)`;
}
This is what the ruler looks like just to get an understanding:
You can make the image a div with background-image.
.image {
background-image: url({image_url});
}
so this way you can update the image size and position easily with this properties
.image {
background-size: x y;
background-position x y;
}
I think this way is easier to do the image resizing and zoom abilities.
another way is to use a canvas library that can help you a lot they have lots of built in functions.
I think trying it without library is better for now but as it grows try to move to a canvas library
The first reason is that in the code you provided, the DOM element that is being manipulated is a div id='root'. The image should be selected.
I've been struggling to get this code working. Basically, I want the user to be able to click anywhere inside of the canvas, and the coordinates at the clicked point will be where the rectangle gets drawn. However, the code I have places the rectangles at totally unexpected points along the canvas. I checked the values in Firebug and they seemed to be accurate based on where I clicked inside the canvas, so I'm not sure why the rectangles are not getting drawn at the correct points. Maybe there is some other mistake going on that I am not seeing though, so any help or input would be appreciated. I've posted the relevant code below.
I should also note that the canvas element is inside the div with id='container'.
$('#container').click(function (e) {
var offset=$(this).offset();
var x=(e.pageX - offset.left);
var y=(e.pageY - offset.top);
ctx.fillStyle='#FF0000'; //color red
ctx.fillRect(x,y,10,10); //draw 10 x 10 rectangle starting at x,y
});
pageX/Y gets the x/y coordinate of the page (think 100, 200). Let's say your canvas is positioned at (100,100) on the page. When you're graphing the point, you're saying "Graph a point at 100,200 IN RELATION TO THE CANVAS. That would mean you are trying to graph a point at (200,300) instead of (100,200) linke you want. You need to get your x/y in relation to the canvas, like so:
var x = event.offsetX !== undefined ? event.offsetX : event.layerX;
var y = event.offsetY !== undefined ? event.offsetY : event.layerY;
If you only want to add a click event on the canvas then it's better to use
$("#myCanvas").click(function(e){
});
If you use myCanvas instead of container then $(this) would refer to the canvas and you get the position of the mouse relative to the canvas.
It is because you use the container div that the variable offset is wrong.
I want to detect where a MouseEvent has occurred, in coordinates relative to the clicked element. Why? Because I want to add an absolutely positioned child element at the clicked location.
I know how to detect it when no CSS3 transformations exist (see description below). However, when I add a CSS3 Transform, then my algorithm breaks, and I don't know how to fix it.
I'm not using any JavaScript library, and I want to understand how things work in plain JavaScript. So, please, don't answer with "just use jQuery".
By the way, I want a solution that works for all MouseEvents, not just "click". Not that it matters, because I believe all mouse events share the same properties, thus the same solution should work for all of them.
Background information
According to DOM Level 2 specification, a MouseEvent has few properties related to getting the event coordinates:
screenX and screenY return the screen coordinates (the origin is the top-left corner of user's monitor)
clientX and clientY return the coordinates relative the document viewport.
Thus, in order to find the position of the MouseEvent relative to the clicked element content, I must do this math:
ev.clientX - this.getBoundingClientRect().left - this.clientLeft + this.scrollLeft
ev.clientX is the coordinate relative to the document viewport
this.getBoundingClientRect().left is the position of the element relative to the document viewport
this.clientLeft is the amount of border (and scrollbar) between the element boundary and the inner coordinates
this.scrollLeft is the amount of scrolling inside the element
getBoundingClientRect(), clientLeft and scrollLeft are specified at CSSOM View Module.
Experiment without CSS Transform (it works)
Confusing? Try the following piece of JavaScript and HTML. Upon clicking, a red dot should appear exactly where the click has happened. This version is "quite simple" and works as expected.
function click_handler(ev) {
var rect = this.getBoundingClientRect();
var left = ev.clientX - rect.left - this.clientLeft + this.scrollLeft;
var top = ev.clientY - rect.top - this.clientTop + this.scrollTop;
var dot = document.createElement('div');
dot.setAttribute('style', 'position:absolute; width: 2px; height: 2px; top: '+top+'px; left: '+left+'px; background: red;');
this.appendChild(dot);
}
document.getElementById("experiment").addEventListener('click', click_handler, false);
<div id="experiment" style="border: 5px inset #AAA; background: #CCC; height: 400px; position: relative; overflow: auto;">
<div style="width: 900px; height: 2px;"></div>
<div style="height: 900px; width: 2px;"></div>
</div>
Experiment adding a CSS Transform (it fails)
Now, try adding a CSS transform:
#experiment {
transform: scale(0.5);
-moz-transform: scale(0.5);
-o-transform: scale(0.5);
-webkit-transform: scale(0.5);
/* Note that this is a very simple transformation. */
/* Remember to also think about more complex ones, as described below. */
}
The algorithm doesn't know about the transformations, and thus calculates a wrong position. What's more, the results are different between Firefox 3.6 and Chrome 12. Opera 11.50 behaves just like Chrome.
In this example, the only transformation was scaling, so I could multiply the scaling factor to calculate the correct coordinate. However, if we think about arbitrary transformations (scale, rotate, skew, translate, matrix), and even nested transformations (a transformed element inside another transformed element), then we really need a better way to calculate the coordinates.
The behaviour you are experiencing is correct, and your algorithm isn't breaking. Firstly CSS3 Transforms are designed not to interfere with the box model.
To try and explain...
When you apply a CSS3 Transform on an element. the Element assumes a kind of relative positioning. In that the surrounding elements are not effected by the transformed element.
e.g. imagine three div's in a horizontal row. If you apply a scale transform to decrease the size of the centre div. The surrounding div's will not move inwards to occupy the space that was once occupied the transformed element.
example: http://jsfiddle.net/AshMokhberi/bWwkC/
So in the box model, the element does not actually change size. Only it's rendered size changes.
You also have to keep in mind that you are applying a scale Transform, so your elements "real" size is actually the same as it's original size. You are only changing it's perceived size.
To explain..
Imagine you create a div with a width of 1000px and scale it down to 1/2 the size. The internal size of the div is still 1000px, not 500px.
So the position of your dots are correct relative to the div's "real" size.
I modified your example to illustrate.
Instructions
Click the div and keep you mouse in the same position.
Find the dot in the wrong position.
Press Q, the div will become the correct size.
Move your mouse to find the dot in the correct position to where you clicked.
http://jsfiddle.net/AshMokhberi/EwQLX/
So in order to make the mouse clicks co-ordinates match the visible location on the div, you need to understand that the mouse is giving back co-ordinates based on the window, and your div offsets are also based on its "real" size.
As your object size is relative to the window the only solution is to scale the offset co-ordinates by the same scale value as your div.
However this can get tricky based on where you set the Transform-origin property of your div. As that is going to effect the offsets.
See here.
http://jsfiddle.net/AshMokhberi/KmDxj/
Hope this helps.
if element is container and positioned absolute or relative,
you can place inside of it element,
position it relative to parent and
width = 1px, height = 1px, and move to inside of container,
and after each move use document.elementFromPoint(event.clientX, event.clientY) =))))
You can use binary search to make it faster.
looks terrible, but it works
http://jsfiddle.net/3VT5N/3/ - demo
BY FAR the fastest. The accepted answer takes about 40-70 ms on my 3d transforms site, this usually takes less than 20 (fiddle):
function getOffset(event,elt){
var st=new Date().getTime();
var iterations=0;
//if we have webkit, then use webkitConvertPointFromPageToNode instead
if(webkitConvertPointFromPageToNode){
var webkitPoint=webkitConvertPointFromPageToNode(elt,new WebKitPoint(event.clientX,event.clientY));
//if it is off-element, return null
if(webkitPoint.x<0||webkitPoint.y<0)
return null;
return {
x: webkitPoint.x,
y: webkitPoint.y,
time: new Date().getTime()-st
}
}
//make full-size element on top of specified element
var cover=document.createElement('div');
//add styling
cover.style.cssText='height:100%;width:100%;opacity:0;position:absolute;z-index:5000;';
//and add it to the document
elt.appendChild(cover);
//make sure the event is in the element given
if(document.elementFromPoint(event.clientX,event.clientY)!==cover){
//remove the cover
cover.parentNode.removeChild(cover);
//we've got nothing to show, so return null
return null;
}
//array of all places for rects
var rectPlaces=['topleft','topcenter','topright','centerleft','centercenter','centerright','bottomleft','bottomcenter','bottomright'];
//function that adds 9 rects to element
function addChildren(elt){
iterations++;
//loop through all places for rects
rectPlaces.forEach(function(curRect){
//create the element for this rect
var curElt=document.createElement('div');
//add class and id
curElt.setAttribute('class','offsetrect');
curElt.setAttribute('id',curRect+'offset');
//add it to element
elt.appendChild(curElt);
});
//get the element form point and its styling
var eltFromPoint=document.elementFromPoint(event.clientX,event.clientY);
var eltFromPointStyle=getComputedStyle(eltFromPoint);
//Either return the element smaller than 1 pixel that the event was in, or recurse until we do find it, and return the result of the recursement
return Math.max(parseFloat(eltFromPointStyle.getPropertyValue('height')),parseFloat(eltFromPointStyle.getPropertyValue('width')))<=1?eltFromPoint:addChildren(eltFromPoint);
}
//this is the innermost element
var correctElt=addChildren(cover);
//find the element's top and left value by going through all of its parents and adding up the values, as top and left are relative to the parent but we want relative to teh wall
for(var curElt=correctElt,correctTop=0,correctLeft=0;curElt!==cover;curElt=curElt.parentNode){
//get the style for the current element
var curEltStyle=getComputedStyle(curElt);
//add the top and left for the current element to the total
correctTop+=parseFloat(curEltStyle.getPropertyValue('top'));
correctLeft+=parseFloat(curEltStyle.getPropertyValue('left'));
}
//remove all of the elements used for testing
cover.parentNode.removeChild(cover);
//the returned object
var returnObj={
x: correctLeft,
y: correctTop,
time: new Date().getTime()-st,
iterations: iterations
}
return returnObj;
}
and also include the following CSS in the same page:
.offsetrect{
position: absolute;
opacity: 0;
height: 33.333%;
width: 33.333%;
}
#topleftoffset{
top: 0;
left: 0;
}
#topcenteroffset{
top: 0;
left: 33.333%;
}
#toprightoffset{
top: 0;
left: 66.666%;
}
#centerleftoffset{
top: 33.333%;
left: 0;
}
#centercenteroffset{
top: 33.333%;
left: 33.333%;
}
#centerrightoffset{
top: 33.333%;
left: 66.666%;
}
#bottomleftoffset{
top: 66.666%;
left: 0;
}
#bottomcenteroffset{
top: 66.666%;
left: 33.333%;
}
#bottomrightoffset{
top: 66.666%;
left: 66.666%;
}
It essentially splits the element into 9 squares, determines which one the click was in via document.elementFromPoint. It then splits that into 9 smaller squares, etc until it is accurate to within a pixel. I know I over-commented it. The accepted answer is several times slower than this.
EDIT: It is now even faster, and if the user is in Chrome or Safari it will use a native function designed for this instead of the 9 sectors thingy and can do it consistently in LESS THAN 2 MILLISECONDS!
another way is place 3 divs in corners of that element,
than find transform matrix ... but is also works only for positioned containerable
elements – 4esn0k
demo: http://jsfiddle.net/dAwfF/3/
Also, for Webkit webkitConvertPointFromPageToNode method can be used:
var div = document.createElement('div'), scale, point;
div.style.cssText = 'position:absolute;left:-1000px;top:-1000px';
document.body.appendChild(div);
scale = webkitConvertPointFromNodeToPage(div, new WebKitPoint(0, 0));
div.parentNode.removeChild(div);
scale.x = -scale.x / 1000;
scale.y = -scale.y / 1000;
point = webkitConvertPointFromPageToNode(element, new WebKitPoint(event.pageX * scale.x, event.pageY * scale.y));
point.x = point.x / scale.x;
point.y = point.y / scale.x;
To get the coordinates of a MouseEvent relative to the clicked element, use offsetX / layerX.
Have you tried using ev.layerX or ev.offsetX?
var offsetX = (typeof ev.offsetX == "number") ? ev.offsetX : ev.layerX || 0;
See also:
CSSOM View Module: 9 Extensions to the MouseEvent Interface
IE 8 measures clientX from the element's padding edge instead of the content edge: GTalbot MSIE 8 Browser Bugs: event.offsetX, event.offsetY as mouse coordinates inside element target's padding-box
MSDN: offsetX Property
This seems to work really well for me
var elementNewXPosition = (event.offsetX != null) ? event.offsetX : event.originalEvent.layerX;
var elementNewYPosition = (event.offsetY != null) ? event.offsetY : event.originalEvent.layerY;
EDIT: my answer is untested, WIP, I will update when I get it working.
I'm implementing a polyfill of the geomtetry-interfaces. The DOMPoint.matrixTransform method I will make next, which means we should be able to write something like the following in order to map a click coordinate onto a transformed (possiblly nested) DOM element:
// target is the element nested somewhere inside the scene.
function multiply(target) {
let result = new DOMMatrix;
while (target && /* insert your criteria for knowing when you arrive at the root node of the 3D scene*/) {
const m = new DOMMatrix(target.style.transform)
result.preMultiplySelf(m) // see w3c DOMMatrix (geometry-interfaces)
target = target.parentNode
}
return result
}
// inside click handler
// traverse from nested node to root node and multiply on the way
const matrix = multiply(node)
const relativePoint = DOMPoint(clickX, clickY, 0, 800).matrixTransform(matrix)
relativePoint will be the point relative to the element's surface that you clicked on.
A w3c DOMMatrix can be constructed with a CSS transform string argument, which makes it super easy to use in JavaScript.
Unfortunately, this isn't working yet (only Firefox has a geometry-interfaces implementation, and my polyfill does not yet accept a CSS transform string). See: https://github.com/trusktr/geometry-interfaces/blob/7872f1f78a44e6384529e22505e6ca0ba9b30a4d/src/DOMMatrix.js#L15-L18
I will update this once I implement that and have a working example. Pull requests welcome!
EDIT: the value 800 is the scene's perspective, I'm not sure if this is what the fourth value for the DOMPoint constructor should be when we intend to do something like this. Also, I'm not sure if I should use preMultiplySelf or postMultiplySelf. I'll find out once I get it at least working (values may be incorrect at first) and will update my answer.
I am working on a polyfill to transfrom DOM coordinates. The GeometryUtils api is not available yet (#see https://drafts.csswg.org/cssom-view/). I created a "simple" code in 2014 to transform coordinates, like localToGlobal, globalToLocal and localToLocal. Its not finished yet, but its working :) I think I will finish it in the coming months (05.07.2017), so if you still need a API to accomplish coordinate transformation give it a try: https://github.com/jsidea/jsidea jsidea core library. Its not stable yet (pre alpha).
You can use it like that:
Create your transform instance:
var transformer = jsidea.geom.Transform.create(yourElement);
The box model you want to transform to (default:"border", will be replaced by ENUM's later on):
var toBoxModel = "border";
The box model where your input coordinates coming from (default:"border"):
var fromBoxModel = "border";
Transform your global coordinates (here {x:50, y:100, z: 0}) to local space. The resulting point has 4 components: x, y, z and w.
var local = transformer.globalToLocal(50, 100, 0, toBoxModel, fromBoxModel);
I have implemented some other functions like localToGlobal and localToLocal.
If you want to give a try, just download the release build and use the jsidea.min.js.
Download the first release here: Download TypeScript code
Feel free to change the code, I never put it under any license :)
I have this issue and started trying to compute the matrix.
I started a library around it: https://github.com/ombr/referentiel
$('.referentiel').each ->
ref = new Referentiel(this)
$(this).on 'click', (e)->
input = [e.pageX, e.pageY]
p = ref.global_to_local(input)
$pointer = $('.pointer', this)
$pointer.css('left', p[0])
$pointer.css('top', p[1])
What do you think ?
Works fine whether relative or absolute :) simple solution
var p = $( '.divName' );
var position = p.position();
var left = (position.left / 0.5);
var top = (position.top / 0.5);