Cadre avec animation lorsqu'il se rempli

**Calvein** · 15/01/2009, 10h01

Mon titre n'est pas très explicite mais j'aurai aimé trouver un script de ce genre.

J'ai mon petit cadre, un <div> en gros, de ce style :

Code :

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

1
2
3
 ___
|   |
|___|

Et lorsque je le rempli en javascript, il se déforme pour prendre une autre taille, comme ceci :

Code :

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

1
2
3
4
5
6
7
8
 
 ________
|       |
| Image |
|       |
| Texte |
|       |
|_______|

Merci

**le_chomeur** · 15/01/2009, 11h39

le problème est qu'il te faut une taille fixe au moins en largeur car le texte s'adapte a son conteneur

**Calvein** · 15/01/2009, 12h00

Oui oui je sais, j'ai pas été assez explicite en fait.

J'aurai aimé que le div s'agrandisse mais avec un effet, par exemple, il s'adapte en largeur, puis en longueur et enfin affiche le contenu

**le_chomeur** · 15/01/2009, 12h05

lol si j'ai bien compris

Mais il faut connaitre la largeur du texte ... la hauteur peut se gèrer mais pas la largeur ...

pour l'effet c'est faisable sinon ...

**marcha** · 15/01/2009, 12h27

Salut,

Ce que tu peux essayer c'est de remplir un div caché avec ton nouveau contenu,
puis tu en mesure la largeur et la hauteur. (clientWidth et clientHeight)

ensuite tu contraints les deux dimensions de ton div (où tu veux injecter le nouveau contenu) avec sa taille actuelle puis avec un setInterval tu modifies
ses dimensions pour atteindre celles de la nouvelle taille.

Tu peux décider d'afficher le nouveau contenu que lorsque le div a la bonne
taille. Si tu le fais avant il n'y aura probablement pas la place et tes textes
passeront à la ligne et se réorganiseront en cours d'animation, cela risque de
produire un effet visuel par terrible. Le contenu débordera de ton div si il n'a
pas la place.

Tu peux envisager d'imbriquer deux div, celui de l'extérieur serait en overflow
hidden et celui de l'intérieur aurait les dimensions finales, ainsi pendant l'anim
du div extérieur, le div intérieur (si il a déjà les dimensions finale) sera simplement
"clippé" et ça devrait donner un meilleur effet.

**le_chomeur** · 15/01/2009, 13h08

+1 avec marcha , a une exception faite , si je ne dis pas de bétise , lorsqu'un élément est en style.display.none, on ne peut récupérer sa taille/hauteur :-/

**Bovino** · 15/01/2009, 13h32

lorsqu'un élément est en style.display.none, on ne peut récupérer sa taille/hauteur

Tout à fait, il faut passer par visibility: hidden.
De même,

Ce que tu peux essayer c'est de remplir un div caché avec ton nouveau contenu,
puis tu en mesure la largeur et la hauteur. (clientWidth et clientHeight)

c'est plutôt offsetHeight / offsetWidth non ?

**Kerod** · 15/01/2009, 13h46

Exemple avec la première méthode citée et à adapter :

Code html :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
  <title></title>
  <script language="JavaScript" src="jquery-1.3.min.js" type="text/javascript"></script>
  <script language="JavaScript" type="text/javascript">
  /*<![CDATA[*/
    $(document).ready(function()
    {
        $("input").click(function() {
            $("#boite").html($("#texte").html());
            $("#boite").animate({
                                  width: $("#texte").width(),
                                  height: $("#texte").height()
                                }, 1500 );
        });
    });
  /*]]>*/
  </script>
</head>
 
<body>
    <div id="boite" style="width:100px; height: 100px; overflow:hidden">Petit test</div>
    <div id="texte" style="visibility:hidden;display:none">
        Iamque lituis cladium concrepantibus internarum non celate ut antea turbidum saeviebat ingenium a veri consideratione detortum et nullo inpositorum vel conpositorum fidem sollemniter inquirente nec discernente a societate noxiorum insontes velut exturbatum e iudiciis fas omne discessit, et causarum legitima silente defensione carnifex rapinarum sequester et obductio capitum et bonorum ubique multatio versabatur per orientales provincias, quas recensere puto nunc oportunum absque Mesopotamia digesta, cum bella Parthica dicerentur, et Aegypto, quam necessario aliud reieci ad tempus.
    </div>
    <input type="button" value="Mettre à jour" />
</body>
 
</html>

**marcha** · 15/01/2009, 14h21

+1 pour visibilty hidden

J'ajouterai qu'il faudrait mettre cet élément temporaire en position absolute
pour pas qu'il perturbe le flux du document suivant où on le place dans le DOM

Envoyé par Bovino

c'est plutôt offsetHeight / offsetWidth non ?

offsetHeight va comprendre l'épaisseur de la bordure, alors que clientHeight non.
Tout deux incluent le padding. (je crois aussi que les scrollbars influent différement entre ces deux fonctions)

Je pense que cela n'a pas grande importance pour faire la mesure des dimensions dans ce cas, mais il faut faire attention à ce que cet élément
temporaire ne soit pas "stylé"

J'ai été surpris en cherchant un peu, que clientHeight etc... ne sont pas des
recommandations du w3c et ont été initialement implémentés dans IE.

Puisqu'on parle de JQuery ici, autant regarder le plugin Dimension

**Bovino** · 15/01/2009, 14h36

Ce que tu peux essayer c'est de remplir un div caché avec ton nouveau contenu,
puis tu en mesure la largeur et la hauteur. (clientWidth et clientHeight)

ce sont les dimensions de la div que tu veux, pas celles de la fenêtre ?

**marcha** · 15/01/2009, 14h43

Ce sera peut-être plus clair avec un exemple:

Code :

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

1
2
3
4
5
6
7
8
9
 
$(document).ready(function() {
	var temp = $('<div></div>')
	.css({ visibility: 'hidden', position: 'absolute' })
	.html("Le contenu futur<br />de taille<br />inconue")
	.appendTo(document.body);
 
	alert(temp[0].clientWidth + ' ' + temp[0].clientHeight);
});

**marcha** · 15/01/2009, 15h01

Voici mon idée intégrée au code fourni par Kerod

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type='text/javascript' src='/libs/jquery-1.2.6.js'></script>
<script type='text/javascript'>
$(document).ready(function()
{
	$("input").click(function() {
 
		// à remplacer par une requête AJAX
		var nouveau_contenu = "Iamque lituis cladium concrepantibus internarum <br />non celate ut antea turbidum saeviebat <br />ingenium a veri consideratione <br />";
 
		// Mesure du contenu
		var temp = $('<div></div>')
		.css({ visibility: 'hidden', position: 'absolute' })
		.html(nouveau_contenu)
		.appendTo(document.body);
		var new_width = temp[0].clientWidth;
		var new_height = temp[0].clientHeight;
		temp.remove();
 
		// boite interne de taille finale
		var interne = $('<div></div>').css({ width: new_width + 'px', height: new_height + 'px' }).html(nouveau_contenu);
 
		// animation de la boite externe
		$("#boite").empty().append(interne).animate({
		  width: new_width,
		  height: new_height
		}, 1500 );
	});
});
</script>
</head>
<body>
<input type="button" value="Mettre à jour" />
<div id="boite" style="width:100px; height: 100px; border: 1px solid black; overflow:hidden">Petit test</div>
</body> 
</html>

**le_chomeur** · 15/01/2009, 15h14

j'en reviens au fait qu'il serait préférable de fixer les dimensions de la boite dès le départ , quitte a adapter en fonction de la taille de l'écran et passer en overflow vertical ....

moi ce que j'en dis ^^

**Calvein** · 16/01/2009, 11h55

En fait l'animation ne doit se faire qu'en vertical, je test vos propositions dès demain, merci à vous

**Kerod** · 16/01/2009, 12h12

Ben tu retires le paramètres width est c'est bon

Cadre avec animation lorsqu'il se rempli

jQuery

Discussions similaires

Partager

Partager