How to get the correct element offset? - jQuery

Question

This is probably a very simple question, but how do I get the correct element offset in jQuery?

I can do:

$("#whatever").offset().left; 

and it really is.

But it seems that:

 $("#whatever").offset().right 

- undefined.

So how to do this in jQuery?

Thank!!

Answer 1

Alex, Gary:

As requested, here is my comment posted as an answer:

 var rt = ($(window).width() - ($whatever.offset().left + $whatever.outerWidth())); 

Thanks for letting me know.

Answer 2

 var $whatever = $('#whatever'); var ending_right = ($(window).width() - ($whatever.offset().left + $whatever.outerWidth())); 

Link:. outerWidth ()

Answer 3

Perhaps I do not understand your question, but the offset should give you two variables: horizontal and vertical. This determines the position of the element. So you are looking for:

 $("#whatever").offset().left 

and

 $("#whatever").offset().top 

If you need to know where the right border of your element is, you should use:

 $("#whatever").offset().left + $("#whatever").outerWidth() 

Answer 4

Just an addition to what Greg said:

$ ("# whatever"). offset (). left + $ ("# whatever"). outerWidth ()

This code will get the correct position relative to the left side. If the goal was to get the right position with respect to the right (for example, when using the CSS right property), then adding to the code is necessary as follows:

$ ("# parent_container"). innerWidth () - ($ ("# whatever"). offset (). left + $ ("# whatever"). outerWidth ())

This code is useful in animations where you should set the right side as a fixed anchor if you cannot initially set the right property in CSS.

Answer 5

Brendan Crawford had the best answer here (in the commentary), so I will translate it before the answer until it does (and possibly expands a bit).

 var offset = $('#whatever').offset(); offset.right = $(window).width() - (offset.left + $('#whatever').outerWidth(true)); offset.bottom = $(window).height() - (offset.top + $('#whatever').outerHeight(true)); 

Answer 6

In fact, they only work when the window does not scroll at all from the upper left position. You must subtract the scroll values ​​of the window to get the offset, which is useful for repositioning the elements so that they stay on the page:

 var offset = $('#whatever').offset(); offset.right = ($(window).width() + $(window).scrollLeft()) - (offset.left + $('#whatever').outerWidth(true)); offset.bottom = ($(window).height() + $(window).scrollTop()) - (offset.top + $('#whatever').outerHeight(true)); 

Answer 7

There is a native DOM API that reaches this out of the box - getBoundingClientRect :

 document.querySelector("#whatever").getBoundingClientRect().right 

Answer 8

Getting the anchor point in div/table (left) = $("#whatever").offset().left; - OK

Having received the anchor point div/table (right) , you can use the code below.

  $("#whatever").width();