I currently have a map svg on my page
<object type="image/svg+xml" data="worldHigh.svg" width="1060" height="800">Your browser does not support SVG</object>
Not when I light op certain path id's on the map I need to be able to move a div to that place on the map.
I currently have the following function that returns the x and y coordinates.
function getPosition(element) {
segments = element.pathSegList;
return { x: segments.getItem(0).x, y: segments.getItem(0).y };
}
Now the problem Im facing is finding the coordinates relative to the position on the screen so I can move a div there.
There are two options that I can see:
1 - You can get the object tag offset with jQuery ($("object").offset()) and use its 'left' and 'top' attributes to find out the object position on the screen. The div positions is (left + x, top + y).
2 - You can wrap your object inside a div, set the div position as relative, and move the desired div to inside wrapping div setting x and y as its position.
Related
I want to move my relative image's coordinate dynamically to get moved to a fixed pointer's coordinate which is absolute to it
If your elements are in a parent-child relationship, simply use CSS: position:absolute on the child. If they aren't in a relationship: You can use .getBoundingClientRect() on the element that you want to position your second element relative to:
let rect = yourPointerElement.getBoundingClientRect();
rect is an object that holds several information regarding the current position and boundaries, including:
{ x, y, width, height, top, right, bottom, left } in pixels.
You can now use this information to position your second element relative to it, using CSS (i.E. position:fixed) and changing top/bottom/left/right with JS.
Is there a way using javascript to detect the absolute position of where you are positioned on a monitor? For example Intersection Observer can tell you if your element is within the viewport of the browser, but it cannot tell you if the browser is halfway off the users monitor, and your element is outside of an actual persons view.
You can find the position of the element using getBoundingClientRect
var x = document.getElementById("elementId").getBoundingClientRect().x;
var y = document.getElementById("elementId").getBoundingClientRect().y;
//Your element position
var position = [x, y];
If your element is off the viewport, it would have negative values depending on its position from top-left.
I have a scenario where I have to assert the presence of a web element with its position. To be more clear I have a web element X and another web element Y. Now I have to assert that after clicking a button I can see X sitting above Y. How to do that?
You should get the two elements‘ positions in the document and subtract the position value of X from the value of Y. If that value is positive, you know that X is sitting farther up than Y.
Getting the position
Use
boxPositionOfX = getElementById(“myX”).getBoundingClientRect();
boxPositionOfY = getElementById(“myY”).getBoundingClientRect();
This returns an object containing all four position values: top, right, bottom and left, relative to the viewport. You do not need to convert the viewport positions to the document positions, since the document offset you'd have to add is the same for both elements and will be cut in the subtraction.
Comparing positions
Now subtract their positions:
positionDifference = boxPositionOfY.top - boxPositionOfX.top;
If the positionDifference is greater than 0, X’s top border lies above Y’s top border.
If you want to make sure the elements do not overlap, use this:
If ( (boxPositionOfY.top - boxPositionOfX.bottom) >= 0) {
alert("X is above Y. They do not overlap.");
}
I have image object drawn in the canvas element.
I also have a div object in the html (not in canvas).
The aim is to move both objects in canvas and in html together.
In case of div object in HTML, I can use jquery animate function which will move it using top and left css parameters.
By using the step function in animate:
For example like that:
animate({width:100}, { duration:1000, step: function(){},
complete: function(){} });
I can figure out each position of the moving div element in HTML. But now I have to convert top and left position coords. into the canvas coordinates and move canvas object too.
Moreover I have to know where to move the div element. It should go above another object in the canvas.
So I need to make the function which converts top and left css coordinates into canvas and backwards, from canvas coordinates to top left coordinates in html.
The question is how to do it and may be there is another way to do it, different from what I'm trying to do?
I have a div with an id="div_Diagram" that contains two other divs, div_CanvasHeader and div_Canvas, as shown. div_Canvas also contans an SVG, which in turn contains several rects. Each rect has is constructed in a way that its has a javascript script attached to its mouseover event with the x & y position values passed into the script.
Do to the nature of svgs, I'm not able to correctly position the tooltip division relative to the rect. I'd like to be able to use the rect coordinates (x&y) to position the tooltip relative to div_CanvasHeader or div_Diagram. Other then x & y, all other dimensions are fixed.
Here is the javascript. (Note that the tooltip is a telerik control. The Show() method does show the tooltip with all of the correct content but at the bottom left of page).
function showSVGTtip(elt, x, y) {
if (elt.hasAttribute("name")) {
var ttipText = elt.getAttribute("ttipText ");
var ttip = $find("<%=myToolTipDiv.ClientID %>");
document.getElementById("ttipLabel").innerHTML = ttipText ;
ttip.show();
// Need to set position of ttip relative to other element such as pnlCanvasHeader
}
}
How do I position the tooltip div relative to one of the other divs? For example, if I have the id of the tooltip div, can I move it on the client relative to div_CanvasHeader? Does the tooltip need to be contained within the other div?