Get bottom and right position of an element

Question

I m trying to get the position of an element within the window like so   var link     element    var offset   link offset    var top   offset top  var left   offset left  var bottom     window  height   - link height    bottom   offset top - bottom  var right     window  width   - link width    right   offset left - right    However the bottom and right have - in front of them    Why is this  as the numbers are correct just they should NOT be minus

User · Answer

Returns bottom offset value   or - from viewport top function offsetBottom el  i    i   i    0  return   el  i  getBoundingClientRect   bottom       Returns right offset value function offsetRight el  i    i   i    0  return   el  i  getBoundingClientRect   right    var bottom   offsetBottom   logo    var right   offsetRight   logo      This will find the distance from the top and left of your viewport to your element s exact edge and nothing beyond that   So say your logo was 350px and it had a left margin of 50px  variable  right  will hold a value of 400 because that s the actual distance in pixels it took to get to the edge of your element  no matter if you have more padding or margin to the right of it   If your box-sizing CSS property is set to border-box it will continue to work just as if it were set as the default content-box

User · Answer

You can use the  position   for this  var link     element   var position   link position      cache the position var right     window  width   - position left - link width    var bottom     window  height   - position top - link height

User · Answer

Vanilla Javascript Answer  var c   document getElementById  myElement   getBoundingClientRect    var bot   c bottom  var rgt   c right    To be clear the element can be anything so long as you have allocated an id to it  lt img gt   lt div gt   lt p gt  etc   for example   lt img     id  myElement      src   img logout png      className  logoutImg img-button      alt  Logout    gt

User · Answer

I think   lt script src  http   ajax googleapis com ajax libs jquery 1 11 0 jquery min js  gt  lt  script gt    lt div gt Testing lt  div gt   lt div id  result  style  margin 1em 4em  background rgb 200 200 255   height 500px  gt  lt  div gt   lt div style  background rgb 200 255 200   height 3000px  width 5000px   gt  lt  div gt    lt script gt   function        var link     result         var top   link offset   top     position from   document  offset   top     var bottom   top   link height       position from   document  offset   top      var left   link offset   left     position from   document  offset   left     var right   left   link width       position from   document  offset   left      var bottomFromBottom     document  height   - bottom         distance from document s bottom     var rightFromRight     document  width   - right         distance from document s right      var str         str   top    top   lt br gt        str   bottom    bottom   lt br gt        str   left    left   lt br gt        str   right    right   lt br gt        str   bottomFromBottom    bottomFromBottom   lt br gt        str   rightFromRight    rightFromRight   lt br gt        link html str          lt  script gt    The result are  top  44 bottom  544 left  72 right  1277 bottomFromBottom  3068 rightFromRight  3731   in chrome browser of mine   When the document is scrollable    window  height   returns height of browser viewport  not the width of document of which some parts are hiden in scroll  See http   api jquery com height

User · Answer

Here is a jquery function that returns an object of any class or id on the page       var elementPosition   function idClass                var element     idClass               var offset   element offset                 return                    top   offset top                   right   offset left   element outerWidth                     bottom   offset top   element outerHeight                     left   offset left                                      console log elementPosition   my-class-or-id

User · Answer

var link     element   var offset   link offset     var top   offset top  var left   offset left   var bottom   top   link outerHeight    var right   left   link outerWidth

User · Answer

Instead of  var bottom     window  height   - link height    bottom   offset top - bottom    Why aren t you doing  var bottom     window  height   - top - link height      Edit  Your mistake is that you re doing  bottom   offset top - bottom    instead of  bottom   bottom - offset top     or bottom -  offset top

[jquery] Get bottom and right position of an element

Examples related to jquery