Search code examples
htmlruby-on-railsrubydomposition

Retrieve the position (X,Y) of an HTML element in Ruby

I have this example that displays some arbitrary text from the user:

<html>
 <head></head>
  <body>
     <%= @article.text %>    
  </body>
</html>

I want to know how to get the X and Y position of HTML elements such as @article.text using Ruby.

Solution

  • Set some id to element

    <html>
<head></head>
<body>
  <div id="my-id">
    <%= @article.text %>
  </div>
</body>
</html>

    And get position in JS with getBoundingClientRect

    const getCoordinates = (element) => {
  const box = element.getBoundingClientRect()

  return {
    top: box.top + window.pageYOffset,
    right: box.right + window.pageXOffset,
    bottom: box.bottom + window.pageYOffset,
    left: box.left + window.pageXOffset
  }
}

const element = document.getElementById('my-id')

const coordinates = getCoordinates(element)

console.log(coordinates)

    Reference:

    https://javascript.info/coordinates