recuperer position souris ie

Version imprimable

Bonjour a tous

je sais ce que vous vous dites avec le titre : "il y a 10 000 codes sur le net"...
en effet, j'en ai teste pas mal... mais sans succes..
j'ai teste plein de facon differentes de recuperer la position, mais idem...

je veux faire une sorte d'infobulle

pour l'instant, j'en suis rendu la
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 function move(e) { if(infobulle) { // Si la bulle est visible if (navigator.appName!="Microsoft Internet Explorer") { // Si on est pas sous IE x = e.pageX - ($("#clear").offset().left); y = e.pageY - ($("#clear").offset().top) - 140; //document.getElementById("infobulle").style.left=e.pageX - ($("#clear").offset().left) + 15 + "px"; //document.getElementById("infobulle").style.top=e.pageY - ($("#clear").offset().top) - 140 + "px"; } else {// IE /*divX = getPos(document.getElementById("clear")).l; divY = getPos(document.getElementById("clear")).t; mouseX = e.clientX + document.body.scrollLeft;//- tempX; mouseY = e.clientY + document.body.scrollTop;// - tempY; tempX = mouseX - divX; tempY = mouseY - divY;*/ //x = e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); x = e.clientX;// + document.body.scrollLeft;//- tempX; y = e.clientY;// + document.body.scrollTop;// - tempY; //x = tempX; //y = tempY; } //alert('x : ' + x + ', y : ' + y); document.getElementById("infobulle").style.left= x + 15 + "px"; document.getElementById("infobulle").style.top= y + 10 + "px"; } }
le probleme (sous IE...-troll detected-), c'est que e.clientX et Y se base sur le coin du navigateur...jusque la, pas de probleme... mais si on redimentionne le navigateur, genre on le met pas en fullscreen, ca bouge l'infobulle a l'ouest...

du coup, je me dis "je vais le caller par rapport au div dans lequel je suis"...
mais la ou ce devient comique, c'est que le calcul de position d'un div se fait par rapport au div globale du site (je sais pas si c'est super clair)
du coup, je test... wah, c'est joli...attends, quand on scroll, ca bouge l'infobulle...
en gros, plus on scroll vers le bas, plus l'infobulle sera hors du site vers le bas, et plus on remonte, plus elle sera haut dans le site (voir meme hors du site vers le haut)

bref... ca commence a me gonfler severe, et j'en demande a votre grande conaissance avant que le pc passe par la fenetre :furieux:

09/08/2011, 10h55
NoSmoking

Bonjour,
visiblement tu utilises jQuery, alors pourquoi ne pas l'utiliser en plein
- event.pageX
- event.pageY
09/08/2011, 10h56
Bovino
Code:

1 2 x = e.clientX;// + document.body.scrollLeft;//- tempX; y = e.clientY;
Le problème, c'est qu'avec IE, e n'existe pas :aie:

Sinon, je comprends pas trop tes explications

Citation:

le probleme (sous IE...-troll detected-), c'est que e.clientX et Y se base sur le coin du navigateur...jusque la, pas de probleme... mais si on redimentionne le navigateur, genre on le met pas en fullscreen, ca bouge l'infobulle a l'ouest...

:koi:
Le redimensionnement de la fenêtre n'empêche pas le "coin du navigateur" de rester en haut et à gauche de la fenêtre :?

Citation:

plus on scroll vers le bas, plus l'infobulle sera hors du site vers le bas

T'es en train de nous dire que ton infobulle s'affiche en dehors du navigateur ? 8O
09/08/2011, 11h21
Doksuri

Citation:

Envoyé par NoSmoking

visiblement tu utilises jQuery, alors pourquoi ne pas l'utiliser en plein

=> parceque ca me met une erreur sous ie (et la ligne de l'erreur correspond a mon div infobulle)

Citation:

Envoyé par Bovino

Le problème, c'est qu'avec IE, e n'existe pas :aie:

si, je lui passe event lors de l'appel

Citation:

Envoyé par Bovino

Le redimensionnement de la fenêtre n'empêche pas le "coin du navigateur" de rester en haut et à gauche de la fenêtre

c'est sur, mais mon site est centre, donc en fullscreen, il est a ~200px de la gauche (ca depend de la taille de l'ecran), et en mode "fenetre", il est donc a 0px de la gauche

Citation:

Envoyé par Bovino

T'es en train de nous dire que ton infobulle s'affiche en dehors du navigateur ?

non, mais plus on scroll vers le bas, plus l'infobulle descend et arrive un moment ou l’ascenseur du navigateur augmente xD,
et vers le haut, elle disparait dans les meandres du navigateur

Citation:

Le problème, c'est qu'avec IE, e n'existe pas

faux :aie: la preuve
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script> function souris(e){ var setX =e.clientX; var setY =e.clientY; document.getElementById('inpute').value=setX+' '+setY; } </script> </head> <body onmousemove='souris(event)'> <input type="texte" id="inpute"> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </body> </html>
c'est fou :scarymov:

le probleme avec ie c'est que l'on ne peut pas faire d'ajout dynamique d'evenement tout en lui indiquant un evenement

09/08/2011, 13h53
Bovino

Citation:

Envoyé par mekal

faux :aie: la preuve

Code:

<body onmousemove='souris(event)'>

Oh le vilain tricheur ! :mouarf:
09/08/2011, 14h07
Doksuri

onmousemove="move(event)"
=> heu c'est comme ca que je fais, c'est pas bon ? :aie:
09/08/2011, 14h17
Bovino
Oui et non... mais il est quand même préférable de savoir pourquoi :aie:
Contrairement aux autres navigateurs, IE<9 n'envoie pas en argument à la fonction de rappel l'objet event associé, mais comme window est implicite en JavaScript, c'est bien window.event qui sera envoyé.
Le seul problème, c'est que dans ce cas, ce sont les autres navigateurs qui ne sont pas contents car du coup, ils attendent 2 paramètres dans la fonction !
La syntaxe correcte est

Code:

onmousemove="move()"

puis
Code:

1 2 3 function move(e){ var evt = e ? e : window.event; }

ENFIN !!!!!
merci a vous pour vos lumieres. voici ma solution

Code:

1
2
3
4
5
6
7
8
9
10
11
12
function move(e) {
	if(infobulle) {  // Si la bulle est visible
		if (navigator.appName!="Microsoft Internet Explorer") { // Si on est pas sous IE
			document.getElementById("infobulle").style.left = e.pageX - $("#clear").offset().left + 15 + "px";
			document.getElementById("infobulle").style.top =  e.pageY -  $("#clear").offset().top - 10 + "px";
		}
		else {// IE
			document.getElementById("infobulle").style.left = e.clientX - $("#clear").offset().left + 15 + "px";
			$(document).bind('mousemove',function(e){ document.getElementById("infobulle").style.top = e.pageY - $("#clear").offset().top - 10 + "px";});
		}
	}
}

c'est moche, mais fonctionnel ;)

10/08/2011, 14h43
Doksuri
heu, petit detail...
comment je passe

Code:

$(document).bind('mousemove',function(e){ document.getElementById("infobulle_" + bloc).style.top = e.pageY - $("#clear").offset().top - 10 + "px";});

dans une variable y ? (pour faire des tests dessus par la suite)
genre
Code:

1 2 var y; $(document).bind('mousemove',function(e){ y = e.pageY - $("#clear").offset().top - 10 + "px"; return y;});
(j'ai essaye plein de syntaxes, mais aucune ne fonctionne :/
10/08/2011, 22h26
NoSmoking
il te suffit de mettre à jour cette variable dans la fonction
Code:

1 2 3 4 5 var mouseY; // variable globale $(document).bind('mousemove',function(e){ mouseY = e.pageY - $("#clear").offset().top - 10 + "px"; // return y; devient inutile });
Citation:

c'est moche, mais fonctionnel ;)

on ne peut pas te donner tord :mouarf:

Il faut dans cette fonction uniquement récupérer la position brute, pourquoi ajouter une récupération de position et un calcul?

Citation:

Envoyé par Doksuri

=> parceque ca me met une erreur sous ie (et la ligne de l'erreur correspond a mon div infobulle)

c'est peut être de ce coté qu'il faudrait corriger...

merci pour ta reponse, je l'ai mis en variable globale et ca passe bien
Code:

1 2 3 4 5 6 7 8 9 <div id="infobulle_<?php echo $i; ?>" class="infobulle_<?php echo $i; ?>" style=" position:absolute; display:none; top:25px; border:1px solid Black; padding:8px; font-family:Verdana, Arial; font-size:10px; background-color:#FFFFCC;"></div>
mon infobulle est vraiment basique... je ne pense pas que ca vienne de la le probleme :/
quoi qu'il en soit... c'est fonctionnel...
ca rame a mort sous IE... mais c'est IE hein...