jQuery provide position function which has top and left value.
Either vanilla javascript has getBoundingClientRect()
I don't the difference between them.
When I checked, it's value difference.
getBoundingClientRect()
How can I convert jQuery's position to getBoundingClientRect.
As you see, x is 236, but left is 200.
jQuery .position() gets position relative to the parent.
From documentation: Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.
getBoundingClientRect - relative to the window.
From documentation: The Element.getBoundingClientRect() method returns the size of an element and its position relative to the viewport.
The solution found here: Element's coordinates relative to its parent
Related
I'm using js animate() to animate an element from one place to another (with "translate()"), and the initial data (or target's new position) for the animations is being calculated with offsetTop and offsetLeft on page load.
The problem is that both offsetTop and offsetLeft return integers (this is how it should work) while in some cases a target element's computed position might be represented as a floating value (125.4px), what gives me back "125" instead.
Therefore, an animated element might stop its animation 1 pixel before the place it was originally intended to be.
Is there any way to get an element's top/left offsets from its parent (not viewport, so "getBoundingClientRect" is not an option), and with floating values?
Thanks in advance.
Here is an example of getting offset from parent using getBoundingClientRect():
function getTopOffsetFromParent(element) {
if(element.parentElement) {
return element.getBoundingClientRect().top - element.parentElement.getBoundingClientRect().top;
}
return element.getBoundingClientRect().top;
}
So i'm trying to figure out something going on with jQuery's offSet function and the actual objects offset. When I do console.log for my object it shows an offsetTop of 21294. However when I do the jQuery function call for offset().top, im getting 22069. The body had no padding or margin, so im at a bit of a loss of why everything is returning so differently. There is a top margin of 30 on the object, but that is about it.
They do different things.
From jQuery's site for offset:
Get the current coordinates of the first element, or set the coordinates of every element, in the set of matched elements, relative to the document.
From Mozilla's JS docs on offsetTop:
The HTMLElement.offsetTop read-only property returns the distance of the current element relative to the top of the offsetParent node.
So you are measuring one relative to the document, one relative to the offsetParent node.
Typically a positioned div or table will act as an offset container to any element contained inside them.
In your case it appears to be div#resizable.main-content
I need a popup div that will appear right below the anchor that i clicked. Now, I want to determine the x and y coordinates onClick event of an anchor. What's the best practice of doing it? What are the advisable event properties to use?
offsetX and offsetY are relative to the parent container, whereas pageX and pageY are relative to the document. Don't confuse this with .offset() and .position(), in which .offset() is relative to the document and .position() is relative to the parent container's .offset().
Something like this example should work (JQuery):
$('a').click(function(){
var offset = $(this).offset();
$('#popup_div').css('top',offset.top + 'px').css('left',offset.left + 'px').show();
});
http://api.jquery.com/offset/
http://api.jquery.com/position/
2 extracts from Jquery Documentation website
The .position() method allows us to retrieve the current position of an element relative to the offset parent
http://api.jquery.com/position/
The .offset() method allows us to retrieve the current position of an element relative to the document.
http://api.jquery.com/offset/
I would like to calculate the vertical position of a <div> with jQuery.
How would I do this?
Here's an illustration describing what I mean:
I think you're looking for its offset from the top of the page, right?
$('#div').scrollTop();
If that's not it, maybe the offset would work:
$('#div').offset().top;
Okay, now that it needs to be relative to the parent, try this:
$('#div').position().top;
$('#innerDiv').position()
Get the current coordinates of the
first element in the set of matched
elements, relative to the offset
parent.
jQuery Manual for position()
I think you're looking for
$(elem).offset();
http://api.jquery.com/offset/
If you want it relative to it's container, then you're after http://api.jquery.com/position/ instead.
jQuery has several functions to help you find the offset that you are looking for.
var element = $("#your_element");
// Get the current coordinates of the first element in the set of matched elements, relative to the document.
element.offset()
// Get the closest ancestor element that is positioned.
element.offsetParent()
// Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.
element.position()
// Get the current horizontal position of the scroll bar for the first element in the set of matched elements.
element.scrollLeft()
// Get the current vertical position of the scroll bar for the first element in the set of matched elements.
element.scrollTop()
For more information read about these at the jQuery offset api page.
I reckon that the jQuery API "position()" isn't what you are looking for, since it is defined as "the current position of an element relative to the offset parent" (basically it corresponds to element.offsetTop)
Therefore if you want the top position of the element relative to its parent (not necessary the offset parent), use this instead:
var top = (element.parentNode == element.offsetParent) ? element.offsetTop : element.offsetTop - element.parentNode.offsetTop;
Is there a way of finding the absolute position of an element, i.e. relative to the start of the window, using jQuery?
.offset() will return the offset position of an element as a simple object, eg:
var position = $(element).offset(); // position = { left: 42, top: 567 }
You can use this return value to position other elements at the same spot:
$(anotherElement).css(position)
Note that $(element).offset() tells you the position of an element relative to the document. This works great in most circumstances, but in the case of position:fixed you can get unexpected results.
If your document is longer than the viewport and you have scrolled vertically toward the bottom of the document, then your position:fixed element's offset() value will be greater than the expected value by the amount you have scrolled.
If you are looking for a value relative to the viewport (window), rather than the document on a position:fixed element, you can subtract the document's scrollTop() value from the fixed element's offset().top value. Example: $("#el").offset().top - $(document).scrollTop()
If the position:fixed element's offset parent is the document, you want to read parseInt($.css('top')) instead.
In case the element is not visible $(element).offset(); and $(element).position(); retun 0 for both top and left instead of the elements real value.
i had to use
parseInt($(element).css("top"))
parseInt($(element).css("left"))
to return the needed information.
the element has position: absolute;.