Finding element's position relative to the document
You can traverse the offsetParent
up to the top level of the DOM.
function getOffsetLeft( elem )
{
var offsetLeft = 0;
do {
if ( !isNaN( elem.offsetLeft ) )
{
offsetLeft += elem.offsetLeft;
}
} while( elem = elem.offsetParent );
return offsetLeft;
}
Get position/offset of element relative to a parent container?
element.offsetLeft
and element.offsetTop
give an element's position with respect to its offsetParent
(which is the nearest parent element with a position of relative
or absolute
.)
jQuery get the location of an element relative to window
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
function log(txt) { $("#log").html("location : <b>" + txt + "</b> px")}
$(function() { var eTop = $('#element').offset().top; //get the offset top of the element log(eTop - $(window).scrollTop()); //position of the ele w.r.t window
$(window).scroll(function() { //when window is scrolled log(eTop - $(window).scrollTop()); });});
#element { margin: 140px; text-align: center; padding: 5px; width: 200px; height: 200px; border: 1px solid #0099f9; border-radius: 3px; background: #444; color: #0099d9; opacity: 0.6;}#log { position: fixed; top: 40px; left: 40px; color: #333;}#scroll { position: fixed; bottom: 10px; right: 10px; border: 1px solid #000; border-radius: 2px; padding: 5px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="log"></div>
<div id="element">Hello <hr>World</div><div id="scroll">Scroll Down</div>
Using jquery to get element's position relative to viewport
Look into the Dimensions plugin, specifically scrollTop()
/scrollLeft()
. Information can be found at http://api.jquery.com/scrollTop.
Javascript get an Element's position relative to the screen's top left corner
Using the jQuery .offset() function, you can get the coordinates of the top-left of the browser page:
var offset = $("selector").offset();
Combining that with the Javascript window.screenX and window.screenY window properties, you can calculate the position of the element as an offset from the top/left of the screen:
var screenY = offset.top + window.screenX;
var screenX = offset.left + window.screenY;
Note that window.screenX
and window.screenY
are standard in most browsers, but IE versions 8 and prior use window.screenTop
and window.screenLeft
, instead. If you need compatibility with IE8 or earlier, make sure to take that into account.
Also note that you might need to account for the current scroll position, in which case, you would use the jQuery .scrollTop() and .scrollLeft() methods and subtract from the offset value.
Unfortunately, this will not take window borders or toolbars into account. To do that, you can capture a mouse move and store the mouse position, which is given in actual screen coordinates.
The core of this solution is the following, which installs a one-time-use mouse handler to determine the actual screen coordinates of the page:
var pageX;
var pageY;
window.onmousemove = setMouseCoordinates;
function setMouseCoordinates (e) {
window.onmousemove = null;
pageX = e.screenX - e.clientX;
pageY = e.screenY - e.clientY;
}
Then, you can use those stored values to calculate the offset of any Javascript element:
x = pageX + elem.offsetLeft;
y = pageY + elem.offsetTop;
or jQuery element:
x = pageX + elem.position().left;
y = pageY + elem.position().top;
Check out the fiddle to see it in action: https://jsfiddle.net/mgaskill/bpqzct3f/
Element's coordinates relative to its parent
You can use getBoundingClientRect()
, simply subtracting the coordinates of the parent:
const parentPos = document.getElementById('parent-id').getBoundingClientRect();
const childPos = document.getElementById('child-id').getBoundingClientRect();
const relativePos = {};
relativePos.top = childPos.top - parentPos.top,
relativePos.right = childPos.right - parentPos.right,
relativePos.bottom = childPos.bottom - parentPos.bottom,
relativePos.left = childPos.left - parentPos.left;
console.log(relativePos);
// something like: {top: 50, right: -100, bottom: -50, left: 100}
Now you have the coordinates of the child relative to its parent.
Note that if the top
or left
coordinates are negative, it means that the child escapes its parent in that direction. Same if the bottom
or right
coordinates are positive.
Working example
var parentPos = document.getElementById('parent-id').getBoundingClientRect(),
childPos = document.getElementById('child-id').getBoundingClientRect(),
relativePos = {};
relativePos.top = childPos.top - parentPos.top,
relativePos.right = childPos.right - parentPos.right,
relativePos.bottom = childPos.bottom - parentPos.bottom,
relativePos.left = childPos.left - parentPos.left;
console.log(relativePos);
#parent-id {
width: 300px;
height: 300px;
background: grey;
}
#child-id {
position: relative;
width: 100px;
height: 200px;
background: black;
top: 50px;
left: 100px;
}
<div id="parent-id">
<div id="child-id"></div>
</div>
Get coordinates of element relative to enclosing svg
As I said in my comment, you can use getBoundingClientRect for this:
<!DOCTYPE html><html>
<head> </head>
<body> <svg width="500" height="500"> <g transform="translate(100,100)rotate(45)"> <text id="myText" x="10" y="10" style="fill:red">Hi Mom!</text> </g> </svg> <script> var rect = document.getElementById("myText").getBoundingClientRect(); console.log("position is " + rect.top + "," + rect.left); </script> </body>
</html>
Related Topics
How to Add Many Functions in One Ng-Click
Window.Onunload Is Not Working Properly in Chrome Browser. Can Any One Help Me
How to Access Component Methods from "Outside" in Reactjs
How to Parse a Url Query Parameters, in JavaScript
How to Add Predefined Length to Audio Recorded from Mediarecorder in Chrome
Access-Control-Allow-Origin Denied Spotify API
Is There a Sleep Function in JavaScript
React Router Doesn't Work in Aws S3 Bucket
Firestore: Query by Item in Array of Document
How to Remove Element from an Array in JavaScript
How to Automatically Reload a Page After a Given Period of Inactivity
Is Onload Equal to Readystate==4 in Xmlhttprequest
Associative Array Versus Object in JavaScript
Destructuring and Rename Property