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()
Related
I'm trying to create a spot the difference game with jQuery.
Basically, several images stacked, positioned absolutely in a container. Above the container there is the page header with a logo and a menu, which takes altogather about 120px above the images container.
When someone clicks an area inside the image, I put there a new div, with either a correct (V) mark, or a wrong (red X).
I'm trying to get the position of the click inside the element, using the following code (the following used event variable e is returned in the click event just to be clear):
var parentOffset = $(this).parent().offset();
var topOffset = e.clientY - offset.top;
My problem is that the offset from the top changes when I scroll the page down a little to the footer area, and then I do not position the new marker div in the correct height.
When I'm scrolled to the top of the page, the mark is position correctly.
I've created such a game before, but can't understand why suddenly the calculation is wrong :\
Seems that I get the distance minus the scroll height, but not sure.
Thanks for your insight,
Yanipan
I played around with Firebug a little and it looks like e.originalEvent.layerY is exactly what you're looking for.
It always shows the absolute coordinates of your click within the clicked object, no matter where the screen is scrolled.
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
I want to create auto-hide menu, just the same thing like http://www.ringvemedia.com/shanghai-photos but the problem is that I also have content that is scrolling down so if I calculate pointerY it will return mouse absolute position so it could be 1000...999999 depends on how many content you have to scroll down, that why I cant use something like "if (pointerY+50) >= document.viewport.getDimensions().height then $("somethind").show();". What I want is to somehow calculate that mouse right now is on bottom of the screen (+- 50px) (not the content).
I think I have confused even myself :) hope someone will understand what I wrote.
I think you have to use document.viewport.getScrollOffsets() and then substract the pointerY with the scroll offset to get the position in the viewport.
I have a "box" popup that appears on mouseover for some links. The box is about 300px tall and the top side of the box is on the same level as the link position, however some of these links are at the lowest scrollable part of the page, thus the popup will be cut off.
Question
What values are used to detect the bottom of the page, or remaining scrollable distance to the bottom so that you can shift the popup as required?
I'm using jQuery, but a generic JavaScript solution is also welcome for reference.
Thank you.
Basically you want to find the bottom of the viewport relative to the document, and then compare them to the coordinates of the incoming event.
function handler(event) {
var bottomOfViewport = $(window).scrollTop() + $(window).height();
var bottomOfBox = event.pageY + HEIGHT_OF_BOX;
if ( bottomOfViewport < bottomOfBox )
// code to handle overflow condition
}
Thankfully, the pageX and pageY properties are relative to the document. Similar holds for the x-axis.
In JS, how can I get the mouse coordinates inside a DIV? if I use event.pageX, it will only work if the DIV is at the top left corner of the page... otherwise, I have to know the position of the DIV in the page and subtract event.pageX from that. This is hard to do when I generate the DIVs dynamically since I have to keep track of the position of each DIV. Any ideas?
It seems like event.layerX and event.layerY works find in FF if I define the DIV with an absolute position. Here is a short example:
http://www.zangware.com/divpos.html
But in IE, event.layerX/Y is undefined inside the DIV. Any ideas?
It sounds to me like you answered your own question. I'm not aware of any shortcuts for finding the cursor position from within a div simpler than subtracting the x and y coordinates of the mouse from the x and y coordinates of the upper left corner of the div. Just make sure you cache the location of the div as it changes to avoid a DOM lookup each time the mouse cursor moves.
It's not too hard. Each element has an offsetTop and offsetLeft property. You can use that with current mouse position to figure out the relative position.