Discussion :

[zadoner33]

Bonjour,

je suis face à gros souci en JavaScript et après avoir écumé forum, tuto et autre je ne parviens pas à comprendre...

je m'explique :

1/ J'ai donc une page Internet Sur laquelle j'ai 5 fonds qui tourne toutes les 6 secondes > ca marche

2/ En parallèle, je souhaiterais faire disparaitre le menu du site au bout d'un certain temps d'inactivité de la part du l'utilisateur (par exemple 5 secondes)
> ca marche

3/ je voudrais que le menu apparaisse de nouveau lorsque l'utilisateur bouge la souris > ca marche

4/ Par contre, lorsque l'un de mes fonds bouge, et bien mon menu revient ! Autrement dis, lorsque l'un des fonds "bouge", la fonction "mousemoved" se déclenche.... alors que je veux qu'elle se déclenche uniquement si l'on bouge réelement la souris...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
function FaireApresInactivite() {
	idleTime = idleTime + 1;
	if (idleTime > 1) {
		// si on est inactif depuis plus de 5s , on fait : 
		$(".menu_central").fadeOut(800);
 
		// pour sortir de l'inactivite
		window.onmousemove = mousemoved;
		function mousemoved()
		{
			$(".menu_central").fadeIn(800);
			window.onmousemove='void(0)';
		}
	}
}

et l'appel de la fonction se fait grace à :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
var idleInterval =  null; 		
idleTime = 0; 
var idleInterval = setInterval('FaireApresInactivite()', 2500); 
 
// on remet le compteur a 0 si on detect un mouvement (souris ou clavier)
$(this).onmousemove(function (e) { idleTime = 0; });
$(this).keypress(function (e) { idleTime = 0; });

et voici un exemple concret sur Internet : http://www.onkei.fr/NAPA

[zadoner33]

Bon visiblement, personne ne semble pouvoir m'aider...
Je me demandais simplement si il n'existe pas une autre fonction que " onmousemove" pour détecter le mouvement "réel d'une souris ?

[Auteur]

bonjour

Je me demandais simplement si il n'existe pas une autre fonction que " onmousemove" pour détecter le mouvement "réel d'une souris ?

non, c'est onmousemove.

En ce qui me concerne, je n'ai pas compris ton problème.

[SylvainPV]

J'ai un peu de mal à comprendre le fonctionnement de ton code. Je dirais que ça vient du fait que ce changement de fond implique de faire scroller la page, et donc que ton curseur de souris se déplace par rapport à ton document (et non par rapport à ta fenetre). Donc mousemove est bien censé se déclencher.

Regarde les infos clientX/clientY ou pageX/pageY dans l'event passé à la fonction mousemove. Tu peux ajouter des conditions pour empêcher que le menu réapparaisse si ces coordonnées n'ont pas bougé.

Mais si je peux me permettre, d'un point de vue visiteur je n'aime pas trop quand le contenu d'une page se met à changer dès que regarde ailleurs pendant cinq secondes

[zadoner33]

Tout d'abord, merci d'avoir prêté attention à mon post et à mon problème.

Je me permet de rebondir sur ce que tu as dit, à savoir :

Regarde les infos clientX/clientY ou pageX/pageY dans l'event passé à la fonction mousemove. Tu peux ajouter des conditions pour empêcher que le menu réapparaisse si ces coordonnées n'ont pas bougé.

Je cherche, je fouine, et je ne parviens pas à trouver quelque chose concernant ces fameuses conditions...

Quelqu'un aurait une piste, un bout de code , un url... ?

[SylvainPV]

Voilà un peu d'explications en anglais sur clientX, pageX et screenX:
http://stackoverflow.com/questions/6...-y-and-pagex-y
et des infos sur le support ici : http://www.quirksmode.org/mobile/tab...t_desktop.html

Je verrais quelque-chose dans ce style là:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var lastMouseCoords = {x:0, y:0};
window.onmousemove = function(event){
    //si l'utilisateur a bougé de 3 pixels depuis la dernière fois
    if(distanceMovedByMouse(event) > 3){ 
         //on fait le job au vrai mousemove
         lastMouseCoords.x = event.pageX;
         lastMouseCoords.y = event.pageY;
    }
};
 
function distanceMovedByMouse(event){
    var dx = event.pageX-lastMouseCoords.x;
    var dy = event.pageY-lastMouseCoords.y;
    return Math.sqrt(dx*dx+dy*dy);
}