93

This is probably a really simple question, but how do I go about getting the right offset of an element in jQuery?

I can do:

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

and it is valid.

But it seems that:

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

is undefined.

So how does one accomplish this in jQuery?

Thanks!!

Peyman Mohamadpour
  • 17,954
  • 24
  • 89
  • 100
Alex
  • 64,178
  • 48
  • 151
  • 180

8 Answers8

168

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.

In pseudo code that can be expressed as:

The right offset is:

The window's width MINUS
( The element's left offset PLUS the element's outer width )

user1063287
  • 10,265
  • 25
  • 122
  • 218
Brendon Crawford
  • 1,885
  • 1
  • 13
  • 5
  • this does not work with CSS transforms, offset will be affected by the transform but outerWidth (and width) will not. – Jonathan. Dec 29 '14 at 16:37
  • 2
    This is the offset from the right side of the window. For the offset from the left side of the window, see cdZ's [answer](http://stackoverflow.com/a/5643921/675721). – Codebling Oct 08 '15 at 21:13
  • the right-most edge of an element can be found more "natively" `$whatever[0].getBoundingClientRect().right`. this is relative to the window's left edge. – pstanton Oct 03 '17 at 05:45
  • Thanks brendon. Helpful answer. –  Dec 29 '17 at 15:22
  • What would this look like in vanilla javascript? – L8R Oct 26 '22 at 22:52
29
var $whatever        = $('#whatever');
var ending_right     = ($(window).width() - ($whatever.offset().left + $whatever.outerWidth()));

Reference: .outerWidth()

Arash Milani
  • 6,149
  • 2
  • 41
  • 47
jAndy
  • 231,737
  • 57
  • 305
  • 359
  • 1
    i think need to add them and then minus 1. if the width is 2, then left is at 10, and right is not at 12 but 11. – nonopolarity Jun 15 '10 at 07:02
  • 31
    This is an incorrect answer. In CSS, "left" implies "the offset of the leftmost point of the element from the left of the window/parent", and "right" implies "the offset of the rightmost point of the element from the right of the window/parent". So, the correct answer would be: `var rt = ($(window).width() - ($whatever.offset().left + $whatever.outerWidth()));` – Brendon Crawford Dec 14 '11 at 10:58
  • 5
    @BrendonCrawford You should move that comment to an answer. – Gary May 14 '12 at 01:00
  • 3
    A note to anyone coming through - the answer above has been edited to correctly reflect the comment made by Brendon. – Chris Marasti-Georg Nov 09 '12 at 14:50
17

Maybe I'm misunderstanding your question, but the offset is supposed to give you two variables: a horizontal and a vertical. This defines the position of the element. So what you're looking for is:

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

and 

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

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

$("#whatever").offset().left + $("#whatever").outerWidth()
Greg
  • 7,782
  • 7
  • 43
  • 69
  • returns `NaN` (in vanilla js) `const offsetRight = (ui.offsetLeft + ui.outerWidth)` – L8R Oct 26 '22 at 21:16
9

Just an addition to what Greg said:

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

This code will get the right position relative to the left side. If the intention was to get the right side position relative to the right (like when using the CSS right property) then an addition to the code is necessary as follows:

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

This code is useful in animations where you have to set the right side as a fixed anchor when you can't initially set the right property in CSS.

Emphram Stavanger
  • 4,158
  • 9
  • 35
  • 63
cdZ
  • 99
  • 1
  • 1
6

Actually these only work when the window isn't scrolled at all from the top left position.
You have to subtract the window scroll values to get an offset that's useful for repositioning elements so 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));
Alessandro Minoccheri
  • 35,521
  • 22
  • 122
  • 171
jrosen
  • 61
  • 1
  • 1
5

Brendon Crawford had the best answer here (in comment), so I'll move it to an answer until he does (and maybe expand a little).

var offset = $('#whatever').offset();

offset.right = $(window).width() - (offset.left + $('#whatever').outerWidth(true));
offset.bottom = $(window).height() - (offset.top + $('#whatever').outerHeight(true));
Gary
  • 13,303
  • 18
  • 49
  • 71
5

There's a native DOM API that achieves this out of the box — getBoundingClientRect:

document.querySelector("#whatever").getBoundingClientRect().right
Barney
  • 16,181
  • 5
  • 62
  • 76
  • 2
    But getBoundingClientRect returns relative to the viewport not relative to the document,which is what offset() provides. – Sai Dubbaka Apr 05 '17 at 23:40
2

Getting the anchor point of a div/table (left) = $("#whatever").offset().left; - ok!

Getting the anchor point of a div/table (right) you can use the code below.

 $("#whatever").width();
Nazik
  • 8,696
  • 27
  • 77
  • 123
hyp3r byt3
  • 21
  • 1