I have a parent div and child div. Child is position absolute with respect to parent div. Child div is rotated by 90 degrees. Since the origin is the center (meeting point of 2 diagonals) of the child, the child div is shifted pixels outside of the container.
To elaborate this problem I have added 2 parents-child output in the fiddle below.
http://jsfiddle.net/Xja29/
In the fiddle I have added an event which resets the child position to the top-left corner of their respective parents. Here is the reset code. Note top & left values are different for the 2 child divs
JQuery Code:
$("#link").click(function(){
//Child 1 needs top=45 and left=-45
$("#c1").css({"top":"45px", "left":"-45px"});
//Whereas Child 2 needs top=30 and left=-30
$("#c2").css({"top":"25px", "left":"-25px"});
//As one can see there are different values for top and left for childs of different dimension. Is there any relation or formula to find out this values?
});
Exactly, I want to find out the relation between rotation angle, width, height and co-ordinate system of the child div. Please let me know if anything such exists. Thank you.
You can use as style:
transform: rotate(90deg) translate(0,-100%)
transform-origin: top left
to get the requested alignment without using Javascript
You can always use the following calculation:
top = (child_div.width - child_div.height)/2
left = (child_div.height - child_div.width)/2 = -top
Let's examine the formula for top. The center of the child div is (child_div.height/2) units below the top of the parent's div. After rotating the child div, its top is (child_div.width/2) units above its own center. This implies that its top is (child_div.width/2) - (child_div.width/2) units above its parent's top. Simplifying it, we get the aforesaid formula. The formula for left can be derived analogously.
If you are going to move them using Javascript, you can calculate these values at the run time and use them.
Well, the child div resides in its own coordinate system relative to the parent container which position' is not static (the body otherwise). If you want to rotate a div around a certain point, which is not the origin of its coordinate system the steps to be taken are as follows:
subtract the vetor of the rotation point from the position vector of the div. (so the rotation center will lie in the origin).
rotate the div.
undo step one by adding the "rotation-center-vector" to the position of the div.
These steps are a quite general approach and a common concept, just have a look at tranformation matrices. In other words, rotating arround a certain point always involves these three steps (the same holds true for scaling objects).
Good luck...
Related
I have a slider, but need to style the track so that each side of the halfway point is a shape that colours depending on the position of the slider. I have absolutely no idea where to start with this so have no example code of what I have tried.
This is the design I have been given:
For the design you have few options. The most common one is to have 2 svgs. The other one is to transform a div using CSS.
the starting point could be 0 (the center). based on the circle position you start styling the svg that it overlaps onto. We can say that from -1 to -100 we refer to the shape on the left and from 1 to 100 we refer to the shape on the right.
How to get the value based on the position of an element? When the mouse moves, we update the value based on the current position and the starting position (0). have a look at getBoundingClientRect.
If it's easier you could also think of it as:
0% to 50% = -100 to 0
50% to 100% = 0 to 100.
where the position of the element (i.e. 50%) is the position of the circle when using transform: translateX(N).
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.
I've a div element which contains three child div's as inline-block display property. I'm applying a rotation transformation with transform: rotate(15deg) and the div is rotated. Obiviously all the inner divs are also go along with the parent.
But once the rotation is completed, I want to uncover all the inner elements and they should be at their last position.
How can we get their actual transform origin, rotation and positions.
I tried using window.getComputedStyle but not finding any hint in that.
Here is the codepen
I'm hoping someone can help me out with this, I'm using a jquery plugin (jquery rotate) to rotate some elements inside a container, however a new crazy requirement came up and now I also need to rotate the container div, the problem is the children elements can be dragged and dropped inside this container and when it is rotated dragging stops working and it starts acting weird (I guess it makes sense as the coordinates system is being altered by the rotation on the container so the dragging behavior just goes crazy) so the only way that I can see to keep dragging and dropping working is to "simulate" the parent rotation by somehow calculate what the position of the children elements would be if the parent is rotated (without actually rotating the parent container) and position each child element on its corresponding final position, this way the coordinates system does not get "broken" and the drag and drop of the children remains working as expected.
To clarify what I'm trying to achieve lets suppose the container is 400x400px and that it has a children at top=0 and left=0, I would like to perform a "fake" 180 degrees rotation on the container that would send the child element to top=400px and left=400px (which is where the child element would visually end up being if the parent is rotated), I'm hoping there is a library I can use to perform this math (math is not my thing though) on each children and somehow "calculate" or "determine" the position they should have within the container if it is rotated 180 degrees and then position each children where they should be (the container rotation will always be a 180 degrees rotation which means it will be either at a "normal" angle of 0 degrees or a "flipped" angle of 180 degrees).
Any help would be greatly appreciated.
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