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

**benjiiim** · 22/08/2006, 23h19

Bonjour,

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

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

**Auteur** · 23/08/2006, 00h16

bonjour,

j'utiliserai plutôt clientX et clientY :

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
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">
<!--
* {position : relative}
}
 
//-->
</style>
 
 
<script type="text/javascript">
<!--
function position(ev)
{
  var Xfen, Xdoc, Yfen, Ydoc, el;
  Xfen = ev.clientX;
  Xdoc = Xfen + document.body.scrollLeft;
 
  Yfen = ev.clientY;
  Ydoc = Yfen + document.body.scrollTop;
 
  el = document.getElementById("idMouse");
  el.innerHTML = " Xdoc= "+Xdoc+" px ; Ydoc= "+Ydoc+" px<br>";
  el.innerHTML+= " Xfen= "+Xfen+" px ; Yfen= "+Yfen+" px";
}
 
//-->
</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.

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

**benjiiim** · 23/08/2006, 21h50

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 :

Dans tous les cas, merci bien de ce premier conseil !
Ben

**Auteur** · 25/08/2006, 12h15

en fait il faudrait écrire :

Code :

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

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 :

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

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

: je n'arrive pas à transmettre event en paramètre

Je cogite....

**FremyCompany** · 25/08/2006, 14h07

La seule bonne manière de le faire :

Code :

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

document.body.onmousemove=position;

**Auteur** · 25/08/2006, 17h18

Envoyé par FremyCompany

La seule bonne manière de le faire :

Code :

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

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 :

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

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 :

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

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 :

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

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 .

**FremyCompany** · 25/08/2006, 17h41

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

**benjiiim** · 14/09/2006, 23h40

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 :

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

**FremyCompany** · 15/09/2006, 19h00

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

Code :

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

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;

**benjiiim** · 22/09/2006, 17h05

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

Merci bien à vous deux.
++
Benjiiim

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

JavaScript

Discussions similaires

Partager

Partager