[onkey...] touches de déplacement

Version imprimable

16/02/2006, 08h33
CUCARACHA

[onkey...] touches de déplacement

Salut,

Je suis en train de préparer un module qui permet de déplacer des DIV avec les touches de direction.

J'ai utilisé onkeyup et onkeydown, ça marche bien mais j'ai un problème avec les barres de défilement.

Lorsque les barres de défilement sont présentes, j'ai beau réinitialiser le keyCode à 0, la page bouge en plus du déplacement de mon DIV et c'est pas très ergonomique.

Auriez-vous une idée pour que les scroll bar ne soient pas affectées par les touches de déplacement ?

D'avance merci

Laurent Jordi

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 2</title>
<script language="Javascript">
var timer;
var position= new Array(2);
var MyWay;
 
function movearound(thisway)
{ 
position[0] = parseInt(document.getElementById('MyDiv').style.top);
position[1] = parseInt(document.getElementById('MyDiv').style.left); 
 
switch(thisway)
{
case "up":
   position[0] -= 2;
   break;
 
case "do":
   position[0] += +2;
   break;
 
case "le":
   position[1] -= 2;
   break;
case "ri":
   position[1] += +2;
   break;
}
 
 
document.getElementById('MyDiv').style.top = Number(position[0]); 
document.getElementById('MyDiv').style.left = Number(position[1]);
} 
 
</script> 
<style >
input {font-family: 'symbol';}
</style>
</head>
 
 
<body>
<div id="MyDiv" style="width: 39; height: 20; top:0; left:0; background-color: blue; position: absolute; z-index:-1;" ></div> 
 
 
  <table border="0" style="cellpadding:0; cellspacing:0; " width="90">
    <tr>
      <td width="33%"></td>
      <td width="33%"><input type="button" name="up" width=this.height value="Ý" onClick="a=this.name; clearInterval(timer); timer=setInterval('movearound(a)',10);" ; / / / /></td>
      <td width="34%"></td>
    </tr>
    <tr>
      <td width="33%"><input type="button" name="le" width="100" value="Ü" onClick="a=this.name; clearInterval(timer); timer=setInterval('movearound(a)',10);" /></td>
      <td width="33%"><input type="button" width="100" value="&#128;" onClick="clearInterval(timer);" /></td>
      <td width="34%"><input type="button" name="ri" width="100" value="Þ" onClick="a=this.name;clearInterval(timer); timer=setInterval('movearound(a)',10);" /></td>
    </tr>
    <tr>
      <td width="33%"></td>
      <td width="33%"><input type="button" name="do" width="100" value="ß" onClick="a=this.name;clearInterval(timer); timer=setInterval('movearound(a)',10);" /></td>
      <td width="34%"></td>
    </tr>
  </table>
 
</html>

16/02/2006, 09h05
CUCARACHA

Je vois

En fait ton système consiste à utiliser des petits boutons pour déplacer l'élément mais ça n'est pas ce que je veux faire...

Je veux simplement faire en sorte que les scrollbars ne reçoivent pas l'information de repositionnement...

Je crois que je vais utiliser O,K,L,M à la place...

Si tu as une autre idée... N'hésite pas...

@+

Laurent
16/02/2006, 09h26
SpaceFrog

Ha Oki je n'avais pas compris le deplacement de la fenetre par scroll, je n'utilise jamais les flèches pour cela ...

à part mettre le body en height:100% et overflow:hidden
16/02/2006, 10h26
CUCARACHA

Je vais changer de touches

Je vais changer de touches et je te ferais tester ensuite...

@+

Laurent