Discussion :

[nico le noob]

bonjour/bonsoir,

j'ai trouvé un super script qui me permet d'afficher un texte de maniere progressive et de là j'ai créer la fonction pour déclencher le tout avec plusieurs boutons avec effet type onmousedown, onmouseup et onmouseclick.

bon le tout fonctionne très bien sauf qu'au moment du deuxieme clic evidement...il me cumule les textes

d'apres vous je dois utiliser quel moyen ? removechild ?

Ps: le texte est dans une <span> placé en CSS sur une image.

D'avance merci

[nico le noob]

salut,

mon code me permet d'afficher un texte de manière dynamique mais je n'arrive pas à l'effacer en début de fonction pour ne pas qu'ils se superposent bouton après bouton, un conseil peut être ?

HTML :

Code :

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

<p><img class="imageflottante" src="images/on.png" alt="Image flottante" onmouseup="this.src='images/on.png';" onmousedown="this.src='images/off.png';" onclick='test()';" /></p>

Et ensuite le Javascript:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function test()
		{
			var txt = 'alors une reponse peut etre ?',
				display = document.getElementById('display');
 
				for(var i = 0, l = txt.length; i < l; i++) {
					(function(i) {
						setTimeout(function() {
							display.innerHTML += txt.charAt(i);
						}, i * 10);
					}(i));
				}
		}

j'ai beau avoir essayé ce code là rien ne se passe:

Code :

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

1
2
3
4
function effacer() {
 var nombre_signew = document.getElementsByTagName("p")[0].firstChild.nodeValue.length;
 document.getElementsByTagName("p")[0].firstChild.deleteData(0,nombre_signes);
}

Je prend n'importe lequel de vos conseils merci

[vermine]

Bonjour,

Lorsque vous récupérez le span, vous pouvez directement le vider:

Code :

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

1
2
3
4
5
6
var txt = 'alors une reponse peut etre ?'; //Vous aviez mis une virgule
display = document.getElementById('display');
display.innerHTML = "";
				
for(var i = 0, l = txt.length; i < l; i++) {

[nico le noob]

ton code efface bien tout ce qui est marqué mais n'arrête pas la progression du texte ce qui a pour effet de cumuler tous les textes de tous les boutons si j'appuie dessus les uns après les autres rapidement.

si tu as la réponse se serait vraiment bien sinon un grand merci quand même pour ton aide

voilà un test mis en place pour mieux comprendre: http://nicoweb.dixkey.com/lol/

[vermine]

J'ai essayé de fermer le timer mais ça ne fonctionne pas. Par contre, j'ai vu ceci:

Code :

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

1
2
3
var txt = 'alors une reponse peut etre ?',
display = document.getElementById('display');

Donc avec l'erreur, ça fonctionne. Il faut un point-virgule et non une virgule. Par contre avec le point-virgule on se rend compte que vous avez choisit un mauvais nom de variable (que vous n'avez pas déclaré, d'ailleurs):

Code :

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

1
2
3
var txt = 'alors une reponse peut etre ?';
display = document.getElementById('display');

Ceci serait mieux:

Code :

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

1
2
3
var txt = 'alors une reponse peut etre ?';
var mon_span = document.getElementById('mon_span');

Mais ça ne règle pas le problème.

[vermine]

Ce qu'il y a en fait, c'est que vous lancez "i" fonctions au lieu de lancer "i" fois la fonction. J'ai donc voulu mettre le timer en variable globale et faire clearTimeout mais... ça n'a rien changé.

[nico le noob]

je sais qu'en As3 c'est bien plus simple il suffit de mettre un mini script d'une ligne qui dit 'stop' et l'action s'arrête automatiquement mais en JavaScript je ne m'y connais pas. Bref j'ai mis un lien pour mieux comprendre et avoir les sources au complet ici, je continu a chercher...

[vermine]

Je vous propose un setInterval qui lancera la fonction tout les x temps et qu'on peut stopper facilement:

Code js :

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
 
var i = 0;
var mon_span = document.getElementById('mon_span');
var mon_timer;
var txt = 'alors une reponse peut etre ?';
 
function test()
{
      i = 0;
      clearInterval(mon_timer);
      mon_span.innerHTML = "";
 
      mon_timer = setInterval(ma_fonction, 100);
 
}
 
function ma_fonction()
{
   if(i < txt.length)
   {
         mon_span.innerHTML += txt.charAt(i++);
   }
   else
   {
         i = 0;
         clearInterval(mon_timer);
   }
}

Avec le html suivant:

Code html :

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

1
2
3
4
 
<span id="mon_span"></span>
 
<p><img class="imageflottante" src="images/on.png" alt="Image flottante" onmouseup="this.src='images/on.png';" onmousedown="this.src='images/off.png';" onclick='test()';" /></p>

[nico le noob]

mais j'ai beau essayer je n'arrive pas a le faire fonctionner, je continu à essayer et si tu veux tu peux le telecharger le site ici, merci encore pour tes conseils

si tu devais ne pas le telecharger je comprendrai et quand meme un grand merci pour ton aide

[vermine]

Je n'ai malheureusement pas accès à cet hébergeur. Firewall...

[nico le noob]

bha c'est free ?? ftp gratuit ? http://dl.free.fr/

et l'adresse de telechargement est: http://dl.free.fr/vNVcllY4q

le tout securisé par nod32

pas grave au pire, merci quand meme pour ton coup de main

[nico le noob]

je viens de te les envoyer par MP si tu veux

[nico le noob]

pour le html:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
		<title>TEST</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" media="screen" type="text/css" title="css" href="css.css" />
		<script type="text/javascript" src="script.js"></script>
 
   </head>
   <body>
 
		<div class="fond">
 
			<p><img class="fond" src="images/fond.png" alt="fond" /></p>
			<p><img class="imageflottante" src="images/acheter_on.png" alt="Image flottante" onmouseup="this.src='images/acheter_on.png';" onmousedown="this.src='images/acheter_off.png';" onclick='test()';" /></p>
			<p><img class="imageflottante2" src="images/vendre_on.png" alt="Image flottante" onmouseup="this.src='images/vendre_on.png';" onmousedown="this.src='images/vendre_off.png';" onclick='test2()';" /></p>
			<p><img class="imageflottante3" src="images/contact_on.png" alt="Image flottante" onmouseup="this.src='images/contact_on.png';" onmousedown="this.src='images/contact_off.png';" onclick='test3()';" /></p>
			<p><span id="mon_span" class="texte"></span></p>
 
		</div>
 
 
   </body>
</html>

pour le javascript:

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
var i = 0;
var mon_span = document.getElementById('mon_span');
var mon_timer;
var txt = 'alors une reponse peut etre ?';
 
function test()
{
      i = 0;
      clearInterval(mon_timer);
      mon_span.innerHTML = "";
 
      mon_timer = setInterval(ma_fonction, 100);
 
}
 
function ma_fonction()
{
   if(i < txt.length)
   {
         mon_span.innerHTML += txt.charAt(i++);
   }
   else
   {
         i = 0;
         clearInterval(mon_timer);
   }
}

bin là vous avez tout mon petit site (avec tous les petits soucis )

et pour rappel le resultat est là: http://nicoweb.dixkey.com/lol/

[nico le noob]

c'est bon j'ai réussi !!!!!!!!!!!

apparement les variables etaient definis sans attendre que la page soit chargé un petit:

Code :

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

1
2
3
4
 
window.onload = function() {
    mon_span = document.getElementById('mon_span');
};

et hop dans la poche !!!
trop bien ))) merci encore pour ton aide