We Keep Coding

pageY of scrolled element from mouseenter event?

I have a long, scrollable list in an absolutely positioned container in the middle of my page (I do know how far the container is offset from the top of the screen, and the overflow is hidden on all the key elements). Each li in the list has a mouseover event. The events I see have a pageY in it, but that's the mouse position, and thus varies if I enter the li from above vs below. I need a constant value to position something alongside.
I looked in the srcElement property but the offsetTop within that is several 1000s, which means it is not based on the viewable content but the scrolled content.
How can I get a constant value of a scrolled div relative to the window as whole?
Note I canNOT easily run other DOM requests.

You can use the offsetTop you mentioned and substract the current scrollYOffset which you can get using window.pageYOffset.
var y = srcElement.offsetTop - window.pageYOffset;

Getting different height click position by scrolling main page

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.

How to get the relative position of an object inside a scrollable div?

I have a scrollable div, the one on the left in the above image.
In this div there exist many elements, lets focus on one of them (highlighted in grey) and call it A.
The right image is a representation of the div with the full size (without scroll or width setting) where A is placed without scrolling.
How may I find the value of X (in green), while having the left div currently on the page. i.e. taking into consideration:
The div on page is already resized
The div on page is scrollable (and has been scrolled)
I want x not y !
i.e. How to get the relative y coordinate of an element inside a scrollable div ?
in simple words: how to calculate x via javascript ?

Try this :
var elementTop = document.getElementById('yourElementId').offsetTop;
var divTop = document.getElementById('yourDivId').offsetTop;
var elementRelativeTop = elementTop - divTop;

The approved answer doesn't work if the scrollable div is scrolled. Because it only gets the position of the child element relative to the visible top of the scrollable parent. But if the parent is scrolled, the actual top is no longer the visible top.
This works in all cases:
var topPos = $(elem).offset().top + $(elem).parent().scrollTop() - $(elem).offsetParent().offset().top;

Moving absolutely positioned image according to container div's position in the browser window

I have a div with a relative position (div 1). It contains an image (shown as the green block) with an absolute position which by default is hidden way off to the left of the browser window.
I'd like to make it so that when div 1 is in the center of the browser window as the user scrolls down, the image is moved in slightly from the left and appears on the screen. As the user begins to scroll down past div 1, I'd like the image to move back to its original offscreen position.
I have attached a picture to try and make a bit more sense.
I have a feeling this is possible using JavaScript or jQuery but I'm not sure how. Any help would be greatly appreciated.
Ian

You'll want to bind a handler to the scroll event of the window, and measure the ratio of how far down the page the user has scrolled - then, position the image accordingly. I built a rough prototype; you should be able to tweak sizes and positions to make it work for you.
The JS for the prototype, which depends on the HTML and CSS in the JSFiddle linked above, is as follows:
var $main = $('.main');
var $tgt = $('.targetMover');
var origLeft = $tgt.position().left;
var maxLeft = 200;
$main.scroll(function(ev){
var ratio = $main[0].scrollTop / $main[0].scrollHeight;
var newLeft = origLeft + ( (maxLeft - origLeft) * ratio);
$tgt.css({left:newLeft});
});

You would want to position the image on scroll. You would basically check what the position of the div is, set the top of the image to the same as the div, and set the left to whatever you like. you could use jquery animate for this to make it "move" to that position. You then would have to manage to do an scrollstop event (which doesn't exist), and hide the image again. See: http://james.padolsey.com/javascript/special-scroll-events-for-jquery/ for scrollstop implementation (taken from the below post).
You might want to read through jQuery - fadeOut on Scroll / fadeIn on "scrollstop"

Attempt to keep element in center of screen but contained in parent element

We have a script used to edit certain files inline. Basically, each file is broken down into sections, and hovering over a section will bring up a set of tools (just a div with image buttons) that you can use to edit that particular section. We have the parent elements (sections) set as position: relative, and the set of tools set as position:absolute which are set to the right side of the section. This all works fine, especially since many of these are rather small.
However, we do have many of these sections which can become quite large, reaching lengths of two screens or even more. In these cases we would like for the tools to sort of flow with the user's scrolling, so say if the user is looking at the vertical-middle of the section, the buttons will rest at the vertical middle as well, however, if the vertical center of the user's screen scrolls past the section but the user is still hovering over the section, we would like for the tools to remain within their parent element and not be able to pop out.
We already have a script to move an element with the user's scroll if it goes out of the screen, so I was thinking I could modify that a bit to do that, I'm just not sure how to bound the element by it's parent.
TL;DR: How would I create an element that attempts to be vertically centered in the user's window, but cannot leave it's parent element.

Keeping it vertically aligned but only displayed when the section is hovered wouldn't do the trick?

This sounds like a manual positioning. You could use jquery to get the size of the browserwindow, get the scroll offset of the parent and calculate the top of the tools acording to screensize and scrolloffset value of the parent.
I don't thin css can handle this alone.
You could also just use one toolbox for all sections and pass the parent element as parameter.
Best wishes

Here's a quick implementation I came up with based on Andreas's suggestion
$(window).scroll(function(){
var a = $(window).scrollTop() + ($(window).height() * .35);
var b = $("#movedelement");
var c = $(window).scrollTop() + ($(window).height() * .48);
if (a < (b.parent().offset().top + 8))
b.css({position: "absolute", top: "1em" });
else if (c > (b.parent().offset().top + b.parent().height() - 8))
b.css({position: "absolute", top: b.parent().height() - 100 });
else
b.css({position: "fixed", top: "35%" });
}
Tweak some numbers around for the element height. Dirty, but works.