[onkey...] touches de déplacement

CUCARACHA · 16/02/2006, 08h33

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

**SpaceFrog** · 16/02/2006, 08h36

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

CUCARACHA · 16/02/2006, 09h05

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

**SpaceFrog** · 16/02/2006, 09h26

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

CUCARACHA · 16/02/2006, 10h26

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

@+

Laurent

[onkey...] touches de déplacement

JavaScript

Discussions similaires

Partager

Partager