réduction dynamique progressive d'un div

**avogadro** · 02/01/2007, 17h43

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 :

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
<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 :

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

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 :

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

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

Quelqu'un a une idée svp? reduit_agrandi.rar

**Auteur** · 02/01/2007, 19h41

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 :

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
 
<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 :

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

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...

**avogadro** · 02/01/2007, 23h51

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

**Auteur** · 03/01/2007, 02h10

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 :

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
 
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";
    }
}

**avogadro** · 03/01/2007, 02h56

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 :

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
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...

**Auteur** · 03/01/2007, 13h23

avec setInterval :

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
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 :

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

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

J'ai également un doute sur ce point :

Code :

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

    	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.

**avogadro** · 03/01/2007, 17h53

excellent, merci ^^

réduction dynamique progressive d'un div

JavaScript

Discussions similaires

Partager

Partager