Question

I am learning javascript sample from this page and I am using IE 7 on Windows 7,

http://nofunc.org/AJAX_Star_Rating

For this sample, I am confused about this statement of function document.onmousemove,

var p = abPos($('star' + n))
    , x = XY(e)
    , oX = x.X - p.X
    , oY = x.Y - p.Y; s
tar.num = o.id.substr(4);

My specific confusion is if I scroll down the browser horizontal bar (see the screen snapshot below), for the 5th star (I moves my mouse over 5th star to measure the positions), x.Y descrease, but p.Y never changes. Any ideas what is wrong?

Screen snapshot to show this error, http://i52.tinypic.com/4vhi7c.png

For example, before I scroll down the browser horizontal bar, for the 5th star, x.Y/p.Y are 492/477, but after I scroll down, x.Y/p.Y are 380/477.

document.body.scrollTop is always 0 even if scroll down, I have used the below alert to debug.

EDIT 1:

    document.onmousemove = function (e) {
        var n = star.num;

        alert (event.clientY + ' ' + document.body.scrollTop);

thanks in advance,
George

Answer 1

From quick look in the code, abPos returns the absolute position of the element in the document, regardless of the scroll.

XY function returns the “actual” position, with the scroll position (i.e. how much pixels the user has scrolled) already integrated in the return value.

So when you scroll, “p” values won’t change while “x” values will change indeed.

Why do you ask? From looking at the screenshot I couldn’t see anything wrong.

Anyway, you mean vertical scroll, not horizontal.