Calculate element-position - javascript

I would like to calculate the vertical position of a <div> with jQuery.
How would I do this?
Here's an illustration describing what I mean:

I think you're looking for its offset from the top of the page, right?
$('#div').scrollTop();
If that's not it, maybe the offset would work:
$('#div').offset().top;
Okay, now that it needs to be relative to the parent, try this:
$('#div').position().top;

$('#innerDiv').position()
Get the current coordinates of the
first element in the set of matched
elements, relative to the offset
parent.
jQuery Manual for position()

I think you're looking for
$(elem).offset();
http://api.jquery.com/offset/
If you want it relative to it's container, then you're after http://api.jquery.com/position/ instead.

jQuery has several functions to help you find the offset that you are looking for.
var element = $("#your_element");
// Get the current coordinates of the first element in the set of matched elements, relative to the document.
element.offset()
// Get the closest ancestor element that is positioned.
element.offsetParent()
// Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.
element.position()
// Get the current horizontal position of the scroll bar for the first element in the set of matched elements.
element.scrollLeft()
// Get the current vertical position of the scroll bar for the first element in the set of matched elements.
element.scrollTop()
For more information read about these at the jQuery offset api page.

I reckon that the jQuery API "position()" isn't what you are looking for, since it is defined as "the current position of an element relative to the offset parent" (basically it corresponds to element.offsetTop)
Therefore if you want the top position of the element relative to its parent (not necessary the offset parent), use this instead:
var top = (element.parentNode == element.offsetParent) ? element.offsetTop : element.offsetTop - element.parentNode.offsetTop;

Related

Top property is not honored in table row

Is it possible to keep the top row moving like we move the first column in a table using jQuery?
The code I used to keep the first column moving during scroll is something like this.
$('#table-name').scroll(function () {
var _left = $(this).scrollLeft();
$('.firstTd').css('left', _left);
});
when I use the same technique to top property to a table row...through the CSS gets applied it is not honored by the browsers.
P.S: I used left property on td element and want to apply the same technique to a tr tag
Demo here: https://jsfiddle.net/8w4qac30/7/
EDIT
Oops, understood the question bad. I'll keep the info below, but actually my answer is this.
As trs are quite picky, the only thing I can think of is to select all the tds and move them, like you do with the first one, like this: https://jsfiddle.net/8w4qac30/9/
Old answer
left, top, right and bottom are positioning attributes, and for them to work you should set the position attribute too.
position attributes come in different flavors:
relative means to position the element relative to itself, so if you add, for example, left: 20px to a relative positioned element, it simply will shift its position 20 pixels to the left.
absolute means to position the element relative to the first parent that is also relative or absolute positioned.
fixed means to position the element relative to the browser window and will keep fixed during scrolls without additional code. I think that you should go this way.
Check this:
Check the positions here: https://www.w3schools.com/cssref/pr_class_position.asp

JQuery Object has offsetTop value different than what offset function returns

So i'm trying to figure out something going on with jQuery's offSet function and the actual objects offset. When I do console.log for my object it shows an offsetTop of 21294. However when I do the jQuery function call for offset().top, im getting 22069. The body had no padding or margin, so im at a bit of a loss of why everything is returning so differently. There is a top margin of 30 on the object, but that is about it.
They do different things.
From jQuery's site for offset:
Get the current coordinates of the first element, or set the coordinates of every element, in the set of matched elements, relative to the document.
From Mozilla's JS docs on offsetTop:
The HTMLElement.offsetTop read-only property returns the distance of the current element relative to the top of the offsetParent node.
So you are measuring one relative to the document, one relative to the offsetParent node.
Typically a positioned div or table will act as an offset container to any element contained inside them.
In your case it appears to be div#resizable.main-content

how to get top and left properties of offsetParent div?

As we can get offset top of an element by using like this:
$(selector).offset().top;
But how can we get the top value of parent offset div?
I've tried like this but doesn't work?
$(selector).offsetParent().top;
Um, you can use like this:
$(selector).offsetParent().offset().top;
see documentation on offsetParent
offsetParent doesn't get offset value but it just select the closest positioned parent div. You can get the offset/position by using offset and position.
demo
Try to use parent() like,
$(selector).parent().offset().top;
Read Get position/offset of element relative to a parent container?
Don't forget you have to go get offsets all the way to the topmost parent. If you have enough nested content it's probably worth writing a recursive function to get after it.

How to calculate where an element should be without moving it?

I need to change the horizontal position of an element. To do this I change its left attribute with .css('left', value). That would move the element relative to where it should be if there was no left value defined.
Now I need to recalculate the position to move the element somewhere else, to do that I need the position where the element should be if I had not changed its left attribute.
I could remove the left value and ask for its position but then the element would also move and would like to avoid that since I may make the element jump between positions.
How could I get the position where the element would be?
The element doesn't jump between position if you change the left style multiple times. As long as your function is running, there are no updates in the browser. You can safely reset the left style, get the positon, and then set a new left value.
One way would be to read the default left value of the element on DOM-ready and add it to the element as a data-* attribute on the element - let's call it data-default-left or something similar. You could then always refer to that value when you need the default value further on.
The data-* are easy to work with using jQuery's .data() method.
Setting left to 0, recalculating, and setting left to the new position would be the easiest change in your case. In my experience the browser will not repaint between css updates.
Some other options:
Use absolute positioning instead of relative. Then you're origin is consistent.
Use the jQuery UI position plugin. It lets you set the position of an element relative to another. Very useful.
how about use .data() to store this info before starting moving it? Then u just gather it back there everytime u need.
Simple. Store the initial left amount in a variable on dom load and then reference it later when you do your other calculations:
$(function () {
var $element = $("#ME_ELEMENT_ID");
var initialLeft = $element.offset().left;
// Change your left here
$element.css('left', '200px');
// initialLeft still contains the old value
});

Get the current top position of an element

I need to get a position of an element on a page from the top of the element (div) to the current position of the top of the window. I DO NOT want the position relative to the top of the page (seems offset and position are doing this?)
get the offset of the parent element, then get the offset of the child element, then substract one from the other - boom you got the information you were looking for.
Try:
var top= $('#element').offset().top+ $(document).scrollTop();
use $(element).offset().top:
$(".element").offset().top;
and apply it to your page...
Good luck

Categories