recuperer position souris ie

**Doksuri** · 09/08/2011, 10h45

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 :

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
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** · 09/08/2011, 10h55

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

**Bovino** · 09/08/2011, 10h56

Code :

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

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** · 09/08/2011, 11h21

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

Invité · 09/08/2011, 12h56

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

faux

la preuve

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
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** · 09/08/2011, 13h53

Envoyé par mekal

faux

la preuve

Code :

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

<body onmousemove='souris(event)'>

Oh le vilain tricheur !

**Doksuri** · 09/08/2011, 14h07

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

**Bovino** · 09/08/2011, 14h17

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 :

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

onmousemove="move()"

puis

Code :

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

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

**Doksuri** · 10/08/2011, 10h00

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

Code JavaScript :

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

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** · 10/08/2011, 14h43

heu, petit detail...
comment je passe

Code JavaScript :

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

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

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

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** · 10/08/2011, 22h26

il te suffit de mettre à jour cette variable dans la fonction

Code :

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

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** · 11/08/2011, 10h56

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

Code html :

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

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

recuperer position souris ie

JavaScript

Discussions similaires

Partager

Partager