I have a game where I move a target and drop it on foils. I know where I put the foils, but I wanted to know where they are in relation to the window if the window is scrolled or resized. This isn\u2019t exactly what I was needing, but it\u2019s useful enough that I might need it in the future. <\/p>\n
\n\/\/ Find the position of elements\nfunction getOffset(element) {\n element = element.getBoundingClientRect();\n return {\n left: element.left + window.scrollX,\n right: element.right + window.scrollX,\n top: element.top + window.scrollY,\n bottom: element.bottom + window.scrollY\n }\n}\nfunction whereAreTheFoils() {\n \/\/ Find out where things are for initial setup and debugging\n var foil0 = document.getElementById('foil_0');\n var foil1 = document.getElementById('foil_1');\n var foil2 = document.getElementById('foil_2');\n var foil3 = document.getElementById('foil_3');\n console.log('Foil 0 is at LR ' + getOffset(foil0).left + ', ' + getOffset(foil0).right );\n console.log('Foil 0 is at TB ' + getOffset(foil0).top + ', ' + getOffset(foil0).bottom );\n\n console.log('Foil 1 is at ' + getOffset(foil1).left + ', ' + getOffset(foil1).top );\n console.log('Foil 2 is at ' + getOffset(foil2).left + ', ' + getOffset(foil2).top );\n console.log('Foil 3 is at ' + getOffset(foil3).left + ', ' + getOffset(foil3).top );\n}<\/code><\/pre><\/p>\n","protected":false},"excerpt":{"rendered":"I have a game where I move a target and drop it on foils. I know where I put the foils, but I wanted to know where they are in relation to the window if the window is scrolled or resized. This isn\u2019t exactly what I was needing, but it\u2019s useful enough that I might … Continue reading Getting the position of elements on the screen<\/span><\/a><\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[33],"tags":[],"class_list":["post-2479","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=\/wp\/v2\/posts\/2479","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2479"}],"version-history":[{"count":0,"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=\/wp\/v2\/posts\/2479\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2479"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2479"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2479"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}