Déplacement div

**squall049** · 08/02/2014, 11h00

Bonjour à tous

Je suis en train de me mettre au javascript et j'ai un petit souci sur le déplacement et la remise en place d'une div.

Je m'explique:

J'ai créer une div #menu avec 2 liens. Le premier "Navigation" et le second "Fermer". Se menu a une hauteur de 215px et est positionner à un top: -195px de tel manière que l'on voie que "Navigation".

Ce que j'essaye de faire c'est lors d'un clic sur navigation, il se place en top:0; avec un mouvement fluide. Une fois positionner à 0, le lien "Navigation" passe en display: none; et que le lien "Fermer" passe en visible. Et même chose si je re-clique sur "Fermer". le menu se repositionne à top:-195px et repasse en display: none; pour que "Navigation" repasse en visible.

Pour info faut que se code fonctionne sous IE 6. Si il ne fonctionne pas sous Firefox, Chrome, Opéra etc... se n'est pas grave car se code est intégré dans un logiciel et non sur un site web.

Mon html:

Code html :

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
<!doctype html>
<html>
<head>
 
    <link rel="stylesheet" type="text/css" media="all" href="Prog/test.css" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"  />
    <meta http-equiv="Content-Type" content="text/css; charset=UTF-8" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <meta http-equiv="imagetoolbar" content="no">
 
    <script src="Prog/Menu.js"></script>
 
</head>
 
<body>
 
<div id="global">
 
<div id="menuFixe">
 
<div id="menu">
<a href="#menu" onClick='MenuDeplier' class="ouvrir">Navigation</a>
<a href="#menu" onClick="MenuReplier" class="fermer">Fermer</a></div></div>
 
<div id="header">Test de titre</div>
<div id="contenu">&nbsp;</div>
<div id="footer">&nbsp;</div>
 
</div>
</body>
</html>

Mon CSS:

Code css :

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
@charset "utf-8";
/* CSS Document */
 
html,body{ 
	margin:0;
	padding:0;
	height:100%;
	width:auto;
	background:#E8E8E8;
	color:#222222;
}
 
 
#global { min-height:100%; position:relative; }
 
#menuFixe { position:fixed; top0; left:0;}
#menu {
	position:relative;
	top: -195px;
	left:0;
	width:89px;
	height:215px;
	text-align:center;
	border: 1px solid #000000;
	border-radius: 0 0 20px 0;
	box-shadow: #666 2px 2px 0px;
	-pie-background: linear-gradient(#B9B9B9, #2E2E2E);
	behavior: url(Prog/PIE.htc);
	margin-top:-3px;
	margin-left:-3px;
	background-attachment:fixed;
	padding-top:5px;
}
 
#menu a.ouvrir { left: 0; top: 0; text-align:center; color:#FFFFFF; font-weight:bold; text-decoration: none; }
#menu a:hover.ouvrir {color:#FF0000;}
#menu a:visited.ouvrir {color:#FFFFFF;}
 
 
#menu a.fermer { display: none; left: 0; top: 0; text-align:center; color:#FFFFFF; font-weight:bold; text-decoration: none; }
#menu a:hover.fermer {color:#FF0000;}
#menu a:visited.fermer {color:#FFFFFF;}
 
#header {
	position:absolute;
	padding-left:40px;
	padding-right:40px;
	color:#000000;
	font-weight:bold;
	font-size:40px;
	width:92%;
	text-align:center;
}
 
#contenu {
	padding-left:25px;
	padding-right:25px;
}
 
#footer {
}

Mon JS :

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
var timer=0;
 
obj=document.getElementById('menu');
topDepart=obj.offsetTop;
 
 
function FMenuDeplier(){
if(obj.offsetTop<=0)
{obj.style.top=obj.offsetTop=0;
MenuDeplier();}
}
 
function MenuDeplier(){
vitesseDeplacement=1;
if(timer==0)
{deplacement=setTimeout("fMenuDeplier()",vitesseDeplacement);}
else
{clearTimeout(rangement); 
deplacement=setTimeout("fMenuDeplier()",vitesseDeplacement);
timer=0;
}
}
 
 
function FMenuReplier(){
if(obj.offsetTop>=0)
{obj.style.top=obj.offsetTop=-195;
MenuReplier();}
}
 
function MenuReplier()
{
vitesseDeplacement=1;
if(timer==0)
{
deplacement=setTimeout("fMenuReplier()",vitesseDeplacement);}
else
{clearTimeout(rangement); 
deplacement=setTimeout("fMenuReplier()",vitesseDeplacement);
timer=0;
}
}

Dès que je test, je n'ai aucun effet. Rien ne bouge.

Amicalement

**Watilin** · 09/02/2014, 04h26

Bonsoir,

avec IE6 on est vraiment à la préhistoire des navigateurs. On n'a vraiment que la base comme outils : setTimeout, et les opérateurs arithmétiques pour faire les calculs d'animation.

Une première remarque :

Code :

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

deplacement=setTimeout("fMenuReplier()",vitesseDeplacement);}

Je ne sais pas si tu confonds ou si c'est juste une maladresse de nommage, mais à setTimeout on ne passe pas une vitesse, on lui passe une durée en millisecondes. La notion de vitesse n'est pas nécessaire pour des animations : on peut choisir une durée fixe de 20 millisecondes, ce qui correspond à 50 images par seconde (soit 50 Hertz). Si tu tiens à conserver une notion de vitesse, je pense que l'unité « pixels par seconde » est intéressante car elle est assez intuitive.

Première correction : je remplace vitesseDeplacement par dureeImage. Et tant qu'à faire je la mets au début du code, comme si si tu veux la modifier, tu n'as qu'une seule ligne à changer.

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
var timer=0;
var dureeImage=20; // millisecondes
 
obj=document.getElementById('menu');
topDepart=obj.offsetTop;
 
 
function FMenuDeplier(){
if(obj.offsetTop<=0)
{obj.style.top=obj.offsetTop=0;
MenuDeplier();}
}
 
function MenuDeplier(){
// vitesseDeplacement=1;
if(timer==0)
{deplacement=setTimeout("fMenuDeplier()",dureeImage);}
else
{clearTimeout(rangement); 
deplacement=setTimeout("fMenuDeplier()",dureeImage);
timer=0;
}
}
 
 
function FMenuReplier(){
if(obj.offsetTop>=0)
{obj.style.top=obj.offsetTop=-195;
MenuReplier();}
}
 
function MenuReplier()
{
// vitesseDeplacement=1;
if(timer==0)
{
deplacement=setTimeout("fMenuReplier()",dureeImage);}
else
{clearTimeout(rangement); 
deplacement=setTimeout("fMenuReplier()",dureeImage);
timer=0;
}
}

*

Autre chose, prends garde à la casse : FMenuReplier et fMenuReplier, ce n'est pas la même chose. Tu as probablement un message d'erreur, et le problème avec IE6, c'est que les messages d'erreur passent facilement à la trappe. Pour déboguer le JS sous IE6, je te conseille d'installer l'extension MS Script Debuger.

Tiens j'en profite pour corriger l'indentation. Deuxième transformation du 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
36
37
38
39
40
41
42
43
44
45
var timer = 0;
var dureeImage = 20; // millisecondes
 
obj = document.getElementById('menu');
topDepart = obj.offsetTop;
 
 
function fMenuDeplier() {
   if (obj.offsetTop <= 0) {
      obj.style.top = 0;
      obj.offsetTop = 0;
      MenuDeplier();
   }
}
 
function MenuDeplier() {
   // vitesseDeplacement = 1;
   if (timer == 0) {
      deplacement = setTimeout("fMenuDeplier()", dureeImage);
   } else {
      clearTimeout(rangement);
      deplacement = setTimeout("fMenuDeplier()", dureeImage);
      timer = 0;
   }
}
 
 
function FMenuReplier() {
   if (obj.offsetTop >= 0) {
      obj.style.top = -195;
      obj.offsetTop = -195;
      MenuReplier();
   }
}
 
function MenuReplier() {
   // vitesseDeplacement = 1;
   if (timer == 0) {
      deplacement = setTimeout("fMenuReplier()", dureeImage);
   } else {
      clearTimeout(rangement); 
      deplacement = setTimeout("fMenuReplier()", dureeImage);
      timer = 0;
   }
}

C'est pas plus clair comme ça ?

*

Il reste encore des trucs à corriger. D'abord, les variables. En JavaScript, s'il y a une habitude à avoir, c'est celle-là : toujours utiliser var ! Sinon les variables deviennent globales, et on se retrouve à s'arracher les cheveux parce qu'on a des valeurs qui changent de manière imprévisible. Et quand on veut une globale, on la déclare aussi avec var et on la met en dehors de toute fonction. De préférence en haut du code, comme j'ai fait avec dureeImage.

Ensuite, les bouts de code dans des chaînes. Ce n'est pas très propre, car le moteur JavaScript est obligé de rappeler l'interpréteur pour analyser la chaîne, ça lui fait perdre du temps. À la place, tu peux passer une fonction anonyme :

Code :

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

deplacement = setTimeout(function() { fMenuDeplier(); }, dureeImage);

Ou encore mieux, puisque ta fonction fMenuDeplier ne prend pas d'arguments, tu peux passer son nom directement (sans les parenthèses après) :

Code :

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

deplacement = setTimeout(fMenuDeplier, dureeImage);

Enfin, il y a les styles. Quand tu manipules la propriété style d'un élément HTML, il faut penser CSS. Tu manipules des chaînes représentant des bouts de code CSS. La valeur -195 toute seule n'a aucun sens en CSS si elle n'a pas d'unité : il faut rajouter px. Comme ceci : obj.style.top = -195 + "px";Et finalement, même si je ne suis plus tout à fait sûr pour IE6, il me semble que offsetTop est une propriété en lecture seule. De toute façon, tu modifies style.top donc il vaut mieux ne pas toucher à offsetTop.

Voici ma troisième correction de ton 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
36
37
38
39
40
41
42
var timer = 0;
var dureeImage = 20; // millisecondes
var deplacement;
 
var obj = document.getElementById('menu');
var topDepart = obj.offsetTop;
 
function fMenuDeplier() {
   if (obj.offsetTop <= 0) {
      obj.style.top = "0";
      MenuDeplier();
   }
}
 
function MenuDeplier() {
   // vitesseDeplacement = 1;
   if (timer == 0) {
      deplacement = setTimeout(fMenuDeplier, dureeImage);
   } else {
      clearTimeout(rangement);
      deplacement = setTimeout(fMenuDeplier, dureeImage);
      timer = 0;
   }
}
 
function FMenuReplier() {
   if (obj.offsetTop >= 0) {
      obj.style.top = -195 + "px";
      MenuReplier();
   }
}
 
function MenuReplier() {
   // vitesseDeplacement = 1;
   if (timer == 0) {
      deplacement = setTimeout(fMenuReplier, dureeImage);
   } else {
      clearTimeout(rangement);
      deplacement = setTimeout(fMenuReplier, dureeImage);
      timer = 0;
   }
}

*

Bon. Reste à s'attaquer à la logique du truc. Le vrai truc qui fait une animation, c'est qu'on ne fait qu'une petite partie du déplacement à chaque étape. Disons, par exemple, 10 pixels à chaque fois.

Code :

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

1
2
3
4
5
6
function fMenuDeplier() {
   if (obj.offsetTop <= 0) {
      obj.style.top = obj.offsetTop + 10 + "px";
      MenuDeplier();
   }
}

Et il faut rajouter l'action à faire quand l'animation est finie : faire disparaître « Navigation » et apparaîre « Fermer ». Pour ça, on rajoute un else :

Code :

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

1
2
3
4
5
6
7
8
function fMenuDeplier() {
   if (obj.offsetTop <= 0) {
      obj.style.top = obj.offsetTop + 10 + "px";
      MenuDeplier();
   } else {
      // les actions à faire
   }
}

Je vais te laisser le soin de coder ça.

*

Il reste pas mal de choses à dire à propos du reste de ton code, notamment le fait que tu veux accéder au DOM alors qu'il n'est pas encore prêt : tu fais document.getElementById('menu'); dans un script inclus depuis le <head>, avant que la balise du menu ne soit traitée. Pour corriger ça il faut agir sur l'évènement onload :

Code :

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

1
2
3
4
5
6
var obj;
var topDepart;
window.attachEvent("onload", function() {
   obj = document.getElementById('menu');
   topDepart = obj.offsetTop;
});

J'aurais également des choses à dire à propos de tes codes HTML et CSS qui sont trop modernes pour IE6. Il va falloir faire attention à tout ça et retirer tout ce qui pourrait ne pas passer. Et au passage, ajouter un DOCTYPE pour qu'IE ne passe pas en mode quirks. On en reparlera une autre fois, là je vais au dodo ^^

En bonus, j'ai modifié ta page HTML pour qu'elle passe la validation

Code HTML :

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>Page de Squall045</title>
   <link rel="stylesheet" type="text/css" media="all" href="Prog/test.css">
   <meta http-equiv="Content-Style-Type" content="text/css; charset=UTF-8">
   <meta http-equiv="Content-Script-Type" content="text/javascript; charset=UTF-8">
   <meta http-equiv="imagetoolbar" content="no">
   <script type="text/javascript" src="Prog/Menu.js"></script>
</head>
 
<body>
 
<div id="global">
   <div id="menuFixe">
      <div id="menu">
         <a href="#menu" onclick="MenuDeplier();" class="ouvrir">Navigation</a>
         <a href="#menu" onclick="MenuReplier();" class="fermer">Fermer</a>
      </div>
   </div>
 
   <div id="header">Test de titre</div>
   <div id="contenu">&nbsp;</div>
   <div id="footer">&nbsp;</div>
</div>
 
</body>
</html>

Code CSS :

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
@charset "utf-8"; /* Est-ce que IE6 comprend ça ? */
/* CSS Document */
 
html, body { margin: 0;
             padding: 0;
             height: 100%;
             width: auto;
             background: #E8E8E8;
             color: #222; }
 
#global { min-height: 100%;     /* min-height bogue sous IE6 */
          position: relative; }
 
#menuFixe { position: fixed;
            top: 0;
            left: 0; }
 
#menu { position: relative;
        top: -195px;
        left: 0;
        width: 89px;
        height: 215px;
        text-align: center;
        border: 1px solid black;
        border-radius: 0 0 20px 0;                          /* pas de border-radius sous IE6 */
        box-shadow: #666 2px 2px 0px;                       /* pas de box-shadow sous IE6 */
        -pie-background: linear-gradient(#B9B9B9, #2E2E2E); /* ??? */
        behavior: url(Prog/PIE.htc);                        /* ??? */
        margin-top: -3px;     /* marges négatives sous IE6, pas sûr que ça marche */
        margin-left: -3px;
        background-attachment: fixed;
        padding-top: 5px; }
 
#menu a.ouvrir { position: absolute;
                 left: 0;
                 top: 200px;
                 text-align: center;
                 color: white;
                 font-weight: bold;
                 text-decoration: none; }
 
#menu a.ouvrir:hover   { color: red;   }
#menu a.ouvrir:visited { color: white; }
 
#menu a.fermer { display: none;
                 left: 0;
                 top: 0;
                 text-align: center;
                 color: white;
                 font-weight: bold;
                 text-decoration: none; }
 
#menu a.fermer:hover   { color: red;   }
#menu a.fermer:visited { color: white; }
 
#header { position: absolute;
          padding-left: 40px;
          padding-right: 40px;
          color: black;
          font-weight: bold;
          font-size: 40px;
          width: 92%;
          text-align: center; }
 
#contenu { padding-left: 25px;
           padding-right: 25px; }
 
#footer { }

**squall049** · 09/02/2014, 12h07

Bonjour Watilin

Un très grand merci pour toutes c'est explications détaillées. Commençant le javascript, je comprend pas tous et je mélange certaines choses. Je vais tester tous ça et surtout assimiler. Je fait les tests dans la journée et je retient au courant sois dans la soirée sois demain pour dire ou j'en suis.

Amicalement

**squall049** · 10/02/2014, 17h41

Bonjour

Voilà après plusieurs test, je suis tombé sur l'erreur :

Erreur : Impossible d’obtenir la propriété « offsetTop » d’une référence null ou non définie

J'ai réussi à la passer mais maintenant, je n'est aucune d'erreurs mais aucun mouvement. La seul chose qui se passe est au niveau de navigation une fois cliquer, il n'y a plus de hover comme si le lien est désactiver.

Ensuite j'ai essayer d'intégrer le changement de liens entre "Navigation" et "Fermer". Même chose aucune erreur et aucun effet.

Mon JS :

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
var timer = 0;
var dureeImage = 20; // millisecondes
var deplacement;
var obj;
var topDepart;
var cacher;
var afficher;
 
 
	window.attachEvent("onload", function() {
	obj = document.getElementById('menu');
	topDepart = obj.offsetTop;
});
 
 
function fMenuDeplier() {
	if (obj.offsetTop <= 0) {
	obj.style.top = obj.offsetTop + 195 + "px";
	MenuDeplier();}
	else {
	cacher = document.getElementsByClassName('ouvrir').style.display = "none";
	afficher = document.getElementsByClassName('fermer').style.display = "block";
}}
 
 
function MenuDeplier() {
	// vitesseDeplacement = 1;
	if (timer == 0) {
	deplacement = setTimeout(fMenuDeplier, dureeImage);}
	else {
	clearTimeout(rangement);
	deplacement = setTimeout(fMenuDeplier, dureeImage);
	timer = 0;
}}
 
 
function fMenuReplier() {
	if (obj.offsetTop >= 0) {
	obj.style.top = -195 + "px";
	obj.offsetTop = -195 + "px";
	MenuReplier();}
	else {
	cacher = document.getElementsByClassName('fermer').style.display = "none";
	afficher = document.getElementsByClassName('ouvrir').style.display = "block";
}}
 
 
function MenuReplier() {
	// vitesseDeplacement = 1;
	if (timer == 0) {
	deplacement = setTimeout(fMenuReplier, dureeImage);}
	else {
	clearTimeout(rangement);
	deplacement = setTimeout(fMenuReplier, dureeImage);
	timer = 0;
}}

Amicalement

**NoSmoking** · 10/02/2014, 18h56

Bonjour,
as tu bien assimilé ce que t'a écrit Watilin

Il reste pas mal de choses à dire à propos du reste de ton code, notamment le fait que tu veux accéder au DOM alors qu'il n'est pas encore prêt : tu fais document.getElementById('menu'); dans un script inclus depuis le <head>, avant que la balise du menu ne soit traitée. Pour corriger ça il faut agir sur l'évènement onload :

Code :

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

1
2
3
4
5
6
var obj;
var topDepart;
window.attachEvent("onload", function() {
   obj = document.getElementById('menu');
   topDepart = obj.offsetTop;
});

**Watilin** · 12/02/2014, 17h38

Envoyé par NoSmoking

Bonjour,
as tu bien assimilé ce que t'a écrit Watilin

Je pense que oui, il a bien mis le attachEvent dans son code.

*

Squall049, peux-tu m'expliquer ce que tu as essayé de faire à ces différents endroits de ton code ?

1:

Code :

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

obj.style.top = obj.offsetTop + 195 + "px";

Là tu rajoutes 195 pixels à chaque étape. C'est pas un peu brutal ?

2:

Code :

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

clearTimeout(rangement);

Aucun timeout n'est assigné à la variable rangement. À quoi elle sert ?

3:

Code :

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

cacher = document.getElementsByClassName('ouvrir').style.display = "none";

Une double affectation, pas très lisible ça… Tu sais précisément ce qui se passe quand tu fais ça ? C'est la partie la plus à droite qui est exécutée en premier. Et une affectation (=), utilisée en tant qu'expression (ce qui se fait rarement) renvoie la valeur de sa partie droite, dans le cas présent "none". Ça peut se réécrire comme ça :

Code :

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

1
2
document.getElementsByClassName('ouvrir').style.display = "none";
cacher = "none";

À toi de voir si c'est bien ce que tu as voulu faire.

4:

Code :

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

if (timer == 0)

timer est défini à 0 au départ, et n'est jamais modifié, donc il est toujours égal à 0. Donc la branche else de ce test ne sert à rien (c'est du code mort).

Au passage, une erreur facile à corriger :

Code :

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

getElementsByClassName('ouvrir').style ...

La function getElementsByClassName a un « s » à « Elements », cela indique qu'elle renvoie une collection d'éléments, et non pas un élément seul. Une collection se comporte à peu près comme un tableau : tu peux utiliser la syntaxe getElementsByClassName('ouvrir')[0] pour en récupérer le premier élément. Ça sera peut-être plus clair comme ça :

Code :

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

1
2
3
var collection = document.getElementsByClassName('ouvrir');
var premierElement = collection[0];
premierElement.style.display = 'block';

Normalement, ça auraît dû te faire un message d'erreur de ce genre :

Cet objet ne gère pas cette propriété ou cette méthode

Je m'étonne que tu n'aies aucun message. D'ailleurs, je ne suis pas sûr que la fonction getElementsByClassName existe sous IE6… Tu devrais envisager de mettre des id sur tes liens.

Et encore une fois : pense à l'indentation, c'est important l'indentation…