How do I find the absolute position of an element using jQuery? - javascript

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;.

Related

JQuery - Improper recalculate on window resize

I wrote a CSS class to create relative position related to the document instead of the parent element. To do this I use jQuery to set the "left" property.
$(function() {
var popoutPosition = $('.lw-popout').offset();
$(".lw-popout").css("left", "-" + popoutPosition.left + "px" );
});
This works great. The problem is it breaks when the window is resized. I have tried the code below, but it does not work. It runs on resize, but the value it calculates is not correct. Anyone have any ideas?
$(window).resize(function () {
var popoutPosition = $('.lw-popout').offset();
$(".lw-popout").css("left", "-" + popoutPosition.left + "px" );
});
your code is only going to work for a single element. If you have multiple elements of that class, they are all going to use the offset of the first element.
offset gives an offset from the document, which is affected by css styles such as left. So once you set it, your technique won't work again until you set left back to the original value.
It might be better to use the offset of the parent instead of its own offset.
More clarity:
Say that in the DOM, the element starts out 100 pixels from the left, which is determined by calling offset().
You then set the left style to "-100px".
Calling offset() again will result in 0, because that is the new position relative to the document.
If you resize the window, the element may move. Perhaps it should now be at 200 pixels from the left, but because the left attribute is set to '-100px', offset() actually gives you a left value of 100. It will always be off.
Possible solutions:
Use translatex instead of left. That moves where the element appears, but doesn't change the actual position in the dom. it will not affect future calls to offset: ie: transform: translateX(-200px)
Set left to 0px before calling offset. That will reset to the default and it can then be calculated properly.
Use position: fixed and set left to 0.
Use the parent position to determine where to position the element. If it has a fixed position within the parent it would work.

Difference between $(this).position and getBoundingClientRect()

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

JQuery Object has offsetTop value different than what offset function returns

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

Relative position of Div in another Div

How do I get the position of a Div relatively to its parent Div? Using .position() and .offset() always gives me its position to the document.
HTML:
<div id="frame">
<div id="inner"></div>
</div>
CSS:
Let's assume frame is centered with margin: auto; and width: 1024px.
inner has left: 300px;, top: 200px and position: relative;.
What I want:
A nice function for getting inners's position data 300 and 200 (e.g. without px when using .css('left') etc.
Is there anything?
If you give the parent a "position" of "relative", then using .position() should be its position inside of the parent.
Using .offset actually should always give you its position based off the document, while using .position gives you its "position" based off its first parent whose "position" is not "static" (default).
Here's examples:
http://jsfiddle.net/Z2VNx/
http://jsfiddle.net/Z2VNx/1/
The first example uses <br /> to add space at the top of the container, while the second example uses padding-top to add space at the top of the container. Both return a value greater than 0 for the child's top position.
The only problem is that position does not account for the child's margins, padding, and borders when calculating its position. This is because all of those are part of the element, so even though you may not visually see them, they wouldn't be included in the element's position calculation. So of course, depending on exactly what part of the element you want to see its position of, you need to add that to the result of .position. Some people want the "position" to return to top-left position of the border, which would mean adding the margin. Something like this:
http://jsfiddle.net/Z2VNx/2/

Calculate element-position

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;

Categories