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?
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 page with a svg loaded via object.
Then, I call a function that loads a div, using width, height, left and top of an internal g element
var cartina = document.getElementById(whatMap);
var cartinaContext;
cartina.addEventListener("load",function(){
cartinaContext = cartina.contentDocument;
var el = $("#mappaBase", cartinaContext)[0];
var rect = el.getBoundingClientRect();
var whatContainer = "#containerIcone"+whatMap;
$(whatContainer).css("position", "absolute");
$(whatContainer).width(rect.width);
$(whatContainer).height(rect.height);
$(whatContainer).css("left", rect.left);
$(whatContainer).css("top", rect.top);
}
I'm using getBoundingClientRect(). I'm applying the div #containerIcone over the svg.
In Chrome it works smoothly well. The problem is in Firefox: when I load the page, width and height are properly loaded but left and top are not. If I inspect the svg with Firefox, it appears that the g element is placed in a fixed position, while the rendered g element has another one (responsive to window dimensions and other elements position). Still, the g fixed element reacts well to window various sizes. The div is placed over the g element fixed inspect-position.
Inspecting the same element with Chrome reveals that the g element inspect box is drawed everytime where the g rendered element is.
How can I make this work in Firefox?
I found a solution, it's working cross-browser.
Instead of positioning with .top and .left of the nested g element, I get width and height of nested element
var el = $(nestedElement);
var rect = el.getBoundingClientRect();
Then I get width and height of the parent svg element
var rectSvg = mysvg.getBoundingClientRect();
Then I subtract the el width and height from the svg ones, and divide results by 2. The final result is the white space the svg has inside it, top and left, used to center the rendered element el inside the svg element (used by browser to mantain aspect ratio). Then I apply those results as css top and left of my div containing icons - it will be positioned exactly over the g el element.
var leftSpace = (rectSvg.width - rect.width)/2;
var topSpace = (rectSvg.height - rect.height)/2;
$(myPositionedDiv).css("left", leftSpace);
$(myPositionedDiv).css("top", topSpace);
This manner, however Firefox positions the element despite of rendering, left and top are correctly calculated.
Aim:
I have a website with some content and svg scheme in the middle of it. When one points to the elements of the scheme, tooltips should appear next to the mouse cursor.
Problems: Based on examples like this (which was shown by Julian Berger in How to get the position of SVG element), I made working SVG. Unfortunately it is working only as long as the SVG scheme is not included into the website. Content other then SVG make evt.clientX and Y coordinates system to fail --> the tooltip starts to appear in some distance from the cursor (it seems that the more of other then SVG content I have, the further tooltip is moved away from cursor). The simple example is shown here, simply by adding couple of <br/> before the actual SVG begins.
And my question:
Do you have some ideas how to fix the position of the tooltip, so that it would appear always next to the moving cursor?
All the best,
Wojtek
All you have to do is alter mousemove handler a little. It should position the tooltip relative to the top left of the SVG, rather than the page. You do that by subtracting the position of the SVG, which we get by surrounding the SVG with a <div> element and accessing its offsetLeft and offsetTop properties.
<div id="mysvg">
<svg>...</svg>
</div>
function ShowTooltip(evt, mouseovertext) {
svg = document.getElementById("mysvg");
tooltip.setAttributeNS(null,"x",evt.clientX+11 - svg.offsetLeft);
tooltip.setAttributeNS(null,"y",evt.clientY+27 - svg.offsetTop);
...
}
Full demo here
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.