jQuery get the location of an element relative to window

Question

Given an HTML DOM ID  how to get an element s position relative to the window in JavaScript JQuery   This is not the same as relative to the document nor offset parent since the element may be inside an iframe or some other elements   I need to get the screen location of the element s rectangle  as in position and dimension  as it is currently being displayed   Negative values are acceptable if the element is currently off-screen  have been scrolled off    This is for an iPad  WebKit   WebView  application   Whenever the user taps on a special link in an UIWebView  I am supposed to open a popover view that displays further information about the link   The popover view needs to display an arrow that points back to the part of the screen that invokes it

User · Answer

function trbl e  relative                var r     e  get 0  getBoundingClientRect    relative     relative                return                       t   r top      relative  scrollTop                           r   r right    relative  scrollLeft                          b   r bottom   relative  scrollTop                           l   r left     relative  scrollLeft                                   Example     trbl e  window

User · Answer

Try the bounding box  It s simple   var leftPos        element   0  getBoundingClientRect   left       window   scrollLeft      var rightPos       element   0  getBoundingClientRect   right      window   scrollLeft      var topPos         element   0  getBoundingClientRect   top        window   scrollTop      var bottomPos      element   0  getBoundingClientRect   bottom     window   scrollTop

User · Answer

Initially  Grab the  offset position of the element and calculate its relative position with respect to window  Refer   1  offset 2  scroll 3  scrollTop  You can give it a try at this fiddle  Following few lines of code explains how this can be solved  when  scroll event is performed  we calculate the relative position of the element with respect to window object    window  scroll function          console log eTop -   window  scrollTop           when scroll is performed in browser  we call the above event handler function  code snippet     x000D   x000D  function log txt    x000D        log   html  location    lt b gt     txt     lt  b gt  px   x000D    x000D   x000D    function     x000D    var eTop       element   offset   top    get the offset top of the element x000D    log eTop -   window  scrollTop       position of the ele w r t window x000D   x000D      window  scroll function       when window is scrolled x000D      log eTop -   window  scrollTop     x000D        x000D      x000D   element   x000D    margin  140px  x000D    text-align  center  x000D    padding  5px  x000D    width  200px  x000D    height  200px  x000D    border  1px solid  0099f9  x000D    border-radius  3px  x000D    background   444  x000D    color   0099d9  x000D    opacity  0 6  x000D    x000D   log   x000D    position  fixed  x000D    top  40px  x000D    left  40px  x000D    color   333  x000D    x000D   scroll   x000D    position  fixed  x000D    bottom  10px  x000D    right  10px  x000D    border  1px solid  000  x000D    border-radius  2px  x000D    padding  5px  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div id  log  gt  lt  div gt  x000D   x000D   lt div id  element  gt Hello x000D     lt hr gt World lt  div gt  x000D   lt div id  scroll  gt Scroll Down lt  div gt  x000D   x000D   x000D

User · Answer

TL DR  headroom by jQuery       id   offset   top -   window  scrollTop     headroom by DOM       id   0  getBoundingClientRect   top       if no iframe    getBoundingClientRect   appears to be universal    offset   and  scrollTop   have been supported since jQuery 1 2  Thanks  user372551 and  prograhammer  To use DOM in an iframe see  ImranAnsari s solution

User · Answer

Try this to get the location of an element relative to window    x000D   x000D             button   click function    x000D              var offset       simplebox   offset    x000D              alert  Current position of the box is   left      offset left      top      offset top         x000D              x000D       simplebox  x000D          width 150px  x000D          height 100px  x000D          background   FBBC09  x000D          margin  150px 100px  x000D        x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt button type  button  gt Get Box Position lt  button gt  x000D       lt p gt  lt strong gt Note  lt  strong gt  Play with the value of margin property to see how the jQuery offest   method works  lt  p gt  x000D       lt div id  simplebox  gt  lt  div gt  x000D   x000D   x000D    See more   Get the position of an element relative to the document with jQuery

User · Answer

function getWindowRelativeOffset parentWindow  elem            var offset                 left   0              top   0                       relative to the target field s document         offset left   elem getBoundingClientRect   left          offset top   elem getBoundingClientRect   top             now we will calculate according to the current document  this current            document might be same as the document of target field or it may be            parent of the document of the target field         var childWindow   elem document frames window          while  childWindow    parentWindow                offset left   offset left   childWindow frameElement getBoundingClientRect   left              offset top   offset top   childWindow frameElement getBoundingClientRect   top              childWindow   childWindow parent                    return offset           you can call it like this  getWindowRelativeOffset top  inputElement     I focus for IE only as per my requirement but similar can be done for other browsers

User · Answer

This sounds more like you want a tooltip for the link selected   There are many jQuery tooltips  try out jQuery qTip   It has a lot of options and is easy to change the styles   Otherwise if you want to do this yourself you can use the jQuery  position     More info about  position   is on http   api jquery com position       element   position    will return the current position of an element relative to the offset parent   There is also the jQuery  offset    which will return the position relative to the document

[javascript] jQuery get the location of an element relative to window

Examples related to javascript

Examples related to jquery

Examples related to ipad

Examples related to webkit

Examples related to webview