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?
The absolute simplest solution would be the following:
Create two elements: a container <div> and an indicator <div>.
Stretch the container the full size of the screen by using “position:absolute; top:0; bottom:0”
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.
have to nest the container in a different <div> or element
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:
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.)
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:
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.
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”.