deplacement de Div

Version imprimable

deplacement de Div

Bonjour à tous,

voici mon code dont le but est de déplacer un div, mais celui-ci ne ce déplace pas et je ne sais pas pourquoi.

dans cette source j'ai mis deux balise div la premier sert de contrôle de la progression du déplacement de la souris qui fonctionne parfaitement

par contre la deuxième qui devrait bouger ne le fait pas.

merci pour vos explications

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
41
42
43
44
45
46
47
48
49
50
51
52
 
 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
 
<script type="text/javascript">
 
var x = 0;
var y = 0;
 
if (document.getElementById)
{
   if(navigator.appName.substring(0,3) == "Net")   
    document.captureEvents(Event.MOUSEMOVE);
   document.onmousemove = Pos_Souris;
   window.onload = bouge;
}
 
function Pos_Souris(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;
}
 
posX = 0;
posY = 0;
 
function bouge(){
	if (document.getElementById) {
	 posX = posX+(((x-posX)+20)/15);
     posY = posY+(((y-posY)+20)/15);
  	 document.getElementById("coord1").innerHTML = posX;	
	 document.getElementById("bouge").style.left = posX;
	 document.getElementById("bouge").style.top = posY;
     tempo = setTimeout("bouge()", 15);
	}
}
 
</script>
 
</head>
 
<body>
 
<div id="coord1">.</div>
<div id="bouge" style="position:absolute">test</div>
 
</body>
</html>

Première chose :

Code:

if (document.getElementById)

:roll: quels sont les navigateurs qui ne reconnaissent pas getElementById ???
Ou pour reformuler, tu connais beaucoup de gens qui utilisent encore IE4 8O
Ensuite, un script limité à IE, c'est un peu limitatif de nos jours !
Enfin, pour ton soucis, avec IE, event est une propriété de l'objet window, donc
Code:

1 2 3 4 5 6 function Pos_Souris(event) var e = window.event; { 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; }

Bonjour,

je prends note de tes remarques, cela dit cela ne fonctionne toujours ni sur ie et autre navigateur, le calque test reste figé. voici le code réécrit.

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
 
<script type="text/javascript">
 
var x = 0;
var y = 0;
 
if(navigator.appName.substring(0,3) == "Net") document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = Pos_Souris;
window.onload = bouge;
 
 
function Pos_Souris(e)
{
  var e = window.event;
  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;
}
 
posX = 0;
posY = 0;
 
function bouge(){
 posX = posX+(((x-posX)+20)/15);
 posY = posY+(((y-posY)+20)/15);
 document.getElementById("coord1").innerHTML = posX;	
 document.getElementById("bouge").style.left = posX;
 document.getElementById("bouge").style.top = posY;
 tempo = setTimeout("bouge()", 15);
}
 
</script>

15/04/2009, 09h11
andry.aime

Salut,

Citation:

tempo = setTimeout("bouge()", 15);

avec 15 ms! ça bouffe de ressource processeur, en plus tu faits une boucle récursive,
utilise setInterval.

Code:

1
2
3
4
5
6
function Pos_Souris(e)
{
  var evt = window.event || e;
  x = (navigator.appName.substring(0,3) == "Net") ? evt.pageX : evt.x + document.body.scrollLeft;
  y = (navigator.appName.substring(0,3) == "Net") ? evt.pageY : evt.y + document.body.scrollTop;
}

Code:

1
2
3
4
5
6
7
8
function bouge(){
 posX = posX+(((x-posX)+20)/15);
 posY = posY+(((y-posY)+20)/15);
 document.getElementById("coord1").innerHTML = posX;	
 document.getElementById("bouge").style.left = posX + 'px';
 document.getElementById("bouge").style.top = posY + 'px';
 tempo = setTimeout("bouge()", 15);
}

Pour le setTimeout, prends en compte la remarque d'Andry ;)

15/04/2009, 23h00
mp59100

Div en déplacement

Bonjour,

Merci pour ta réponse, mon dysfonctionnement est dut au DOCTYPE
en ajoutant + "px" cela fonctionne parfaitement

cordialement,
MP