2

With jquery offset function we can find the coordinates of an element relative to the window.How does jquery do this?

Fistright
  • 175
  • 1
  • 11
  • 2
    Possible duplicate of [jQuery get the location of an element relative to window](http://stackoverflow.com/questions/3714628/jquery-get-the-location-of-an-element-relative-to-window) – shole May 31 '16 at 01:13
  • 1
    read the [source code](http://james.padolsey.com/jquery/#v=1.11.2&fn=jQuery.fn.offset) if you really want to know how – charlietfl May 31 '16 at 01:16
  • I have read but I haven't understood.I am new in javascript – Fistright May 31 '16 at 01:17
  • 1
    Then why is this really important? There are dom methods used by the browser for positioning all elements and thus being able to retrieve those positions. if you don't understand the source what sort of answer are you looking for? – charlietfl May 31 '16 at 01:18
  • Cause I am curious and because this information could be helpful in the future – Fistright May 31 '16 at 01:19
  • I have read the source code but I have not understood.Does the function do the sum of the offsets of all the parents of the element? – Fistright May 31 '16 at 01:21
  • Suggest you start by learning about the dom itself and what node objects in the dom are. Every element is a node object in the dom and has lots of properties. Position has to be all calculated by browser to be able to show it to you properly – charlietfl May 31 '16 at 01:22
  • Ok but with javascript there isn't a method that gives you the absolute position of an element.In jquery thus method is implemented and I don't understand how...I want just to know conceptually how jquery finds offset property – Fistright May 31 '16 at 03:26

2 Answers2

3

Jquery generally attempts to operate in a cross browser fashion, but it may help to understand some of the underlying options and principles.

Element.getBoundingClientRect() returns the size of an element and its position relative to the browser's viewport.

In reasonably modern browsers viewport and window dimensions can be interrogated using window.innerHeight and related (innerWidth, outerHeight, outerWidth) properties.

The coordinates of fixed position elements relative to the viewport can be obtained from interpreting their computed style values with respect to which viewport border the positioned element is relative.

Fall back options are to sum HTMLelement's offsetLeft and offsetTop values with those of all HTMLobjects in their offsetParent chain to calculate an element's cumulative offset within a rendered document, and then adjust calculated values for document's current X and Y scroll positions. MDN's article on window.scrollX gives an example of how to calculate scroll position in cross browser fashion.

This is intended as a set of documentation links for how jQuery code, or any other library or plain javascript code, might go about calculating window position. I have not attempted to investigate every browser bug the jQuery may quietly work around for you.

traktor
  • 17,588
  • 4
  • 32
  • 53
-1

Might be you are looking for .offsetParent()

Offset Parent

Sami
  • 3,686
  • 4
  • 17
  • 28
  • I want to say how this value is found.What are the passages that the function does to find that value? – Fistright May 31 '16 at 01:18
  • Assume an element is situated inside some other element and you want to position of #bar relative to #foo (it's parent) var elem = $("#bar"); var offset = elem.offset().left - elem.parent().offset().left; – Sami May 31 '16 at 01:24
  • 1
    working example http://stackoverflow.com/questions/10954931/how-to-get-offset-relative-to-parent-in-jquery – Sami May 31 '16 at 01:25
  • Sami...you are showing how to use the jQuery methods...OP is asking how they work under the hood. – charlietfl May 31 '16 at 01:26
  • Charlietfl, thanks for pointing it out. In first comment OP asked "how this value is found". I assumed he is after theory n code as well. – Sami May 31 '16 at 01:41