Partage

[Urgent] Points de suspension

1 2 >>

10 janvier 2009 à 13:51:10

Bonjour tout le monde.
Je suis nouveau et j'aimerais savoir comment faire pour afficher en javascript sur mon site web trois points de suspensions qui bougent comme ça :
Moment 1 : .
Moment 2 : ..
Moment 3 : ...
Moment 4 :
Merci beaucoup de votre aide.

Elias le Vert

10 janvier 2009 à 13:57:30

Je te mets un bout de script qui affiche "Chargement" puis trois points de suspension ensuite, je te laisserai le soin de l'adapter à tes besoins :

<div id="loader">Chargement des images</div>
<script language="javascript" content="text/javascript">
	loader();
</script>

function loader(text, points){
	points = (points ? points : 0);
	points = (points+1 > 3 ? 0 : points+1);
	
	if(!text){
		text = document.getElementById('loader').innerHTML;
	}
	
	var text_suspensions = text;
	for(i=0; i<points; i++){
		text_suspensions += '.';
	}
	
	document.getElementById('loader').innerHTML = text_suspensions;
	setTimeout('loader(\''+text+'\', '+points+')', 500);
}

Il est utilisé lors du chargement des images sur cette page : http://dev.twiip.ch/scripts/gallery/gallery.php

Xurno

10 janvier 2009 à 13:58:53

Mais en fait, je dois le mettre où ? Je suis débutant ...
Voici mon site web : http://xurno.olympe-network.com/dictons/mesdictons.html
J'aimerais mettre les trois points de suspension juste après "Veuillez patienter"
Merci encore !

Elias le Vert

10 janvier 2009 à 14:11:46

Met un id "loader" sur la balise <i> qui contient le "Suite à venir. Veuillez patienter", et rajoute après cette ligne le code suivant :

<script content="text/javascript">
function loader(text, points){
	points = (points ? points : 0);
	points = (points+1 > 3 ? 0 : points+1);
	
	if(!text){
		text = document.getElementById('loader').innerHTML;
	}
	
	var text_suspensions = text;
	for(i=0; i<points; i++){
		text_suspensions += '.';
	}
	
	document.getElementById('loader').innerHTML = text_suspensions;
	setTimeout('loader(\''+text+'\', '+points+')', 500);
}
loader();
</script>

Mais note en passant que je ne sais pas si c'est très intuitif, ton truc, moi si j'arrive sur une page où il est écrit "Veuillez patienter" avec quelque chose qui bouge... j'attends que ça charge la suite

Xurno

10 janvier 2009 à 20:45:21

Mais en fait, est-ce que tu pourrais s'il te plaît me donner carrément le code complet que je dois juste coller ? Parce que je vais être franc, je ne comprend rien ... =(

J'suis assez nul, désolé ... =/

Golmote

10 janvier 2009 à 23:30:31

<body>
<div id="loader">Suite à venir. Veuillez patienter </div>
<script content="text/javascript">
function loader(text, points){
	points = (points ? points : 0);
	points = (points+1 > 3 ? 0 : points+1);
	
	if(!text){
		text = document.getElementById('loader').innerHTML;
	}
	
	var text_suspensions = text;
	for(i=0; i<points; i++){
		text_suspensions += '.';
	}
	
	document.getElementById('loader').innerHTML = text_suspensions;
	setTimeout('loader(\''+text+'\', '+points+')', 500);
}
loader();
</script>
</body>

Anonyme

10 janvier 2009 à 23:35:49

setTimeout('loader(\''+text+'\', '+points+')', 500);

T'es sûr de toi?

setTimeout(loader, 500, text, points); // bien mieux

Golmote

10 janvier 2009 à 23:53:04

nod_, je tiens à dire pour ma défense que moi je n'ai fait que copier-coller le code d'Elias sans relire...

Tout est de sa faute ! :-°

Anonyme

10 janvier 2009 à 23:58:24

Complice…
On disait donc, Elias au bucher?

Elias le Vert

11 janvier 2009 à 1:46:21

Que d'al, le script fonctionne très bien et la fonction setTimeout accepte tout à fait que l'on écrive littéralement l'appel de la fonction sous forme textuelle, avec ses paramètres.
Après, si tu veux y aller avec des recommandations et toussa, te gène pas, mais j'suis pas théologien, moi, je fais des scripts qui fonctionnent

Anonyme

11 janvier 2009 à 1:51:09

Ouais, ouais, je suis bien d'accord.

Mais eval c'est franchement mauvais. Si y'a bien un truc à pas faire c'est l'utiliser, et c'est franchement pas la mort de l'éviter.

( edit )
oui il l'accepte mais uniquement parce qu'il y a un eval derrière qui fait le boulot. C'est pas dutout comme une fonction dans un attribut onclick="mafonction()"

Xurno

11 janvier 2009 à 9:18:56

Donc ça marche, merci beaucoup !

Le seul problème, c'est que pour je ne sais quelle raison le texte se décale. oO
Regardez : http://xurno.olympe-network.com/dictons/mesdictons.html
Je me demande vraiment ce qui fait ça ...

Et en plus y'a pleins d'erreurs : http://validator.w3.org/check?uri=http [...] dator%2F1.606 =(

Golmote

11 janvier 2009 à 10:58:14

Bah tu l'avais un peu codé comme un cochon ton truc en même temps... Pourquoi y'a un <body> au milieu de rien ? -_-

<body>
<div id="all">
    <div id="header">
        <ul id="navbar">

			<li><a title="Index" href="index.html">Index</a></li>
			<li><a title="Mes dictons" href="mesdictons.html">Mes dictons</a></li>
			<li><a title="Autres dictons" href="autresdictons.html">Autres dictons</a></li>
			<li><a title="Informations" href="informations.html">Informations</a></li>
		</ul>
	</div> 
	<div id="contenu">

	<p>Voici quelques dictions que j'ai inventés moi-même :<br /><br />
	
	¤ Répondre à quelqu'un qui t'insulte, c'est se baisser à son niveau et se soumettre à son envie.<br />
	¤ La tristesse est une face cachée de l'amour.<br />
	¤ La vie a des trous. Si tu tombes dans un de ces trous, ton âme monte.<br />
	¤ Pourquoi faire aujourd'hui ce que l'on peut faire demain ?<br /><br />
	
	<i id="loader">Suite à venir prochainement </i>

<script type="text/javascript">
function loader(text, points){
	points = (points ? points : 0);
	points = (points+1 > 3 ? 0 : points+1);
	
	if(!text){
		text = document.getElementById('loader').innerHTML;
	}
	
	var text_suspensions = text;
	for(i=0; i<points; i++){
		text_suspensions += '.';
	}
	
	document.getElementById('loader').innerHTML = text_suspensions;
	setTimeout('loader(\''+text+'\', '+points+')', 500);
}
loader();
</script>

	</p>
	</div>
    <div id="footer">
	    <p>Site Internet créé par Xurno.</p>
	</div>
</div>
</body>

Xurno

11 janvier 2009 à 17:06:43

Maintenant, ça s'affiche correctement mais le problème c'est qu'il y a toujours 6 erreurs ... =(
http://validator.w3.org/check?uri=http [...] dator%2F1.606

Comment les corriger ?

Anonyme

11 janvier 2009 à 17:19:05

met ton javascript dans un fichier externe ça reglera tes problèmes de validation.

en passant le xhtml c'est mort pour le web.

Xurno

11 janvier 2009 à 17:22:33

Et comment je fais ça ? xD
Tu peux m'indiquer la démarche exacte s'il te plaît ? Merci beaucoup ! =p

Golmote

11 janvier 2009 à 20:49:43

Tu mets ce code JS dans un fichier appelé par exemple monscript.js, et tu le mets dans le même dossier que ta page.

function loader(text, points){
	points = (points ? points : 0);
	points = (points+1 > 3 ? 0 : points+1);
	
	if(!text){
		text = document.getElementById('loader').innerHTML;
	}
	
	var text_suspensions = text;
	for(i=0; i<points; i++){
		text_suspensions += '.';
	}
	
	document.getElementById('loader').innerHTML = text_suspensions;
	setTimeout('loader(\''+text+'\', '+points+')', 500);
}
loader();

Et tu remplaces ton code actuel par :

<body>
<div id="all">
    <div id="header">
        <ul id="navbar">

			<li><a title="Index" href="index.html">Index</a></li>
			<li><a title="Mes dictons" href="mesdictons.html">Mes dictons</a></li>
			<li><a title="Autres dictons" href="autresdictons.html">Autres dictons</a></li>
			<li><a title="Informations" href="informations.html">Informations</a></li>
		</ul>
	</div> 
	<div id="contenu">

	<p>Voici quelques dictions que j'ai inventés moi-même :<br /><br />
	
	¤ Répondre à quelqu'un qui t'insulte, c'est se baisser à son niveau et se soumettre à son envie.<br />
	¤ La tristesse est une face cachée de l'amour.<br />
	¤ La vie a des trous. Si tu tombes dans un de ces trous, ton âme monte.<br />
	¤ Pourquoi faire aujourd'hui ce que l'on peut faire demain ?<br /><br />
	
	<i id="loader">Suite à venir prochainement </i>

<script type="text/javascript" src="monscript.js" />

	</p>
	</div>
    <div id="footer">
	    <p>Site Internet créé par Xurno.</p>
	</div>
</div>
</body>

Xurno

11 janvier 2009 à 21:00:31

Là ça me donne ça : http://xurno.olympe-network.com/dictons/mesdictons.html =(

Je ne sais plus quoi faire ... Il n'y a rien qui marche avec mon site.

Anonyme

11 janvier 2009 à 21:03:42

aller le setTimeout quoi…

setTimeout(function () {loader(text, points);},500);

Golmote

11 janvier 2009 à 21:04:18

Euh... t'as mis le javascript dans un fichier nommée monscript.js placé dans le même répertoire que la page ?

Xurno

11 janvier 2009 à 21:08:36

Ça marche toujours pas. xD

Et oui, j'ai bien mis le fichier dans le même répertoire, enfin, je crois !

Dans le même dossier quoi ?

Regarde : http://xurno.olympe-network.com/dictons/monscript.js

SRL Killing

11 janvier 2009 à 21:11:47

Pourquoi en bas de ta page t'appelle loader sans parametre ?

Xurno

11 janvier 2009 à 21:13:53

Quoi ? Je suis débutant hein, je n'y comprend pas grand chose.

Golmote

11 janvier 2009 à 21:14:30

Parce qu'il n'y en a pas besoin...

Ca équivaut à loader(document.getElementById("loader").innerHTML,0)

Xurno

11 janvier 2009 à 21:16:05

Donc en fait je dois faire quoi pour que ça marche ? x)

Golmote

11 janvier 2009 à 21:20:26

Euh... on va faire plus simple.

Enlève le loader() (tout à la fin du fichier JS).

Et mets ce code HTML dans ta page :

<!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="en" >
<head>
<link rel="shortcut icon" href="favicon.ico" />
<title>Dictons</title>
<meta http-equiv="Content-Language" content="fr" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="style.css" />
<script type="text/javascript" src="monscript.js" />
</head>
<body onload="loader();">
<div id="all">
    <div id="header">
        <ul id="navbar">

			<li><a title="Index" href="index.html">Index</a></li>
			<li><a title="Mes dictons" href="mesdictons.html">Mes dictons</a></li>
			<li><a title="Autres dictons" href="autresdictons.html">Autres dictons</a></li>
			<li><a title="Informations" href="informations.html">Informations</a></li>
		</ul>
	</div> 
	<div id="contenu">

	<p>Voici quelques dictions que j'ai inventés moi-même :<br /><br />
	
	¤ Répondre à quelqu'un qui t'insulte, c'est se baisser à son niveau et se soumettre à son envie.<br />
	¤ La tristesse est une face cachée de l'amour.<br />
	¤ La vie a des trous. Si tu tombes dans un de ces trous, ton âme monte.<br />
	¤ Pourquoi faire aujourd'hui ce que l'on peut faire demain ?<br /><br />
	
	<i id="loader">Suite à venir prochainement </i>

	</p>
	</div>
    <div id="footer">
	    <p>Site Internet créé par Xurno.</p>
	</div>
</div>
</body>
</html>

Xurno

11 janvier 2009 à 21:23:22

Là la page ne s'affiche carrément plus.

Que faire ? ...

Golmote

11 janvier 2009 à 21:35:28

Oups pardon, j'avais oublié que <script> n'aimait pas trop qu'on le prenne pour une balise autofermante... =/

Du coup ça devait être ça aussi l'erreur précédente... :-°

Bref si tu remplaces ton head par ça, ça marchera...

<head>
<link rel="shortcut icon" href="favicon.ico" />
<title>Dictons</title>
<meta http-equiv="Content-Language" content="fr" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="style.css" />
<script type="text/javascript" src="monscript.js"></script>
</head>

Xurno

12 janvier 2009 à 7:14:15

Ça marche ! Enfin ! Merci à vous tous pour l'aide que vous m'avez apporté ! =D

Lulin

13 janvier 2009 à 3:45:39

Citation : nod_

( edit )
oui il l'accepte mais uniquement parce qu'il y a un eval derrière qui fait le boulot. C'est pas dutout comme une fonction dans un attribut onclick="mafonction()"

La question peut sembler stupide, mais tu le vois où le eval() ?

1 2 >>