réduction dynamique progressive d'un div

Version imprimable

1 pièce(s) jointe(s)

Bonjour,

j'essais désespérément de réduire un div mais ca ne passe psa, le code entier de la page est :

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
<html>
<head>
<style type="text/css">
body{
background-color:#EEEEEE;
font-family:"Lucida Console";
}
 
div#fenetre{
width:100%;
height:auto;
border:1px solid #CCCCCC;
background-color:#FFFFFF;
border-collapse:collapse;
}
 
div#titre{
border-top:1px solid #CCCCCC;
border-bottom:1px solid #CCCCCC;
}
 
div#logo{
height:32px;
}
 
div#titre{
height:35px;
background-color:#F5F5FF;
}
</style>
<script language="javascript">
function change_status(me){
var div = document.getElementById("contenu");
 
	if( (me.src=="engine_reduire.png")||(me.src=="file:///C:/Documents%20and%20Settings/Avogadro/Bureau/reduit_agrandi/engine_reduire.png") ){
	me.src="engine_agrandir.png";
	div.getAttribute("style").setAttribute("height", "50px"); 
	}else{
	me.src="engine_reduire.png";
	div.getAttribute("style").setAttribute("height", "312px");;	
	}
}
</script>
</head>
<body>
<div id="fenetre">
	<div id="logo">
		<img src="engine_reduire.png" style="margin: 2px; cursor: pointer;" alt="png" onClick="change_status(this)" height="14" width="14"/>
	</div>
	<div id="titre">
		<b>Maximiz Minimiz by Avogadro</b>
	</div>
	<div id="contenu">
		blabla<br/>
		blabla<br/>
		blabla<br/>
		blabla<br/>
		blabla<br/>
		blabla<br/>
		blabla<br/>
		blabla<br/>
		blabla<br/>
		blabla<br/>
		blabla<br/>
		blabla<br/>
		blabla<br/>
		blabla<br/>
		blabla<br/>
		blabla<br/>
		blabla<br/>
		blabla<br/>
	</div>
</div>
</body>
</html>

dans un premier temps j'essayais de réduire le div plurement et simplement avec ma fonction :

Code:

1
2
3
4
5
6
7
8
9
10
11
function change_status(me){
var div = document.getElementById("contenu");
 
	if( (me.src=="engine_reduire.png")||(me.src=="file:///C:/Documents%20and%20Settings/Avogadro/Bureau/reduit_agrandi/engine_reduire.png") ){
	me.src="engine_agrandir.png";
	div.getAttribute("style").setAttribute("height", "50px"); 
	}else{
	me.src="engine_reduire.png";
	div.getAttribute("style").setAttribute("height", "312px");;	
	}
}

mais ca ne passe pas, idem si on fait un

Code:

document.getElementById("contenu").height = XX;

Quelqu'un a une idée svp? Pièce jointe 8198

bonjour,

si tu veux réduire la hauteur de ton div, il faut que tu précises un overflow !! Sinon la hauteur minimale dépendra du contenu. Voici ton script corrigé :

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
82
83
84
 
<html>
<head>
<style type="text/css">
body{
background-color:#EEEEEE;
font-family:"Lucida Console";
}
 
div#fenetre{
width:100%;
height:auto;
border:1px solid #CCCCCC;
background-color:#FFFFFF;
border-collapse:collapse;
}
 
div#titre{
border-top:1px solid #CCCCCC;
border-bottom:1px solid #CCCCCC;
}
 
div#logo{
height:32px;
}
 
div#titre{
height:35px;
background-color:#F5F5FF;
}
</style>
 
<script type="text/javascript">
<!--
function change_status(me)
{
var element = document.getElementById("contenu");
  	element.style.overflow="auto";
 
 if ( (me.src=="engine_reduire.png") || (me.src=="file:///C:/Documents%20and%20Settings/Avogadro/Bureau/reduit_agrandi/engine_reduire.png") )
    {
    	me.src="engine_agrandir.png";
    	element.style.height="50px";
	}
    else
    {
    	me.src="engine_reduire.png";
    	element.style.height="312px";
    }
}
//-->
</script>
</head>
<body>
<div id="fenetre">
	<div id="logo">
		<img src="engine_reduire.png" style="margin: 2px; cursor: pointer;" alt="png" onclick="change_status(this)" height="14" width="14"/>
	</div>
	<div id="titre">
		<b>Maximiz Minimiz by Avogadro</b>
	</div>
	<div id="contenu">
		blabla<br />
		blabla<br />
		blabla<br />
		blabla<br />
		blabla<br />
		blabla<br />
		blabla<br />
		blabla<br />
		blabla<br />
		blabla<br />
		blabla<br />
		blabla<br />
		blabla<br />
		blabla<br />
		blabla<br />
		blabla<br />
		blabla<br />
		blabla<br />
	</div>
</div>
</body>
</html>

Code:

1
2
 
if ( (me.src=="engine_reduire.png") || (me.src=="file:///C:/Documents%20and%20Settings/Avogadro/Bureau/reduit_agrandi/engine_reduire.png") )

ton test n'est pas terrible...

02/01/2007, 23h51
avogadro

merci pour le script, oui je sais le test est pas terrible mais pour la propriété src il ne récupère pas toujours juste le nom de l'image c'est pour ca que j'ai du mettre un " || " un peu lourd :s

remplace ton test par une expression régulière.
Tes images ont pour nom :
engine_agrandir.png ou engine_reduire.png. Donc regarde si le chemin contient le terme _reduire.png ou _agrandir.png (par exemple). Dans le code suivant je teste _reduire.png. Tu n'as ainsi plus à passer en revue le chemin complet de l'image.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 function change_status(me) { var element = document.getElementById("contenu"); element.style.overflow="auto"; var exp = new RegExp("_reduire.png","gi"); if (exp.test(me.src)) { me.src="engine_agrandir.png"; element.style.height="50px"; } else { me.src="engine_reduire.png"; element.style.height="312px"; } }

c'est vrai oui, j'avais pensais a un booléen mais c'était un peu lourd, pour l'instant j'en suis la :

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
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
125
126
127
128
129
130
131
132
133
<html>
<head>
<style type="text/css">
body{
font-family: Verdana, Arial, Helvetica, sans-serif;
}
 
div#fenetre, div#fenetre2{
width:100%;
height:auto;
border:1px solid #999999;
background-color:#EEEEEE;
border-collapse:collapse;
font-size: 12px;
font-weight: bold;
font-variant: normal;
font-style: normal;
}
 
div#titre, div#titre2{
border-top:1px solid #999999;
border-bottom:1px solid #999999;
}
 
div#logo, div#logo2{
height:25px;
}
 
div#titre, div#titre2{
height:auto;
background-color:#003399;
color: #FFFFFF;
padding-top:4px;
padding-bottom:4px;
}
 
div#contenu, div#contenu2{
font-weight: normal;
}
</style>
 
<script type="text/javascript">
<!--
function change_status(me,page)
{
if ( page == "page1" )
	{
		var element = document.getElementById("contenu");
		element.style.overflow="hidden";
  	}
  	else if ( page == "page2" )
  	{
		var element = document.getElementById("contenu2");
		element.style.overflow="hidden";
}
 
var exp = new RegExp("_reduire.png","gi");
 
 if (exp.test(me.src))
    {
    	me.src="engine_agrandir.png";     	
    	/*for(i=310; i<=50; i--){
    	element.style.height=i+"px";
    	}*/
    	element.style.height="40px";
    	element.style.visibility='hidden';
	}
    else
    {
    	me.src="engine_reduire.png";
    	/*for(i=50; i<=310; i++){
    	element.style.height=i+"px";
    	}*/
    	element.style.height="auto";
    	element.style.visibility='visible';
    }
}
//-->
</script>
</head>
<body>
<div id="fenetre">
	<div id="logo">
		<img src="engine_reduire.png" style="margin: 2px; cursor: pointer;" alt="png" onclick="change_status(this,'page1')" height="14" width="14"/>
	</div>
	<div id="titre">
		<b>Ajouter un utilisateur</b>
	</div>
	<div id="contenu">
		blabla<br />
		blabla<br />
		blabla<br />
		blabla<br />
		blabla<br />
		blabla<br />
		blabla<br />
		blabla<br />
		blabla<br />
		blabla<br />
		blabla<br />
		blabla<br />
		blabla<br />
		blabla<br /><br />
	</div>
</div>
<br />
 
<div id="fenetre2">
	<div id="logo2">
		<img src="engine_reduire.png" style="margin: 2px; cursor: pointer;" alt="png" onclick="change_status(this,'page2')" height="14" width="14"/>
	</div>
	<div id="titre2">
		<b>Ajouteur un documents</b>
	</div>	
	<div id="contenu2">
		blibli<br />
		blibli<br />
		blibli<br />
		blibli<br />
		blibli<br />
		blibli<br />
		blibli<br />
		blibli<br />
		blibli<br />
		blibli<br />
		blibli<br />
		blibli<br />
		blibli<br />
		blibli<br /><br />
	</div>
</div>	
</body>
</html>

c'est juste pas progressif encore... je reflechie, boucle for, settimeout, hmmm...

avec setInterval :

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
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
125
126
127
128
 
<html>
<head>
<style type="text/css">
body{
background-color:#EEEEEE;
font-family:"Lucida Console";
}
 
div#fenetre{
width:100%;
height:auto;
border:1px solid #CCCCCC;
background-color:#FFFFFF;
border-collapse:collapse;
}
 
div#titre{
border-top:1px solid #CCCCCC;
border-bottom:1px solid #CCCCCC;
}
 
div#logo{
height:32px;
}
 
div#titre{
height:35px;
background-color:#F5F5FF;
}
</style>
 
<script type="text/javascript">
<!--
var chrono=null, h, fin, sens;
var objet=null;
var vitesse = 20, pas = 5;
 
function modifHauteur()
{
 h = h+pas*sens;
 objet.style.height = h+"px";
 
 if (sens*h>=sens*fin)
 {
  clearInterval(chrono);
  chrono = null;
 }
 
}
 
function change_status(me)
{
   var element = document.getElementById("contenu");
   element.style.overflow="auto";
 
   var exp = new RegExp("_reduire","gi");
 
    if (exp.test(me.src))
    {
    	me.src="engine_agrandir.png";
    	//element.style.height="50px";
 
    	if (chrono!=null)    //pour stopper une reduction/un agrandissement en cours
    	{
          clearInterval(chrono);
          chrono = null;
    	}
 
    	h = parseInt(element.offsetHeight); //hauteur de l'element
    	fin = 50;     //hauteur finale de l'element (ecrire un entier !)
    	objet = element;
    	sens = -1;                   //agrandissement(1) ou reduction (-1)
        chrono = setInterval("modifHauteur()",vitesse);
	}
    else
    {
    	me.src="engine_reduire.png";
    	//element.style.height="312px";
 
    	if (chrono!=null)//pour stopper une reduction/un agrandissement en cours
    	{
          clearInterval(chrono);
          chrono = null;
    	}
 
    	h = parseInt(element.offsetHeight);
    	fin = 312;                //hauteur finale de l'element (ecrire un entier !)
    	objet = element;
    	sens = 1;
        chrono = setInterval("modifHauteur()",vitesse);
 
    }
}
//-->
</script>
</head>
<body>
<div id="fenetre">
	<div id="logo">
		<img src="engine_reduire.png" style="margin: 2px; cursor: pointer;" alt="png" onclick="change_status(this)" height="14" width="14"/>
	</div>
	<div id="titre">
		<b>Maximiz Minimiz by Avogadro</b>
	</div>
	<div id="contenu">
		blabla<br />
		blabla<br />
		blabla<br />
		blabla<br />
		blabla<br />
		blabla<br />
		blabla<br />
		blabla<br />
		blabla<br />
		blabla<br />
		blabla<br />
		blabla<br />
		blabla<br />
		blabla<br />
		blabla<br />
		blabla<br />
		blabla<br />
		blabla<br />
	</div>
</div>
</body>
</html>

A toi de trouver le compromis entre vitesse (ici 20ms) et pas (5 px dans ce cas). Attention, tu peux avoir un bug si le pas n'est pas un multiple de la différence entre taille finale et taille initiale, d'où cette comparaison (pas d'égalité) :

Code:

1
2
 
 if (sens*h>=sens*fin)

J'ai également un doute sur ce point :

Code:

h = parseInt(element.offsetHeight); //hauteur de l'element

Les navigateurs ont chacun leur méthode pour connaître la hauteur d'un élément. J'ai donc un doute sur le compatibilité d'offsetHeight. La valeur retournée est néanmoins correcte avec IE et Firefox.

03/01/2007, 17h53
avogadro

excellent, merci ^^