how to get right offset of an element? - jQuery

JqueryOffset

Jquery Problem Overview


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!!

Jquery Solutions


Solution 1 - Jquery

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 )

Solution 2 - Jquery

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

Reference: .outerWidth()

Solution 3 - Jquery

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()

Solution 4 - Jquery

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.

Solution 5 - Jquery

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

Solution 6 - Jquery

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

Solution 7 - Jquery

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

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

Solution 8 - Jquery

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();

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAlexView Question on Stackoverflow
Solution 1 - JqueryBrendon CrawfordView Answer on Stackoverflow
Solution 2 - JqueryjAndyView Answer on Stackoverflow
Solution 3 - JqueryGregView Answer on Stackoverflow
Solution 4 - JquerycdZView Answer on Stackoverflow
Solution 5 - JqueryjrosenView Answer on Stackoverflow
Solution 6 - JqueryGaryView Answer on Stackoverflow
Solution 7 - JqueryBarneyView Answer on Stackoverflow
Solution 8 - Jqueryhyp3r byt3View Answer on Stackoverflow