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
Related
How can i get the position of an element relative to its parent?
Let's suppose we have an image object called 'clone', and a div as its parent:
var parent = clone.parent().offset();
var pos = clone.offset();
If i drag the image right in the top left corner of the div i will get as result almost the same values. But what about if i do this:
var top = pos.top - parent.top;
var left = pos.left - parent.left;
it'll give me the relative position of the image to its parent, right? But what happen if i have to store those values and display them on a different browser size?
The answer it's pretty easy, they won't show inside the div because the position may change.
After this little explaination, my question is:
Is there a way to avoid this kind of problem, and directly take the relative position to its parent?
This is the actual code i'm using, so you can give a look, and try to figure out how to make it works properly! http://dpaste.com/3M1MGQW
Have you set position: relative; to the parent so the positions are relative to it?
Well, any possitioning other tha static will work, but relative without specifing top and left may be the most painless
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.
I'm looking for a way for javascript to tell how far a user has scrolled down the screen.
Instead of doing this through x, y coordinates is there a way to pull what's at the top of the viewport?
Either the text / line number or the current top element in the viewport?
No, you can't.
You have to set scroll events and update x and y values.
Then, with those values, you can get the element at this position.
https://developer.mozilla.org/en/DOM/document.elementFromPoint
http://msdn.microsoft.com/en-us/library/ms536417%28VS.85%29.aspx
Have a look at jQuerys scrollTop()
This should probably do it for you:
$("body").scrollTop()
Just found the link with a visible element with position:fixed behaves kinda strange:
http://www.steadyhealth.com/Do_you_need_to_use_a_back_up_method_for_the_first_week_of_every_month_while_on_birth_control__t267326.html
The element is div with id equals to centerMessages. It appears to be green, visible and ... moving. How come that a fixed element is moving as the page is scrolled? Or, in other words, which part of the spec I need to re-read/re-learn please?
The div does not move when you scroll. It contains no content, so you can't see it.
Fixed position just means that the element doesn't move relative to the scroll position of the page; it can still be given a position relative to the browser window. You can change this position using CSS and 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;