Discussion :

[Lionel_aw]

Bonjour,


je n'arrive pas à trouver une réponse à cette question:

j'ai un ou plusieurs Div conteant du texte, leur hauteur est inconnue à l'avance.
de façon arbitraire, je donne une hauteur à ce div ( height:100px avec overflow:hidden par exemple). A la suite du paragraphe je mets un paragraphe sur lequel j'écoute l'événement click.
je voudrais que quand on clique sur ce paragraphe le div avant lui s'anime pour prendre sa taille maximum. je n'y arrive pas , la seule chose que je peux faire c'est de lui faire prendre la valeur ( height:auto) et il s'ouvre d'un coup, sans animation.
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
$('.expand-1').click(function()  {
 
			var $prevDiv = $(this).prev('div');
 
			var hauteurDiv = $prevDiv.css("height");
 
			var maValeur = "162px";
 
 
 
			if (hauteurDiv > maValeur ) {  // déjà ouvert
 
			  $(this).text("lire la suite ...");
 
			  $prevDiv.css("height", maValeur);     //  on réduit
 
			}  else if (hauteurDiv == maValeur) {  //  état initial ou état fermé
 
			  $(this).text("replier ...");
 
			  $prevDiv.css("height","auto");         //  on ouvre le div au maximum
 
			}
 
		});

j'ai l'impression qu'on ne peut pas animer height avec la valeur auto et qu'il faut donner une valeur chiffrée.

Quelqu'un connaît-il une ruse pour contourner cela?

Merci

[danielhagnoul]

Bonsoir

Pour obtenir height (idem pour width), voir : http://api.jquery.com/innerHeight/ et http://api.jquery.com/outerHeight/

[Lionel_aw]

merci daniel mais ça m'aide pas, innerHeight() retourne la même chose que height(), la hauteur du div (fixée par css) lors du 1er click.

je force au préalable la hauteur des divs qui ont reçu la classe expand-1 mais leurs contenus est variable et c'est donc la hauteur que doit prendre le div pour afficher ce contenu que je cherche à connaître, afin de la passer à une fonction anim() de jQuery, puisqu'on ne peut passer qu'un chiffre à anim().

et ça j'arrive pas à faire..

[danielhagnoul]

Bonsoir

manifestement je ne comprends pas bien votre problème de height.

Mais si vous souhaitez uniquement une animation au clic pourquoi ne pas utiliser http://api.jquery.com/slideToggle/ ?

[Lionel_aw]

j'ai trouvé une solution toute pourrie.....

ce code remplace la ligne 21 du 1er exemple

je donne au div sa hauteur maximale (ligne1)
je stocke cette hauteur dans animVal (ligne 2)
je remet le div à sa valeur basse (ligne 3) .. le navigateur n'a rien eu le temps de faire
et enfin j'anime l'ouverture du div vers la valeur max (ligne 4)

Code :

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

1
2
3
4
		  $prevDiv.css("height","auto");
			  var animVal = $prevDiv.css("height");
			  $prevDiv.css("height", maValeur);
			  $prevDiv.animate( { height : animVal });

je rappelle ce que je veux faire:

animer vers sa hauteur max (inconnue) un div qui a déjà une hauteur arbitraire globale fixée par le css au d"épart