Discussion :

[Crokan]

Bonjour à tous,

J'ai un petit os, avec une fonction que j'ai reprise, que j'ai pu mettre en forme comme je voulais à un détail près que je n'arrive pas à résoudre.
but final.

faire apparaitre un div de la manière suivante: d'abord la hauteur augmente jusqu'à la hauteur désirée ensuite, cette "ligne" verticale va s'élargir jusqu'à la largeur désirée pour ce div. le tout avec l'opacité qui augmente.
Et fatalement la même chose dans l'autre sens pour refermer.

voici le 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
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
 
// cette fonction est appelée par le bouton d'ouverture/fermeture
function setControl(which)
{
    // gets the control button
    //var control = document.getElementById("control_"+which);
    //if (!control) {
      //  return false;
    //}
    // gets the control panel
    //var tableau = document.getElementById("content");
 
    var panel = document.getElementById("panel_"+which);
    if (!panel) {
        return false;
    }
    // show panel
    if (panel.style.display != "block") {
 
        panel.style.display = "block";
        fadePanel(which, true);
 
 
 
    // hide panel
    } else {
    		//tableau.style.display = "none";
        panel.style.display ="none";
        fadePanel(which, false);        
       // tableau.style.display = "block";
    }
    return true;
}
 
// fade in delay for panel to appear, default is 10
var fadein_speed = 2;
// fade out delay for panel to hide, default is 5
var fadeout_speed = 3;
// smoothness of fade, lower is better, but it consumes more CPU
// default is 20 refreshes per second
var refresh_rate = 20;
 
// cette fonction va faire apparaitre ou disparaitre le panneau.
function fadePanel(which, show)
{
    // gets the control panel
    var panel = document.getElementById("panel_"+which);
    if (!panel) {
        return false;
    }
    // clear any existing timeout, so you can click very quickly on the same
    // control button, the panel will move from current position
    if (panel.timeout) {
        clearTimeout(panel.timeout);
    }
    // always dispay the panel while moving
    panel.style.display = "block";
    if (!panel.counter) {
        panel.counter = 0;
    }
    // maximum offset for moving the panel
    var max = 664;
    // get actual counter, so the position of the panel in the fade
    var opacity = panel.counter;
    // avoid flicker when opacity changes to 100%
    if (opacity >= 100) opacity = 99;
    else if (opacity <= 0) opacity = 0;
    panel.style.MozOpacity = (opacity / 100);
    panel.style.filter = "Alpha(opacity="+(3 * opacity / 4)+")";
    // sets the next position
    //var left = - Math.pow(panel.counter - 100, 10) / Math.pow(55, 10);
 
 
     var height = (panel.counter * 300)/100;
     var width = (panel.counter * 664)/100;
     // ICI ICI ICI ICI ICI ICI ICI
     panel.style.height = height+"px";     
     panel.style.width= width+"px";
 
    panel.style.margin = "auto";
 
 
    // panel is fading in
    if (show) {
 
        // end of fade
        if (panel.counter >= 99) {
            return true;
        }
        // increment counter
        panel.counter += fadein_speed;
    // panel is fading out
    } else {
        // end of fade, hide the panel
 
        if (panel.counter <= 0) {
            panel.style.display = "none";
            return true;
        }
        // decrement counter
        panel.counter -= fadeout_speed;
    }
    // recursive call
    panel.timeout = setTimeout("fadePanel('"+which+"', "+show+");", refresh_rate);
    return true;
}

dans la fonction fadePanel, là où j'ai mis ICICICICICICIC, c'est à ce niveau que les modifications de hauteur et largeur se font.
Mais de cette manière, les 2 augmentent en meme temps.
l'idée est que l'opacité, elle, soit progressive comme maintenant mais sur l'entièreté du process, vers le 75% quand la hauteur est faite et à 100% quand la largeur est OK, je sais pas si je suis clair ...

Est-ce que quelqu'un pourrait m'aider à finaliser cette fonction, j'ai envie d'apprendre, mais je manque d'expérience. Je cherche pas la réponse toute faite. ^^

en tous cas merci d'avance

[Crokan]

Bon j'ai un peu avancé

je me suis dit que la meilleure manière était de faire ca en 2 fois.

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
 
if (panel.style.display != "block") {
 
        panel.style.display = "block";
        fadePanel1(which, true);
	fadePanel2(which, true);
 
 
    // hide panel
    } else {
    		//tableau.style.display = "none";
        panel.style.display ="none";
       fadePanel2(which, false);
        fadePanel1(which, false);        
 
    }

dans la première phase (fadePanel1) on gère hauteur et opacité et dans la 2e on ne s'occupe que de la largeur.

1ere phase:

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
 
    var opacity = panel.counter;
    if (opacity >= 100) opacity = 99;
    else if (opacity <= 0) opacity = 0;
    panel.style.MozOpacity = (opacity / 100);
    panel.style.filter = "Alpha(opacity="+(3 * opacity / 4)+")";
    var height = (panel.counter * 300)/100; 
    panel.style.height = height+"px";
    panel.style.width = "5px";
    panel.style.margin = "auto";
 
 
 
    // panel is fading in
    if (show) {
 
        // end of fade
        if (panel.counter >= 99) {
            return true;
        }
        // increment counter
        panel.counter += fadein_speed;
    // panel is fading out
    }

dans la 2e phase, on ne gère que la largeur (enfin j'aimerais mais ca marche pas)

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
 
if (panel.timeout) {
        clearTimeout(panel.timeout);
    }
    // always dispay the panel while moving
    panel.style.display = "block";
    if (!panel.counter) {
        panel.counter = 0;
    }
    // maximum offset for moving the panel
    // get actual counter, so the position of the panel in the fade
  		var width = (panel.counter * 664)/100;
    	panel.style.width= width+"px";
    	panel.style.margin = "auto";
 
 
    // panel is fading in
    if (show) {
 
        // end of fade
        if (panel.counter >= 99) {
            return true;
        }
        // increment counter
        panel.counter += fadein_speed;
    // panel is fading out
    } else {
        // end of fade, hide the panel
 
        if (panel.counter <= 0) {
            //panel.style.display = "none";
            return true;
        }
        // decrement counter
        panel.counter -= fadeout_speed;
    }
    // recursive call
    panel.timeout = setTimeout("fadePanel2('"+which+"', "+show+");", refresh_rate);

bref, si j'enlève fadePanel2 dans la fonction set control, je vois bien mon div qui augmente de hauteur et d'opacité, c'est nickel.
mais si je rajoute fadepanel2 le résultat est que à l'ouverture, j'ai rien, et à la fermeture, le panneau tout fin apparait et sa hauteur diminue ...

je sais que c'est compliqué, juste besoin d'un ptit peu d'aide, merci d'avance

[Crokan]

Ok juste pour dire que j'ai résolu mon problème de cette manière ci.

etat fermé
-> clic
-> fadepanel1 (true) {
ouvrage en hauteur
hauteur ouverte->remise compteur à zero
fadepanel2 (true) //(ouvrage en largeur)
}

état ouvert
->clic
->fadepanel2 (false){
fermage de la largeur
largeur fermée->remise compteur à zero
fadepanel1 (false) //(fermage largeur)
}

comme quoi, en expliquant son problème, on le comprend mieux !!
bonne journéee