recuperer position souris ie [Résolu]

[Doksuri]

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 JavaScript :

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

[NoSmoking]

Bonjour,
visiblement tu utilises jQuery, alors pourquoi ne pas l'utiliser en plein
- event.pageX
- event.pageY

[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

Sinon, je comprends pas trop tes explications

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...

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

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 ?

[Doksuri]

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)

Envoyé par Bovino

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

si, je lui passe event lors de l'appel

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

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

[mekal]

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

faux 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

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

[Bovino]

Envoyé par mekal

faux la preuve

Code :

<body onmousemove='souris(event)'>

Oh le vilain tricheur !

[Doksuri]

onmousemove="move(event)"
=> heu c'est comme ca que je fais, c'est pas bon ?

[Bovino]

Oui et non... mais il est quand même préférable de savoir pourquoi
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;
}

[Doksuri]

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

Code JavaScript :

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

[Doksuri]

heu, petit detail...
comment je passe

Code JavaScript :

$(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 JavaScript :

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 :/

[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
  });

c'est moche, mais fonctionnel

on ne peut pas te donner tord

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

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...

[Doksuri]

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

Code html :

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...