function show hide avec slide

Version imprimable

Bonjour
j'ai amélioré un bout de code pour afficher et cacher du texte avec effet de slide (affichage progressif)
sans le slide ca fonctionne :)
avec le slide ca fonctionne aussi... mais une seule fois sur chacun des items...
ensuitele display reste a none (firebug) et la largeur reste a 0 ...

mon code
//////////*****/////////
Code Javascript :

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
69
70
71
72
73
74
75
76
77
78
79
80
81
 
function SuiteH(thingId){	
	//  On ajoute la div a afficher et sa hauteur
	/// on recupere le nombre d'id
	 z=0;
	 for(i=1; i<=10;i++){
	 if (document.getElementById("divid" + i) ) z++;
	 } 
 //alert ('toto '+z);		 
	//on recupere id de la div a cacher
	IDaC=0;
	NbId =1;
	for (i = 1; i <= z; i++) {
		var objet = document.getElementById("divid" + i) ;
		//alert ('tutu '+document.getElementById("divid" + i).style.display);
		if (objet.style.display == "block") {
	       IDaC=NbId;
		    }
		NbId++;	
	}
	//alert ('toto '+IDaC);
   //on definit la largeur a reduire	
	largeur = 600;
///on cache la div
	//var i;
	var targetElement;
	//for(i=1; i<=NbId;i++){
	/* targetElement = document.getElementById("divid" + i) ;
	 targetElement.style.display = "none" ;*/
	if (IDaC != "0") {
alert ('tata '+IDaC);
	var targetElement = document.getElementById("divid" + IDaC);
	var lFinalH = 0; //largeur finale 
	var lActuelH = largeur; //largeur initiale 
	var timer;
	var fctH = function(){
		lActuelH -= 10; //Augmente la largeur de -10px  
		targetElement.style.width = lActuelH + 'px';
		if (lActuelH <= lFinalH) {
			clearInterval(timer); //Arrête le timer
			//targetElement.style.overflow = 'hidden';
			targetElement.style.display = "none";
			targetElement.style.width = "0"; // Fix du cache de la div +++
		}
	};
	fctH();
	timer = setInterval(fctH, 1); //Toutes les 1 ms
	//IDaC.innerHTML = "+";
	document.getElementById("divid" + IDaC).value = "+";
}
// }
 //on montre la div
 var objet;
 var lFinal;
 var lActuel;
 largeur2=600;
	var objet = document.getElementById("divid" + thingId) ; // entre les deux  le nom du div que tu veux faire apparaître 
	if (objet.style.display == "none" /*|| !objet.style.display*/) {
alert ('titi '+thingId);
 
		//objet.style.width  = "400px";
		//objet.style.overflow = "hidden";
		//thingId.innerHTML = "-";
		document.getElementById("divid" + thingId).value = "-";
		var lFinal = largeur2; //largeur finale (la largeur une fois que ça aura fini de déplier) 
		var lActuel = 0; //largeur initiale (la largeur au début)
		var timer;
 
		var fct = function(){
			lActuel += 10; //Augmente la largeur de 10px  
			objet.style.width = lActuel + 'px';
			if (lActuel > lFinal) {
				clearInterval(timer); //Arrête le timer
			/*objet.style.overflow = 'inherit';*/
			}
		};
		fct();
		timer = setInterval(fct, 1); //Toutes les 1 ms
		objet.style.display = "block";
	}	
}

//////////*****/////////

appel de la fonction
Code HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
<a href="#" onclick="SuiteH('1')">et encore...</a><br />
<a href="#" onclick="SuiteH('2')">et plus...</a><br /><br />
 
<div id="bloc6">
<div id="divid1" style="position: absolute;display: none;  width: 0px;background-color : #734994; color : #ffffff;filter:alpha(opacity=90);opacity:0.9;">
texte
</div>
<div id="divid2" style="position: absolute;display: none;  width: 0px;background-color : #734994; color : #ffffff;filter:alpha(opacity=90);opacity:0.9;">
texte
</div>
</div>

06/01/2011, 09h51
RomainVALERI

On dirait que c'est la portée de ta variable timer qui pose souci : elle est déclarée dans la fonction SuiteH, donc détruite en sortie. Quand ta fonction anonyme appelée par setInterval est exécutée, la référence à timer doit s'être perdue... non ? à vérifier éventuellement car il me semble que le clearInterval doit échouer. ^^

---

A part ça, juste un détail : pourquoi, alors qu'on veut un bouton faisant une action sur la page, utiliser une balise <a> correspondant à un lien... ? :calim2:

C'est sémantiquement inexact, et en plus ça t'oblige à construire des "béquilles" plus ou moins dangereuses comme le fait d'inhiber le fonctionnement "normal" de l'attribut href avec un "#".

Si je peux me permettre de transformer l'antienne de Thierry la Fronde : *hum hum*

<button> les (faux) liens <a> hors du web ! :mouarf: heu... :oops:
06/01/2011, 10h21
thejoker31

Merci Romain de ta reponse
je vais tester timer et setInterval

quand au lien vers le texte il sera porté par du texte ..
que proposes tu a la place?
06/01/2011, 12h29
RomainVALERI

Citation:

Envoyé par thejoker31

quand au lien vers le texte il sera porté par du texte ..
que proposes tu a la place?

<span> si tu as besoin d'un élément inline, mais sinon plutot <button> comme je le proposais plus haut.

Mais si ton contexte est spécifique et ne le permet pas, ce n'était qu'une suggestion de cohérence sémantique... ^^

j'ai pris en compte tes modifs
et j'ai differencié les variables pour le show et le hide
et ca fonctionne !!
bel effet assuré!

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
69
70
71
72
73
74
75
76
77
78
79
80
81
function SuiteH(thingId){    
    //  On ajoute la div a afficher et sa Largeur
    /// on recupere le nombre d'id
     z=0;
     for(i=1; i<=10;i++){
     if (document.getElementById("divid" + i) ) z++;
     } 
 //alert ('toto '+z);         
    //on recupere id de la div a cacher
    IDaC=0;
    NbId =1;
    for (i = 1; i <= z; i++) {
        var objet = document.getElementById("divid" + i) ;
        //alert ('tutu '+document.getElementById("divid" + i).style.display);
        if (objet.style.display == "block") {
           IDaC=NbId;
            }
        NbId++;    
    }
    //alert ('toto '+IDaC);
   //on definit la largeur a reduire    
    largeurH = 400;
 
///on cache la div    
    var targetElement;    
    if (IDaC != "0") {
//alert ('tata '+IDaC);
    var targetElement = document.getElementById("divid" + IDaC);
    var lFinalH = 0; //largeur finale 
    var lActuelH = largeurH; //largeur initiale 
    var timerH;
    var fctH = function(){
        lActuelH -= 10; //Augmente la hauteur de -20px  
        targetElement.style.width = Math.max(lActuelH,0) + 'px'; // ensure the width is > or = 0
        if (lActuelH <= lFinalH) {
            clearInterval(timerH); //Arrête le timer            
            targetElement.style.display = "none";
            targetElement.style.width = "0px"; // Fix du cache de la div +++
        }
    };    
    timerH = setInterval(fctH, 20); //Toutes les 20 ms
    //IDaC.innerHTML = "+";
    //document.getElementById("divid" + IDaC).value = "+";
}
 
 //on montre la div
 var objet;
 var lFinal;
 var lActuel;
 largeur=400;
    var objet = document.getElementById("divid" + thingId) ; // entre les deux  le nom du div que tu veux faire apparaître 
    if (objet.style.display == "none" /*|| !objet.style.display*/) {
//alert ('titi '+thingId);
 
        //objet.style.width  = "400px";
        //objet.style.overflow = "hidden";
        //thingId.innerHTML = "-";
        //document.getElementById("divid" + thingId).value = "-";
        var lFinal = largeur; //Largeur finale (la Largeur une fois que ça aura fini de déplier) 
        var lActuel = 0; //Largeur initiale (la Largeur au début)
        var timer;
 
        var fct = function(){
            lActuel += 10; //Augmente la largeur de 20px  
            objet.style.width = lActuel + 'px';
            if (lActuel > lFinal) {
                clearInterval(timer); //Arrête le timer
            //objet.style.overflow = 'inherit';
            }
        };        
        timer = setInterval(fct, 20); //Toutes les 20 ms        
 
        //objet.style.width = 400 + 'px';        
       objet.style.display = "block";
        //alert ('toutou '+ objet.style.width );
 
        //objet.style.zIndex = 25;
    }
 
 
}