Ouverture/fermeture progressive d'un div (par agrandissement)

**Gliss'** · 15/05/2007, 00h25

Bonjour à tous,

Je suis débutant total en JS donc excusez moi si je suis à coté de la plaque, mais je cherche une fonction qui parait toute conne mais que je n'arrive pas à trouver/écrire
Je cherche à faire un classique on/off sur un div, mais en le faisant progressivement, avec le cadre qui s agrandit, se referme.

J'ai presque réussi à l'écrire, mais
1 - elle ne fonctionne pas au premier clic, mais au 2 ou 3ème
2 - elle n'est pas aussi générique que je le souhaiterai
3 - elle ne fonctionne que sous Firefox

Je suis donc à la recherche d'une fonction/tuto pouvant faire de manière propre et sans danger ceci : http://www.acadis.org/lab/div.html

Savez vous où je peux trouver ça ?
Merci d'avance pour vos lumières

**eric.pommereau** · 15/05/2007, 07h41

Bonjour,

Tu peux jeter un coup d'oeil vers les librairies javascript comme scriptaculo.us, yahoo UI... et certainement bien d'autres encore.

Si la prise en main n'est pas forcément évidente cela t'évitera de réinventer la roue et, la plupart du temps, de t'affranchir des problèmes de compatibilité.

@+

**SpaceFrog** · 15/05/2007, 09h24

Tu peux aussi downloader tout le net si tu veux ...

pourquoi s'encombrer d'une usine à gaz quand il suffit de modifier un tout petit peu ton 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
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
 
<script type='text/javascript'>
 
var y = 1;
var step = 5;
var down = true;
var minstep=step;
 
 
function smooth_on_off(p_id, hmax){
 
  obj=document.getElementById(p_id);
 
  if(y>hmax&&down){step=-step;
                down=false;
                return false;}
  if(y<minstep&&!down){step=-step;
                down=true;
                y=1;
                return false;}
 
  y = y+step;
 
  obj.style.height = y + 'px';
 
  t=setTimeout(function(){smooth_on_off(obj.id, hmax)},10);
}
</script>
<style type='text/css'>
div.main{
  width: 700px;
 
  background: #CCEEDD;
  font-weight: bold;
}
 
div.title{
  width: 700px;
  height: 30px;
  background: #CCEEDD;
  font-weight: bold;
  cursor: pointer;
}
 
div.content{
  width: 700px;
  height: 1px;
  background: #FFEEFF;
  display: block;
  overflow: hidden;
  font-weight: normal;
}
</style>
</head>
 
<body onload="document.getElementById('command').focus()">
 
<div class="main">
 
  <div class="title" onclick="smooth_on_off('flop', 200);" id='command'>
	Un petit texte
  </div>
 
  <div id="flop" class="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla placerat. Maecenas cursus, enim at laoreet laoreet, lacus quam placerat quam, nec blandit urna arcu quis turpis. Nunc sit amet orci. Aliquam id mi. Maecenas massa leo, interdum faucibus, aliquam nec, lacinia et, diam. Phasellus mollis fermentum enim. Aenean ut enim et est vulputate bibendum. Integer tellus nisi, nonummy et, feugiat at, molestie non, leo. Praesent eu sem. Quisque tincidunt tellus quis libero. Maecenas justo. Nulla gravida, turpis eget facilisis tempor, ipsum metus sollicitudin urna, eget elementum eros diam ut dui. Sed luctus diam quis velit. Vestibulum fringilla lacus sed nisl. Pellentesque hendrerit placerat nisl. Cras vitae risus. Duis pulvinar, orci nec ultricies laoreet, magna est dictum nunc, quis pulvinar est leo quis ipsum. Ut mauris mauris, bibendum eu, consequat et, luctus non, massa. Phasellus felis. Quisque felis.
 
Suspendisse orci nisi, rutrum eu, vestibulum non, aliquet a, est. Vivamus elit. Vestibulum ultricies urna in odio. Duis laoreet. Proin porttitor purus et dolor. Suspendisse sed tellus quis nulla pulvinar vehicula. Praesent tincidunt nisi ut augue. Aliquam semper risus id risus. Pellentesque elementum feugiat nisl. In hac habitasse platea dictumst. Vivamus mattis. Donec sodales orci. Donec ut velit. Phasellus aliquet, felis non ultricies accumsan, lacus eros iaculis dui, ac fringilla sem dolor vitae nisi. Ut eu arcu. Proin tellus.
 
  </div>
 
</div>
 
 
 
</body>

**SpaceFrog** · 15/05/2007, 10h28

Et pour remédier aux problèmes des clics multiple entrainant un phénomène de yoyo

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
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
 
<script type='text/javascript'>
 
var y = 1;
var step = 5;
var down = true;
var minstep=step;
var running=false;
var t
 
 
function smooth_on_off(p_id, hmax){
  running=true;
  obj=document.getElementById(p_id);
 
  if(y>hmax&&down){step=-step;
                down=false;
                running=false;
                clearInterval(t);
                return false;}
  if(y<minstep&&!down){step=-step;
                down=true;
                running=false;
                y=1;
                clearInterval(t);
                return false;}
 
  y = y+step;
 
  obj.style.height = y + 'px';
}
 
function deroule(p_id,hmax){
if (running) {return false;}
t=setInterval(function(){smooth_on_off(p_id,hmax)},1)
 
}
</script>
<style type='text/css'>
div.main{
  width: 700px;
 
  background: #CCEEDD;
  font-weight: bold;
}
 
div.title{
  width: 700px;
  height: 30px;
  background: #CCEEDD;
  font-weight: bold;
  cursor: pointer;
}
 
div.content{
  width: 700px;
  height: 1px;
  background: #FFEEFF;
  display: block;
  overflow: hidden;
  font-weight: normal;
}
</style>
</head>
 
<body onload="document.getElementById('command').focus()">
 
<div class="main">
 
  <div class="title" onclick="deroule('flop', 200);" id='command'>
	Un petit texte
  </div>
 
  <div id="flop" class="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla placerat. Maecenas cursus, enim at laoreet laoreet, lacus quam placerat quam, nec blandit urna arcu quis turpis. Nunc sit amet orci. Aliquam id mi. Maecenas massa leo, interdum faucibus, aliquam nec, lacinia et, diam. Phasellus mollis fermentum enim. Aenean ut enim et est vulputate bibendum. Integer tellus nisi, nonummy et, feugiat at, molestie non, leo. Praesent eu sem. Quisque tincidunt tellus quis libero. Maecenas justo. Nulla gravida, turpis eget facilisis tempor, ipsum metus sollicitudin urna, eget elementum eros diam ut dui. Sed luctus diam quis velit. Vestibulum fringilla lacus sed nisl. Pellentesque hendrerit placerat nisl. Cras vitae risus. Duis pulvinar, orci nec ultricies laoreet, magna est dictum nunc, quis pulvinar est leo quis ipsum. Ut mauris mauris, bibendum eu, consequat et, luctus non, massa. Phasellus felis. Quisque felis.
 
Suspendisse orci nisi, rutrum eu, vestibulum non, aliquet a, est. Vivamus elit. Vestibulum ultricies urna in odio. Duis laoreet. Proin porttitor purus et dolor. Suspendisse sed tellus quis nulla pulvinar vehicula. Praesent tincidunt nisi ut augue. Aliquam semper risus id risus. Pellentesque elementum feugiat nisl. In hac habitasse platea dictumst. Vivamus mattis. Donec sodales orci. Donec ut velit. Phasellus aliquet, felis non ultricies accumsan, lacus eros iaculis dui, ac fringilla sem dolor vitae nisi. Ut eu arcu. Proin tellus.
 
  </div>
 
</div>
 
 
 
</body>

**Gliss'** · 15/05/2007, 11h42

Merci beaucoup ça marche vraiment bien

le problème d'une lib telle que Scriptaculous c'est que je risque de faire appel a un monstre pour pas grand chose, de plus je travaille sur un site déjà très complexe (pas loin de faire le café) avec sa propre API et tout, donc je veux éviter d'inclure trop de lib externes

En tout cas là c'est léger et ca marche même sous IE

**tekyo11** · 31/05/2007, 10h11

Bonjour, suite à la lecture de ce post, j'ai voulu intégrer le code de SpaceFrog

Le code fonctionne bien, je l'ai intégré sur un formulaire, mais lorsque je valide celui-ci, la page ne se charge plus complettement.

Quelqu'un auait une idée?

Merci de votre aide

**SpaceFrog** · 31/05/2007, 10h35

sans voir ton code ça parait difficile de se faire une idée ...

**tekyo11** · 31/05/2007, 11h23

la page en question
Le script s'arrête dès la fonction "while" à la ligne 265

Le lien vers le script en fonction
Lezartkayks

le probleme est le mm sur IE et firefox (les autres je ne l'ai ai pas essayé)

Je me demandais si des fonctions JS pouvais se contredir?

**SpaceFrog** · 31/05/2007, 11h50

à première vue je ne vois pas en quoi la boucle while pourrait empêcher la focntion javascript de fonctionnner
surtout que la boucle while en question est en php et est interprété coté serveur ...

**Benzz** · 18/06/2008, 17h31

Bonjour à tous,

Je remonte cette discussion car je trouve ce script très sympa. C'est presque ce qu'il me faut, j'aurais simplement voulu savoir comment faire pour que le div s'ajuste automatiquement à la taille de son contenu (c'est pour un contenu dynamique).

Merci d'avance.

Edit : Désolé, je n'avais pas remarqué que cette discussion était résolue. Je viens d'en créer une nouvelle

**tusssss** · 19/06/2008, 09h05

C'est bizarre que ce bout de code ne soit pas dans les contributions, il pourrait aider beaucoup de gens qui veulent faire ça.

Ouverture/fermeture progressive d'un div (par agrandissement)

JavaScript

Discussions similaires

Partager

Partager