Forum d'entraide PHPFrance

Venez poser vos questions PHP, MySQL, HTML5, CSS, Javascript, Gestion de serveurs à la communauté PHPfrance
https://forum.phpfrance.com/

Agrandissement progressif d'un div

https://forum.phpfrance.com/viewtopic.php?f=7&t=252135

Page 1 sur 2

Agrandissement progressif d'un div

Posté : 16 mars 2010, 20:03
par Stef
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>

Re: Agrandissement progressif d'un div

Posté : 16 mars 2010, 20:46
par Calimero
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 :)

Re: Agrandissement progressif d'un div

Posté : 16 mars 2010, 20:58
par Stef
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>

Re: Agrandissement progressif d'un div

Posté : 16 mars 2010, 21:00
par Stef
Ayé je viens de voir: j'ai mis des virgules au lieu de ;

Je corrige...

Re: Agrandissement progressif d'un div

Posté : 16 mars 2010, 21:05
par Calimero
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).

Re: Agrandissement progressif d'un div

Posté : 16 mars 2010, 21:09
par Stef
Ok, entendu pour le href! ;)
Pour la coloration oui j'avais remarqué...

Je retourne sur le code...

Re: Agrandissement progressif d'un div

Posté : 16 mars 2010, 22:10
par Stef
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?

Re: Agrandissement progressif d'un div

Posté : 16 mars 2010, 23:17
par Calimero
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 ? :)

Re: Agrandissement progressif d'un div

Posté : 16 mars 2010, 23:40
par Stef
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>

Re: Agrandissement progressif d'un div

Posté : 17 mars 2010, 00:41
par Calimero
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 :)

Re: Agrandissement progressif d'un div

Posté : 17 mars 2010, 01:13
par Stef
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.

Re: Agrandissement progressif d'un div

Posté : 17 mars 2010, 01:52
par Calimero
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... :oops:

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 :lol: ).

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

Re: Agrandissement progressif d'un div

Posté : 17 mars 2010, 08:15
par Stef
Là je vois pas trop le rapport avec la choucroute... :oops:
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 :lol: ).
Ou le transfo EDF qui alimente le serveur! :mrgreen:

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?)

Re: Agrandissement progressif d'un div

Posté : 17 mars 2010, 23:49
par AB
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);
		}	
}

Re: Agrandissement progressif d'un div

Posté : 18 mars 2010, 00:24
par Stef
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;
}
Heures au format UTC+02:00
Page 1 sur 2
Powered by phpBB® Forum Software © phpBB Limited
https://www.phpbb.com/