scroll-like div that follow the height or y axis value of mouse

[team1504]

Hello,
I apologise for the long title but, I was wondering how and I tried creating a div that is a child of a div with its same width, but the length of the entire page.
So in a way it is like a scroll-bar except the user can not move down the page by holding the smaller inner div (square). The small square just moves down its container as the mouse moves down to The bottom of the page.
but since The square inner div is in a container, with the same with, it can not and will not be able to move horizontally.

Does anyone have any ideas on how to do this?
Apologies for any confusion and please let me know if I canclear anything up.

I know a lot of this with deal with HTML, but I can see how JS would /9:30 could help.

Regardless can anyone help me or show me how to achieve something like this?

Thanks in Advance & Best Regards,
Team 1504

[sdleihssirhc]

The absolute simplest solution would be the following:

1. Create two elements: a container <div> and an indicator <div>.
2. Stretch the container the full size of the screen by using "position:absolute; top:0; bottom:0"
3. Use JavaScript to create a "mousemove" event listener (or an event handler) so that whenever the mouse is moved, the indicator's "top" style is set to the mouse's current position on the screen (via the event object's "clientY" property).

The technique is intentionally vague, so if you're having difficulty doing any of that, just ask.

More to the point, however, is that it also makes a bunch of assumptions about your project. The above probably will not work if you...

• have page content longer than the screen.
• disable JavaScript.
• have to nest the container in a different <div> or element
• want to support IE6.

[team1504]

More to the point, however, is that it also makes a bunch of assumptions about your project. The above probably will not work if you...

• have page content longer than the screen.
• disable JavaScript.
• have to nest the container in a different <div> or element
• want to support IE6.

• Nope
• What this is for, doesn't work in js at all. Meaning there is an alternative for and when js is disabled. So I'm fine with this only working when js is enabled
• Nope
• Its all good if it does not work in IE6. Same response as the second condition.

The absolute simplest solution would be the following:

1. Create two elements: a container <div> and an indicator <div>.
2. Stretch the container the full size of the screen by using "position:absolute; top:0; bottom:0"
3. Use JavaScript to create a "mousemove" event listener (or an event handler) so that whenever the mouse is moved, the indicator's "top" style is set to the mouse's current position on the screen (via the event object's "clientY" property).

The technique is intentionally vague, so if you're having difficulty doing any of that, just ask.

I pretty much, do not where to start or what to do in regards to the js... Can you help me write it if the indicator has the id #verticalLocation and its container has the id #indicatorContainer ?

Thanks in Advance,
Team 1504

[team1504]

I did some research and came up with this using jQuery:

$(document).ready(function() {
    $("html").mousemove(
		    function(e){
			    alert("The Y-position is:"+e.pageY+".");
    });
});

so the above is pretty annoying, but it was a test to see if i could get the mouseMove working...
And since that worked fine, I tried to set the mouse' y-coordinate or location as the value for the top css attribute for #verticalLocation as instructed above:

$(document).ready(function() {
    $("html").mousemove(
		    function(e){
			    $("#verticalLocation").css("top",e.pageY);
    });
});

However, the above does not work...

What do you all think of my code is it good? But before making it cleaner and faster, does anyone have any ideas why it is not working?

+Team1504

[sdleihssirhc]

Your code is actually really close. The only reason it's not working is because (I'm guessing here) you're setting the "top" style without giving #verticalLocation "position: absolute"

I believe that if you make that one change, it should work.

(As I was messing with this, it also occurred to me that the container <div> might be unnecessary. It has no effect on the mechanics of what you've built; if you aren't styling it or anything, you could just get rid of it.)

[team1504]

Yes! It now works!

Thank you!

And, yes, the container is not really needed...

However, one more question: what's the difference between clientY and pageY ?

[team1504]

well actually, I have one more

The point of the container was to limit how far up and down the indicator's go. Is there a way I can set a limit?

For example, so that the top value of #indicator can not be greater than or less than x or y regardless if the mouse is at that coordiatlocation on the page?

does that make sense?

[sdleihssirhc]

clientY is the mouse's vertical position compared to the window.
pageY is the mouse's vertical position compared to the page.

I've made a handy dandy Paint PNG to illustrate the difference:

Attachment 58045

In your case, it makes no difference. You said that the page's content would never be longer than the screen, so either value will work. (I originally suggested clientY because I didn't know you were using jQuery, and Internet Explorer doesn't support pageY.)

As to your second question, I don't really understand. Changing the height of the container is as simple as messing with its "top" and "bottom" styles until you get it where you want, but...

Do you want the indicator to line up vertically with the mouse, but only if the mouse is within a certain section of the page? Then you'll need to add a check to your mousemove listener: Don't change the indicator's "top" if the pageY is less than the container's "top" or greater than its "bottom". And when you do change the indicator's "top", you'll need to adjust for the container's "top"... If you mess around with it, you'll see what I mean.

Or...

Do you want the indicator's position to be proportional to the mouse's position? For example, if the mouse is about a third of the way down the page, do you want the indicator to be about a third of the way down the container? If so, then you'll need to compute pageY over the full size of the page/window, multiply that by the full height of the container, and use that for the indicator's "top".

Did any of that make sense?