How can I possibly change Javascript's origin? For example, if I were to call offsetTop on a div, it's really tell me how far it is from the origin. Javascript's origin is at the top left of the page, but how can I move that?
I want to make it at the bottom left.
Your information about offsetTop is incorrect. From MDC:
offsetTop returns the distance of the current element relative to the top of the offsetParent node.
You cannot "move" the origin in the way you are thinking, though you could use a bit of math to compute the distance from the element's top edge to the bottom of the screen/page. Using jQuery (for clarity, so the code isn't mucked up with cross-browser feature detection):
var $doc = $(document),
docHeight = $doc.height(),
$elt = $('#some-element-id'),
top = $elt.offset().top,
// this is the value you're interested in
originShiftedTop = docHeight - top;
Demo. Try re-running the fiddle with different Result pane heights.
Note that jQuery's .offset() returns the position of the element relative to the document, unlike element.offsetTop the DOM-standard property. jQuery's .position() function behaves like element.offsetTop.
Related
What is the difference between getBoundingClientRect().top and offsetTop?
https://codepen.io/anon/pen/bWZWQg
const elem = document.querySelector('#find');
console.log('getBoundingClientRect: ' + elem.getBoundingClientRect().top);
console.log('offsetTop: ' + elem.offsetTop);
// Stuff to push the div down the page
<div id='find'>Find me</div>
From my quick test the only difference seems to be the number of decimal places returned.
getBoundingClientRect gives you offset relative to your client viewport, While offsetTop is always fixed static property. although it changes when the actual position of the element changes on document. For real clarification go to pen and you can check the difference your self.
If element is inside relative container then offsetTop will be relative to the given container
pen
console.log('offsetTop: ' + elem.offsetTop); //This is fixed. it get's calculated from beginning of your page to actual element's position.
console.log('getBoundingClientRect: ' + elem.getBoundingClientRect().top); // this will changing while scroll, because it's relative to your current view port.
see the pen, scroll the div and while doing that check the console.
In case container of the element is relative then
console.log('offsetTop: ' + elem.offsetTop) // //This is fixed. it get's calculated from beginning of your top most relative container.
The HTMLElement.offsetTop read-only property returns the distance of the current element relative to the top of the offsetParent node.
getBoundingClientRect() is a very useful, cross browser safe method that returns top, right, bottom, and left position of any element relative to the viewport.
The method getBoundingClientRect may not be as good in performance as offsetLeft (doc here), but if you wanna know an element's position after it transformed by CSS, or even still in transition animation, it is the best choice (maybe the only way).
Here is a Related answer.
I'm trying to determine what would be the best way to know the "visual" position (not the DOM tree position) of an element in relation to another element.
For example, I have an array of elements, and I have a slected element, and want to know which of those elements are visually positioned to the right of the selected element.
Also note that the elements can be of any tag type, and may have any position (relative, absolute, fixed) and display (as long as it's visible).
Any jQuery solutions are welcome.
Why not simply use element.offsetTop and element.offsetLeft where offsetTop is the y-axis, and offsetLeft is the x-axis.
No jQuery needed at all, though if you insist $(element).offset(); will probably do.
Note that the top-left corner of the window is the 0-0 point. elements "stuck" to the left will have offsetLeft === 0, the ones to tsticking to the top have offsetTop === 0. That's all there is too it, really
In response to zeaklous' comment:
To get the dimensions of an object:
var dimension = {top: {x: element.offsetLeft, y: element.offsetTop},
bottom: {x: element.offsetWidth, y: element.offsetHeight}
};
Be advised, that offsetWidth and offsetHeight have been known to return 0 in some cases where the DOM has just been redrawn (getting these properties from an element you've just altered can cause this).
To avoid that, some people tend to use setTimeout(); when getting the offset of an element that they suspect might just have been altered.
In response to the comments, I've been pointed out that you can simply use getBoundingClientRect to avoid any issues with the offsetX properties:
document.getElementById('foo').getBoundingClientRect();
This returns an instance of the ClientRect object, with which you can play. Check MDN for details
Strange request, but I need to get the current browser scroll position as a variable. What js or jquery function should I use? I need it to figure out what elements to display on the side. I've found a few things online but nothing that works for my div, just the full page.
cross browser variant
$(document).scrollTop();
Older IE and Firefox browsers attach the scrollbar to the documentElement, or what would be the <html> tag in HTML.
All other browsers attach the scrollbar to document.body, or what would be the <body> tag in HTML.
The correct solution would be to check which one to use, depending on browser
var doc = document.documentElement.clientHeight ? document.documentElement : document.body;
var s = $(doc).scrollTop();
jQuery does make this a little easier, when passing in either window or document jQuery's scrollTop does a similar check and figures it out, so either of these should work cross-browser
var s = $(document).scrollTop();
or
var s = $(window).scrollTop();
jQuery scrollTop() docs
Description: Get the current vertical position of the scroll bar for
the first element in the set of matched elements or set the vertical
position of the scroll bar for every matched element.
...nothing that works for my div, just the full page
If it's for a DIV, you'd have to target the element that has the scrollbar attached, to get the scrolled amount
$('div').scrollTop();
If you need to get the elements distance from the top of the document, you can also do
$('div').offset().top
I believe the best method with jQuery is using .scrollTop():
var pos = $('body').scrollTop();
Use scrollTop() to get or set the scroll position.
I want to display an overlay (html div) when a user clicks on an element in an SVG diagram. To visualize the problem I'm having, suppose that the SVG image has a horizontal row of 6 elements. At the click event, I get the element's coordinates and use them to display the overlay next to it. The problem is that as I click the elements from left to right, I notice that the horizontal offset between the element and the overlay keeps getting smaller. That is, the 6th element displays the overlay much closer to it than the first element. This happens in both Chrome and FF, and it's an issue because sometime the overlay covers the element itself.
At first I was using JQuery's position() property, which didn't exhibit the behavior that I described above, but it returned very different values in Chrome and Firefox, plus it is not officially supported by JQuery on svg elements. So I tried with DOM's standard offsetLeft and offsetTop, as well as svg's x.animVal.value property and various libraries that I found on the web, but they all have the same erratic offset problem. I presume that this happens because the svg image is scaled, so I'm looking for I way to just get an svg's element position relative to the actual html document which contains it. Is there a way to do this?
In case you haven't worked something out since March (and for anyone else having this problem), try getBoundingClientRect() on your SVG node.
Returns a ClientRect object that gives you top, bottom, left, right, width, and height relative to the document. Was able to use this to position Twitter Bootstrap popovers (divs) next to SVG rects.
jQuery's position() does not work well for SVG elements. There is a ticket for that.
You can use the native SVG method getBBox() to get the position of a SVG element.
Example
$('svg circle')[0].getBBox();
You can get the position coordinate relative to the page of any element, also <svg>, with this little function:
function getOffset(element)
{
var bound = element.getBoundingClientRect();
var html = document.documentElement;
return {
top: bound.top + window.pageYOffset - html.clientTop,
left: bound.left + window.pageXOffset - html.clientLeft
};
}
var offset = getOffset(svg);var x = offset.left;var y = offset.top;
live demo: https://codepen.io/martinwantke/pen/rpNLWr
Is there a way to measure the offset of the window in jQuery, in order than I might compare the positions of a 'fixed' element and a relatively positioned one?
I need to be able to tell how far the window is scrolled so I can use the figure to calculate the difference between the height of the fixed element (which is relative to the viewport top) and the relative object (which is relative to the top of the document)
$(window).scrollTop() and $(window).scrollLeft() can be used to find scroll positions.
Using plain Javascript without jQuery should be window.pageXOffset and window.pageYOffset, which return the number of pixels offset by scrolling.
Source: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY
document.body.offsetWidth;
and
document.body.offsetHeight;
By using these javascript functions you can get actual width and height of the browser window