Position de la souris incompatible avec *{position:absolute} ?

Version imprimable

Bonjour,

J'en dis beaucoup dans le titre du message, mais tout se passe dans le code :

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
28
29
30
31
32
33
34
 
<html>
<head>
<style>
    * {position : relative}
    .Calendrier {position:absolute;}
</style>
<script>
if (navigator.appName.substring(0,3) == "Net") document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = position;
 
function position(e) {
x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
}
 
function affich_calendar()
{
    alert(x);
    alert(y);
 
    document.getElementById('Calendrier').style.top=y+"px";
    document.getElementById('Calendrier').style.left=x+"px";
 
    document.getElementById('Calendrier').innerHTML = "yep"
}
</script>
</head>
<body>
<div id="Calendrier" onmouseout="calendarTimeout();" class="Calendrier" onmouseover="if (timeoutId) clearTimeout(timeoutId);"></div>
<br /><br /><br /><br />
-------------------<span style="cursor:pointer" onclick='affich_calendar()' >bouton</span>
</body>
</html>

Comme vous le verez si vous tester cela sous IE, la position de la souris sera mal calculé (sous firefox, opera et netscape cela passe bien...)

Vous allez me dire, bein, enlève le position : relative du *. J'aimerai ne pas le faire si possible car cela m'est bien utile ailleurs...

Est-ce que quelqu'un à une idée ?

Merci de votre aide
++
Ben

bonjour,

j'utiliserai plutôt clientX et clientY :
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 28 29 30 31 32 33 34 35 36 37 38 39 40 <html> <head> <title></title> <style type="text/css">  </style> <script type="text/javascript">  </script> </head> <body onmousemove="position(event)"> <div id="idMouse"></div> </body> </html>
-La syntaxe qui consiste à placer event lors de l'appel est compatible au moins avec IE et Firefox (et sans doute Netscape); tu n'as pas à faire de test pour connaître le nom du navigateur.

:question: Néanmoins, je voudrais savoir si cela fonctionne avec Opéra et d'autres navigateurs

-Pour connaître pourquoi je distingue Xfen et Xdoc ainsi que Yfen et Ydoc, ajoute un scroll ;)

23/08/2006, 21h50
benjiiim

Merci, cela fonctionne parfaitement sur Netscape 7.1, IE 6, Opéra 9 et Firefox 1.5

J'ai cependant un petit soucis pour bouger le onmousemove="position(event)" de la balise body vers le code. (désolé, c'est vraiment une question de débutant...)
J'ai essayé entre les balises scripts et hors de toute fonction :

document.onmousemove = position(event);

Mais cela ne passe pas ::cry:

Dans tous les cas, merci bien de ce premier conseil !
Ben
25/08/2006, 12h15
Auteur
en fait il faudrait écrire :
Code:

1 2 document.body.onmousemove = position(event);
Mais pour que ce code soit pris en compte, il faut que l'élément body existe. Donc que la page soit chargée.

A prioiri, il faudrait quelque chose dans ce genre :
Code:

1 2 onload=function(event){document.body.onmousemove = position(event);}
attribuer la fonction à l'événement onmousemove() après le chargement de la page. Mais le code ci-dessus ne fonctionne pas :oops: : je n'arrive pas à transmettre event en paramètre :cry:

Je cogite....
25/08/2006, 14h07
FremyCompany

La seule bonne manière de le faire :

Code:

document.body.onmousemove=position;

Citation:

Envoyé par FremyCompany

La seule bonne manière de le faire :

Code:

document.body.onmousemove=position;

IE m'indique que document.body n'est pas un objet. :(

J'ai dû faire autrement :

Je n'ai pas touché à la fonction position(). J'ai ajouté du code à la suite de celle-ci qui est exécuté lors du chargement de la page. Néanmoins, ce code est différent selon le navigateur, ce qui complique un peu les choses.

J'ai fait le test avec IE5 (non je n'ai pas fait une faute de frappe c'est bien la verions 5) et Firefox.
Pour Firefox c'est tout simple :
Code:

1 2 function onmousemove(event){position(event)};
Pour IE c'est plus compliqué : on doit attendre la fin du chargement pour affecter à l'événement la fonction.
Code:

1 2 3 4 5 6 7 8 9 10 onload=function() { var el = document.getElementsByTagName("body")[0]; el.onmousemove=function() { position(event); } }
Il ne reste plus qu'à faire la distinction entre les deux navigateurs d'où ce code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 if (document.all) { onload=function() { var el = document.getElementsByTagName("body")[0]; el.onmousemove=function() { position(event); } } } else function onmousemove(event){position(event)};
ajoute le juste après la fonction position().

Par ailleurs, peux-tu me dire si cela fonctionne avec les autres navigateurs .

25/08/2006, 17h41
FremyCompany

document.body a toujours marché sous IE... sauf si on lance le script dans le HEAD (dans ce cas la balise body n'a pas encore été chargée...)

Bonjour,
Me voila de retour,

Désolé de ne pas avoir répondu avant, j'ai du oublié de marquer ce thread et j'avais stoppé ce développement temporairement.

J'ai donc une question pour Fremy : "je croyais que tous les scripts devaient se trouver dans le head, ce n'est pas le cas ?". Auteur, pour l'instant, je met de côté ta solution si ca ne te dérange pas, j'aime pas les "hacks navigateurs"...

Autre chose, concernant le deuxième post de ce thread où tu m'as conseillé d'utiliser body.ScrollLeft. Cela pose un problème en fonction du doctype. En l'occurence j'utilise le doctype <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> soit du xhtml 1.0 Strict.

Dans cette configuration, pragmatiquement, voila ce qui fonctionne :

Ie7 : documentElement
ie6 : body
firefox : documentElement
netscape : body
opera : body et documentElement

J'ai donc fait ce que je n'aime pas, un hack navigateur...
Voici le code :
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 28 29 30 31 32 33 34 35 function position(ev) { x1 = ev.clientX; y1 = ev.clientY; } function getposition() { xa = document.body.scrollLeft; ya = document.body.scrollTop; xb = document.documentElement.scrollLeft; yb = document.documentElement.scrollTop; //hack navigateurs if(xa!=xb) { x2 = xa + xb; }else { x2 = xa; } if(ya!=yb) { y2 = ya + yb; }else { y2 = ya; } x = x1 + x2; y = y1 + y2; }
J'ai séparé en deux fonctions pour éviter de faire des calculs inutiles à chaque mouvement de souris, j'appelle donc la fonction getposition dès que j'ai besoin des coordonnées.

Qu'en pensez vous ?
++
Ben

1/ On mets très souvent les scripts dans le body...
2/ Fait un test :
Code:

1 2 3 4 var p={"x":0,"y":0}; var body=document.body?document.body:document.documentElement; p.x=body.scrollLeft; p.y=body.scrollTop;

22/09/2006, 17h05
benjiiim

1/ oki merci ! :p
2/étonnament, ca ne marche pas... je garde ma solution ! :p

Merci bien à vous deux.
++
Benjiiim