Discussion :

[tanguynoub]

Bonjour a tous alors j'ai 2 script quasiment identique qui permet d'afficher une page qui descend de haut en bas en cliquant sur un lien mais voila le problème est que quand je clique sur un lien puis un autre le premier ne s’enlève pas ... comment faire pour enlever l'action d'avant pour faire apparaitre la suivant svp

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<script type="text/javascript">
function Suite(lien){
 
	var objet = document.getElementById('corp'); 
 
	if(objet.style.display == "none" || !objet.style.display){
 
 
		objet.style.display = "block";
		objet.style.overflow = "hidden"; 
		lien.innerHTML = "Accueil";
 
        var hFinal      =     1000;  
        var hActuel     =     0;	 	
 
        var timer;
        var fct =        function ()
        {
                hActuel  +=       20;     
 
                objet.style.height     =	 hActuel      +     'px';
 
                if( hActuel > hFinal)
                {
                        clearInterval(timer);   
                        objet.style.overflow    =   'inherit';
                }
        };
        fct();
 
 
		timer = setInterval(fct,40);    
 
	}else if(objet.style.display == "block"){
 
		var hFinal      =     0;  
        var hActuel     =     200;	 	
 
        var timer;
        var fct =        function ()
        {
                hActuel  -=   20;     
 
                objet.style.height     =	 hActuel      +     'px';
 
                if( hActuel < hFinal)
                {
                        clearInterval(timer);   
                        objet.style.overflow    =   'inherit';
						objet.style.display     =   "none";
                }
        };
        fct();
 
 
		timer = setInterval(fct,40);    
 
 
		lien.innerHTML = "Accueil";
 
	}
}
function Suite2(lien){
 
	var objet = document.getElementById('projets'); 
 
	if(objet.style.display == "none" || !objet.style.display){
 
 
		objet.style.display = "block";
		objet.style.overflow = "hidden"; 
		lien.innerHTML = "projets";
 
        var hFinal      =     1000;  
        var hActuel     =     0;	 	
 
        var timer;
        var fct =        function ()
        {
                hActuel  +=       20;     
 
                objet.style.height     =	 hActuel      +     'px';
 
                if( hActuel > hFinal)
                {
                        clearInterval(timer);   
                        objet.style.overflow    =   'inherit';
                }
        };
        fct();
 
 
		timer = setInterval(fct,40);    
 
	}else if(objet.style.display == "block"){
 
		var hFinal      =     0;  
        var hActuel     =     200;	 	
 
        var timer;
        var fct =        function ()
        {
                hActuel  -=   20;     
 
                objet.style.height     =	 hActuel      +     'px';
 
                if( hActuel < hFinal)
                {
                        clearInterval(timer);   
                        objet.style.overflow    =   'inherit';
						objet.style.display     =   "none";
                }
        };
        fct();
 
 
		timer = setInterval(fct,40);    
 
 
		lien.innerHTML = "projets";
 
	}
}
</script>

[NoSmoking]

Bonjour,
pas tout compris, mais au lieu d'utiliser setInterval tu peux essayer setTimeout, ou encore "killer" le timer crée par ces méthodes.

[tanguynoub]

merci de ta reponse , je t'explique plus clairement : alors enfaite j'ai un premier script qui fait apparaitre un div en glissant sur le premier lien donc je met le meme script pour faire glisser une autre page lors du click sur le deuxieme lien sauf que quand je clique sur le premier lien puis le deuxieme la premiere page reste en arriere plan ,ce que je veux est que au click d'un lien tout se stop et le script se relance pour n'avoir qu'une page
voila jesper que tu m'a comprit ...

[NoSmoking]

dans ce cas à chaque click il te faut fermer celle éventuellement ouverte.

[tanguynoub]

oui voila mais parcontre avec quelle commande ?

[NoSmoking]

je pense que la première étape va consister à "factoriser" tes fonctions, une seule fonction suffit avec passage de paramètres.

Dans un deuxième temps il te faudra gérer une variable dans laquelle tu stockera l'élément en cours afin de le fermer quand tu en ouvriras un autre.

Plusieurs façons de procéder mais cela dépend du rendu final que tu souhaites, style accordéon, style onglet ou autre...

[tanguynoub]

Ce que je veux c'est une descente vers le bas mais l'effet est parfait c'est juste qu'il faudrait supprimer tout effet précédemment exécuter quand on clique sur un lien en fait.
ps: Cette action reviendrait a faire un "kill" en php

[NoSmoking]

comme je te le disais commence par "factoriser", la gestion ne sera que plus facile.

Attention, il existe des choses dans ton code qui ne devrait pas plaire à IE.

[tanguynoub]

comment faire pour "factoriser" mes 2 script j'ai essayer de déclarer les 2 variable dans le même script mais sa ne marche pas ...

[NoSmoking]

comment faire pour "factoriser" mes 2 scriptfonctions

en rouge ci dessous les éléments extérieurs à la fonction qui peuvent être amenés à 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
function Suite(lien) {
  var objet = document.getElementById('corp');
  if (objet.style.display == "none" || !objet.style.display) {
    objet.style.display = "block";
    objet.style.overflow = "hidden";
    lien.innerHTML = "Accueil";
    var hFinal = 1000;
    var hActuel = 0;
    var timer;
    var fct = function () {
      hActuel += 20;
      objet.style.height = hActuel + 'px';
      if (hActuel > hFinal) {
        clearInterval(timer);
        objet.style.overflow = 'inherit';
      }
    };
    fct();
    timer = setInterval(fct, 40);
  } else if (objet.style.display == "block") {
    var hFinal = 0;
    var hActuel = 200;
    var timer;
    var fct = function () {
      hActuel -= 20;
      objet.style.height = hActuel + 'px';
      if (hActuel < hFinal) {
        clearInterval(timer);
        objet.style.overflow = 'inherit';
        objet.style.display = "none";
      }
    };
    fct();
    timer = setInterval(fct, 40);
    lien.innerHTML = "Accueil";
  }
}

Concernant le lien, tu le passes déjà en paramètre donc pas de soucis, pour les 2 autres il suffit de faire pareil pour obtenir une déclaration de la fonction comme ceci par exemple function Suite(lien, texte_lien, id_element).