Topic awaiting preservation: Capture mouse position within a specified area only

Hi, I'm currently working on a 'gesture-driven' horizontal thumbnail image scroller for my gallery website and I need help.

Basically I need a way to capture mouse movement within a div layer only (this div is placed relatively on my page). I then need a way to convert the x position data into a number from a standardised sequential number range. I figure this could be done by using the formula:

xPos in div / width of div * 100

That would then give me a percentage which could be translated into the speed and direction of scroll. So for example, 0% would be fast scroll left, 25% medium scroll left, 50% static, 75% medium scroll right and 100% fast scroll right - obviously a smoother transition of speed acceleration would be required but I hope you get the idea. The problem is the div doesn't have a specified width (it is set to be 100% of available space) so I would need a way to determine the width of the div in pixels automatically.

Please can someone help me with this, after reading other posts on this forum I just had to sign up and ask you guys because you all seem very smart. Others haven't been much help, but I hope you can.

visit my CryoKinesis Online Gallery

Ah, events. Responding to user interaction. This tends to get annoying, mainly because browsers don't yet give you the information about the event in the way the standards say they should (mainly, IE does it incorrectly, I believe). Let's start with the basics:

You'll need a way to get the width of the DIV. This code should do that:

document.getElementById('TheDivsId').offsetWidth

You can use that later on (when you use the little formula you mentioned in your post). Right now you have to worry about capturing mouse movement.

You'll need to start by making an onload event handler to call a function when the body loads. Simplest way of doing this is:

function init() {
...
}
window.onload = init;

Within this function, you'll need to set up an event to capture mouse movement within the DIV. You can learn how to do this at http://www.scottandrew.com/weblog/articles/cbs-events . Your event handler will be a function that you define yourself.

This function needs to calculate both the X position of the mouse. As you can learn at http://www.scottandrew.com/weblog/articles/events , the function will be passed an object (or, in IE, you'll need to access it through the global "event" object) which gives information about the event - including the position of the mouse. I suggest you use this handy bit of code:

var obj = event; // set obj equal to the event object
var msg = '';
for (prop in obj)
{
msg += prop + ' = ' + obj[prop] + '<br>';
}
document.write(msg);
document.close();

Run that in both Mozilla and IE to see how they provide the X and Y positions of the mouse.

Once you figure that out, you can use that information, plus the width of the DIV, to get the value you're looking for.

Fun, eh? I know; events suck.

I don't know, but maybe this can be any help: http://rod.o2theory.com/dhtml/mouselab.html

thanks both of you, this thing has been way beyond me but you have pointed me towards the *erm* 'light' as it were. The mouselab link is pretty cool, if I can deconstruct this I should have what I need to work on the scroller. Fingers crossed, I will post a follow up reply sometime betwenn the next few hours and a day or so to say how it went and offer up the final code for others.

in the meantime if any of you want to try working out a 'gesture-driven' image scroller then please go for it, I'm pretty convinced mine will be a mean bodge rather than nice code. So help is still appreciated.

also if anyone can figure out how to get the acceleration/decelaration values from the mouse pointer value that'd be great too.

I knew you guys would come up trumps - you are the best, this forum rules.

visit my CryoKinesis Online Gallery

Be carefull when capturing the mouse position, some browsers will report the x/y position from the top,left of the window port and other will report it from the top,left of the document itself. Meaning that if you scroll down the page your values will be off in some browsers.

PPK had a good rant about this at evolt: http://www.evolt.org/article/Mission_Impossible_mouse_position/17/23335/

cheers for the pointer there, I have tested the mouselab guys demo and it seems to be fine in most recent browsers, i'll try and figure out how it did it, but i'm guessing that it is probably avoided due to some maths he's done as he also works out the scroll position so maybe that is of use, I dunno - i will fiddle.

also keep up the responses it's great for me to get proper relevant info on this, now i just need some nice guy with a lot of free time to script it all together for me

visit my CryoKinesis Online Gallery

[This message has been edited by smonkey (edited 04-24-2003).]

http://www.ozones.com/

check it out, it uses mouse position to scroll the images somehow (the direction of horizontal scroll is the reverse of what i want but i figure that is easy to change). Not only is it damn cool but it also appears to loop seamlessly, which was one of my ultimate aims but i considered it unlikely to be possible.

please try to explain how this works to me

visit my CryoKinesis Online Gallery

Ay, a while back we had a bunch of topics about creating seamless 360 degree panoramas in DHTML.

Basicaly, you need to have two DIV's of the same image.

Image div 1 & image div 2 pan across the screen side by side appearing to have no gaps, when image div 1 has panned completly off the edge of the screen it's re-opsitioned to the opposide side of image div 2 and they keep scrolling. The process repeats giving the illusion of a seamless and endless scrolling image.

The other option would be to use a tiling background image set in CSS and to alter the background position. I haven't actually tried this one though.

Edit: Oh and just incase you didn't realise, Doc Ozone actually runs this message board, thus the name ozoneasylum.

[This message has been edited by Dracusis (edited 04-24-2003).]

I believe the Doc originally tried out the CSS background technique and found it to be too slow.

An alternative to the two-div method is to have a single absolutely positioned image that looks like the same image repeated twice in a row, and when either end of it is about to go off the screen on either side, it jumps back halfway to give itself more room on that side. Since it jumps exactly halfway, and its two halves are duplicates, the transition is visually seamless. Same basic principle, though.

I did know doc ozone runs this forum, although I only discovered this forum today and after reading for a while I found it out. I have contacted him about the scrolling thing to see if he is able to help out.

In regards to the looping thing, I guess first I should get the scroller working, but they way inwhich it'd work in my case would be that one div would contain the say 15 thumbnails of images by one of the featured artists. surely it would be best to dynamically recreate this div containing the 15 images but how would that be done? Also wouldn't it be possible to treat each image as an individual object and as soon as it dissappears of screen it's position is changed so that it jumps back to the other end of the div full of thumbnail images? to me that sounds the best way, but I have no idea of how that would be created or implemented.

any help?

visit my CryoKinesis Online Gallery

Errr.. You just told us how you'd impliment it didn't you?

15 div's which are actually clickable image thumbnails that are scripted to scroll in a seamless never ending loop. Simple.

Thst start out small and slowly build things up. If your going to be moving 15 div's at once it might get a little slow, it'll depend on how big the thumbnails are. But the best wat to do this would be to use one function to move all 15 elements by looping through each one and adjusting it's position. You'd also have an if clause in there to check if the div you moving this time through the loop will be moved off screen (or whatever boundry you set) and if so then you move it to the other end of the line instead.

That help?

It is helpful, but I'm not really a coder so whilst I understand principles I don't under syntax very well or how to actually create code (basic variables, arrays, if statements is all I can do). To give you an idea of my level of js capability I have just written my first code from scratch and it's one of those very easy age calculator things. The only clever thing about it is it knows the length of all the months (although not feb in a leap year). It's not a brilliant script by any means.

I think the best way for me to go is to get the mouse position scroller working then address the looping later. I'll probably post a question again in the forum with example code so you very helpful and knowledgeable peeps can help me out with it.

visit my CryoKinesis Online Gallery