Brian, thanks a lot for taking the time to explain this. i managed to get it working with setInterval ! there are still a few glitches though, but it's moving all right :) you can see it here: http://m2.lab-au.com/proto_metalab2_datascape.htm now, my last issues: 1/ if the mouse moves away from the "reactive" zone, the scrolling still happens. I suspect the clearInterval does not work. 2/ movement logic is incorrect. i would appreciate if someone could help with issue 1 (clearInterval?) if you find some time. Here is the code : http://m2.lab-au.com/_js/frontend/datascape.js
________________________________ From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Brian Cherne Sent: jeudi 18 octobre 2007 1:51 To: jquery-en@googlegroups.com Subject: [jQuery] Re: continuous action while mouseover Unfortunately, I have very little time this afternoon/evening (perhaps not enough time to write a proper response)... but I'll try: If the time between timeout calls is NOT important (ex: to update the position of an element) then use setInterval. It basically acts like a self-calling timeout, except that if the cpu is taxed the intervals can be forced together. So a 13ms interval should fire at 13ms, 26ms, 39ms, etc... but if the cpu/browser has other things to think about it may fire at 13ms, 38ms, 39ms... or something like that. If you're just updating the position of something on screen it won't really matter because this will give you the fastest response/update time. You should be able to find setInterval examples anywhere on the internet. A self-calling timeout acts like setInterval, except you're guaranteed some separation between calls (because even if one is slightly delayed, the next will always be #ms later). You would want to use this if the separation of time is important (if you're doing some comparison between the previous location and the current location, for instance). You can find a complex example of this in the hoverIntent plug-in (look for the "compare" function). The basic idea is that in the function your timeout calls, it calls itself again if a certain condition is met. A simple example: (I haven't written JavaScript in a while so someone may want to check if this works) var f = function(){ /* do stuff */ if ( something ) { t = setTimeout( f, 13 ); } }; var t = setTimeout( f, 13 ); Good luck, Brian. On 10/17/07, Alexandre Plennevaux <[EMAIL PROTECTED]> wrote: Brian, could you fastly elaborate (with a basic code sample if possible) on how to do this: use a self-calling timer to do any additional math/logic with those coordinates Thanks a lot for your time and help! alex ________________________________ From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Brian Cherne Sent: mercredi 17 octobre 2007 17:35 To: jquery-en@googlegroups.com Subject: [jQuery] Re: continuous action while mouseover OnMouseOver - capture initial position - start onMouseMove listening OnMouseMove - capture mouse postion OnMouseOut - stop onMouseMove listening Note 1) OnMouseMove is a very cpu-expensive event. It literally fires with every tiny little move of the mouse. You'll want to you have onMouseMove handler very very simple to keep from maxing out the user's cpu. If possible, you may consider having onMouseMove store just mouse coordinates and use a self-calling timer to do any additional math/logic with those coordinates. The fastest timer (~13ms) is still much better (more cpu-friendly) than onMouseMove. Note 2) You may consider using hover instead of onMouseOver/onMouseOut ... unless you only have the one object and won't have to worry about executing onMouseOver with every crease in the DOM structure. I hope this helps. Brian. On 10/17/07, Alexandre Plennevaux <[EMAIL PROTECTED]> wrote: Hi friends, i was wondering: how can i trigger an action while the mouse stays on a specific area of the screen? i tried the following code: it works ONCE (when the mouseover event is triggered) but not continuously, while the mouse i over my "active" zone. var centerX = $('#datascape').width()/2; stepX = 240; var $datascapeViewport = $('#ds-viewport'); $datascapeViewport.css({position: 'relative',left: 0+'px'}) .bind('mouseover',function(e){ var minX = $(this).width(); minX=-minX; var maxX = 0; var newLeft = 0; var Position = $(this).offset(); if (e.pageX >= centerX) { newLeft = Position.left-stepX; } else { newLeft = parseInt(Position.left) + stepX; } //alert("\nposition.left="+Position.left +"\nnewLeft="+newLeft+"\nstepX="+stepX); newLeft = -newLeft; if ((newLeft<maxX) && (newLeft>minX)) { $(this).animate({left: newLeft+'px'},1000); } }); just for background, i'm trying to have a very wide image scroll horizontally according to the mouse position on the X axis, center being no scroll, left position meaning scroll image right, and invertedly. Thanks for your insight! Alexandre Ce message Envoi est certifié sans virus connu. Analyse effectuée par AVG. Version: 7.5.488 / Base de données virus: 269.14.13/1074 - Date: 16/10/2007 14:14 Ce message Envoi est certifié sans virus connu. Analyse effectuée par AVG. Version: 7.5.488 / Base de données virus: 269.14.13/1074 - Date: 16/10/2007 14:14 Ce message Envoi est certifié sans virus connu. Analyse effectuée par AVG. Version: 7.5.488 / Base de données virus: 269.15.0/1076 - Date: 17/10/2007 19:53
