Agrandissement progressif d'un div

16 mars 2010, 20:03

Helloho : )

J'essaie d'écrire une p'tite fonctiounette qui me permet de faire un effet d'apparition progressive... J'en suis arrivé là (voir code ci-dessous), mais fa marfe pas... Qu'est-ce qui ne va pas dans ce code? Merci!!

<!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="fr">
<head>
	<title>Test... :S</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<script type="text/javascript">
	var z = 0;

	function progressif(zdiv) {

		var mydiv = document.getElementById(zdiv);

		for(z, z < 300, z++) {

			mydiv.style.width = z + 'px';
			mydiv.style.height = z + 'px';

		}

	}

	setInterval(progressif, 100);
	</script>
</head>
<body>
	<a href="javascript:void(0)" onclick="progressif('lediv')">Ouvrir</a>
	<div id="lediv" style="display: block; overflow: hidden; width: 0px; height: 0px;">
		<p>Contenu div contenu div contenu div</p>
		<p>Contenu div contenu div contenu div</p>
		<p>Contenu div contenu div contenu div</p>
	</div>
</body>
</html>

16 mars 2010, 20:46

Salut Stef,

La première chose qui ne va pas dans ce code est le comportement du codeur qui n'a pas regardé sa console d'erreur javascript (mais c'est peut-être la faute de ton navigateur : ils ne sont pas tous aussi bavards pour les erreurs JS - je te recommande plutôt firefox pour ce job, et ça se passe dans le menu outils/console d'erreurs).

Si tu corriges ce premier problème tu vas pouvoir avancer d'une étape

16 mars 2010, 20:58

Bien vu Calimero, j'y pense jamais à c'tte console...

Merci de m'y faire penser!

Sinon:

missing ; after for-loop initializer

progressif is not defined

Je ne vois pas où je dois placer ce ; ...?

Et pourquoi ça m'dit que progressif est defined?

Entre j'avais corrigé le code comme suit (les messages de la console correspondent à cette version):

<!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="fr">
<head>
	<title>Test... :S</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<script type="text/javascript">
	var z = 0;

	function progressif() {

		var mydiv = document.getElementById('lediv');

		for(z, z < 300, z++) {

			mydiv.style.width = z + 'px';
			mydiv.style.height = z + 'px';

		}
		
		setInterval("progressif()", 1000);

	}

	
	</script>
</head>
<body>
	<a href="javascript:void(0)" onclick="progressif()">Ouvrir</a>
	<div id="lediv" style="display: block; overflow: hidden; width: 0px; height: 0px;">
		<p>Contenu div contenu div contenu divContenu div contenu div contenu divContenu div contenu div contenu div</p>
	</div>
</body>
</html>

16 mars 2010, 21:00

Ayé je viens de voir: j'ai mis des virgules au lieu de ;

Je corrige...

16 mars 2010, 21:05

Yep

bien vu.

Et tu peux aussi remarquer que le colorisateur syntaxique du forum te signalait également le problème.

Après, ça n'empêche peut-être pas ton script de fonctionner tel quel mais je te conseille (pour raisons d'accessibilité) de ne jamais-jamais-jamais mettre de javascript dans l'attribut href d'une balise <a> (si tu as besoin d'y mettre une valeur bidon, un # fait l'affaire).

16 mars 2010, 21:09

Ok, entendu pour le href!

Pour la coloration oui j'avais remarqué...

Je retourne sur le code...

16 mars 2010, 22:10

Bon, j'ai corriger le code comme ça mais je ne sais pas comment arrêter le setInterval... J'ai l'impression qu'il continue à s'exécuter!

        <script type="text/javascript">
	var z = 0;

	function progressif() {
		
		var mydiv = document.getElementById('lediv');
		var rep = setInterval('progressif()', 50);
		z++;
		
		if (mydiv.style.width == '300px') {
			
			clearInterval(rep);

		}
		else {
			
			mydiv.style.width = z + 'px';
			mydiv.style.height = z + 'px';
			
		}

	}	
        </script>

Est-ce que c'est comme ça que s'utilise clearInterval?

16 mars 2010, 23:17

en fait setInterval() comme son nom ne l'indique pas du tout définit... un intervalle, c'est à dire une action à répéter.

Tu voulais peut-être utiliser setTimeout() non ?

16 mars 2010, 23:40

Impec!

J'ai pas compris la différence entre setInterval et setTimeout, mais ça marche très bien! : D

Merci beaucoup Calimero!! : D

Mon code à ce stade:

<!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="fr">
<head>
	<title>Test... :S</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<script type="text/javascript">
	var z = 0;

	function progressif() {
		
		var mydiv = document.getElementById('lediv');
		var rep = setTimeout('progressif()', 10);
		z += 10;
		
		if (mydiv.style.width == '300px') {
			
			clearTimeout(rep);

		}
		else {
			
			mydiv.style.width = z + 'px';
			mydiv.style.height = z + 'px';
			
		}

	}	
	</script>
</head>
<body>
	<a href="#gonoway" onclick="progressif()">Ouvrir</a>
	<div id="lediv" style="display: block; border: 1px solid black; overflow: hidden; width: 50px; height: 50px;">
		<p>Contenu div contenu div contenu divContenu div contenu div contenu divContenu div contenu div contenu div</p>
	</div>
</body>
</html>

17 mars 2010, 00:41

setInterval(fonction, N) lance ta fonction toutes les N millisecondes.
setTimeout(fonction, N) lance ta fonction dans N millisecondes et s'arrête après

17 mars 2010, 01:13

Oui j'ai compris en cherchant de l'info...

Par contre en faisant des recherches je me suis attardé un peu sur les structures de contrôles et je suis tombé sur une page qui parle d'une "boucle forever"! Je savais pas que ça existait... Ce qui est bizzare surtout c'est l'explication et les exemples donnés qui sont un peu confus:

http://www.wikituto.org/index.php/Contr ... Javascript

Je n'ai pas trouvé d'autres sites qui parlent de cette fameuse boucle forever.

17 mars 2010, 01:52

Par contre en faisant des recherches je me suis attardé un peu sur les structures de contrôles et je suis tombé sur une page qui parle d'une "boucle forever"! Je savais pas que ça existait... Ce qui est bizzare surtout c'est l'explication et les exemples donnés qui sont un peu confus:

http://www.wikituto.org/index.php/Contr ... Javascript

Je n'ai pas trouvé d'autres sites qui parlent de cette fameuse boucle forever.

Là je vois pas trop le rapport avec la choucroute...

Je ne savais pas que ça s'appelait "boucle forever" (jamais vu ce nom en tout cas), pour moi c'est une boucle infinie toute bête (il y a toujours une sortie à une boucle, même quand elle est infinie - au pire cette sortie est juste implicite et se résume à débrancher le cordon d'alimentation de l'ordinateur

).

Blague à part, ce genre de structure est intéressant, voire incontournable, dans certains contextes (prog. réseau, GUI évènementielle comme GTK...) et certains langages (C, asm...) mais en javascript je suis sceptique. Une boucle infinie c'est une structure à la fois lourde et bloquante, hors en javascript au contraire on va plutôt chercher la légèreté et l'effort minimum...

17 mars 2010, 08:15

Là je vois pas trop le rapport avec la choucroute...

Tu veux parler du rapport avec le sujet de ce fil?

au pire cette sortie est juste implicite et se résume à débrancher le cordon d'alimentation de l'ordinateur ).

Ou le transfo EDF qui alimente le serveur!

Blague à part, ce genre de structure est intéressant, voire incontournable, dans certains contextes (prog. réseau, GUI évènementielle comme GTK...) et certains langages (C, asm...) mais en javascript je suis sceptique. Une boucle infinie c'est une structure à la fois lourde et bloquante, hors en javascript au contraire on va plutôt chercher la légèreté et l'effort minimum...

Oui, en parlant de légereté: c'est pas seulement parce que j'ai envie d'apprendre javascript (que j'aime bien) que je me suis lancer dans l'écriture de cette fonctiounette mais aussi pour m'éviter d'utiliser jquery ou mootools juste pour un ch'ti effeft de fenêtre.

Encore merci Calim! (tu permet que je t'appelle comme ça?)

17 mars 2010, 23:49

Pour préciser un peu plus les conséquences de l'explication donnée par Calimero :

Ton pb venait du fait que quand tu faisais clearInterval(rep) tu n'effaçais que la dernière var rep = setInterval('progressif()', 50) définie juste avant... mais pas les autres setInterval précédemment lancés dans la boucle

Pour utiliser correctement setInterval dans ce contexte il faudrait ne le lancer qu'une fois, par exemple :

var z = 0;
var rep;

function progressif() 
{
	if(typeof rep == 'undefined') rep = setInterval('progressif()', 10);
	
	var mydiv = document.getElementById('lediv');
	 
	 if(mydiv.style.width == '300px') 
		{
			clearInterval(rep);
		}
		else
		{	 
			mydiv.style.width = z + 'px';
			mydiv.style.height = z + 'px';		 
			z += 10;
		}	 	
}

Enfin bon, on utilise généralement setTimeout qui est plus pratique dans une boucle,
d'ailleurs tu aurais pu ne pas utiiser clearTimeout en faisant simplement :

var z = 0;

function progressif() 
{
	
	var mydiv = document.getElementById('lediv');	 
	
	 if(mydiv.style.width != '300px') 
		{
			mydiv.style.width = z + 'px';
			mydiv.style.height = z + 'px';		 
			z += 10;
			setTimeout('progressif()', 10);
		}	
}

18 mars 2010, 00:24

Oui effectivement c'est encore plus simple! : )

J'en profite pour te poser une question au passage:

comment je peux modifier ce code pour fair en sorte que le div s'agrandisse jusqu'aux dimensions déterminées par le fichier CSS? Est-ce que c'est possible?

Exemple, dans un style.css j'aurais:

#lediv {
width: 300px;
height: 150px;
}

Agrandissement progressif d'un div

Qui est en ligne