Texte défilante dans un DIV

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : Texte défilante dans un DIV

par chrislabricole » 29 mai 2008, 18:38

Ah ok

Merci :)

par AB » 29 mai 2008, 18:32

Loool
et ben depuis le début je peux modifier ce texte avec mon panel admin ^^

Merci quand même :D @+
M'oui... mais pour que le défilement soit parfait il faut adapter la largeur du div #defile (dans l'exemple) à la longueur du texte sinon le texte peut être tronqué ou la boucle mettre trop de temps à se ré afficher. Donc si tu changes la longueur de ton texte sans changer cette valeur tu auras des pb. C'est pour cette raison que je t'ai donné le lien plus haut :wink:

par chrislabricole » 29 mai 2008, 13:48

Loool
et ben depuis le début je peux modifier ce texte avec mon panel admin ^^

Merci quand même :D @+

par AB » 28 mai 2008, 23:25

Ah ben merci de me faire de la pub :wink: Je vois que ce petit utilitaire rend service :)

Sinon c'était pour dire qu'une fois que ton code est formaté, pour peu que tu n'aies que du texte à faire défiler, tu peux utiliser l'astuce suivante http://www.phpfrance.com/forums/voir_re ... php#204068 qui te permettra d'alimenter ton défilant avec un texte différent (provenant d'une bdd ou autre) sans avoir à modifier ton code :wink:

par chrislabricole » 28 mai 2008, 22:57

Ah ça y est !
en persévérant d'avantage j'ai réussi à bien intégrer le code donné grâce au lien de jojolapine :
http://www.abciweb.net/defilant.php?page=250

Merci à vous tous ;) :D

par AB » 28 mai 2008, 18:54

Et dans le lien proposé par jojolapine, quelque chose ne te convient pas ? Certes la boucle ne réapparait qu'à la fin du message mais en contre partie l'affichage est beaucoup plus fluide...

par chrislabricole » 28 mai 2008, 12:06

C'est encore pire :langue:

En fait, il fait comme htmlentities() sous PHP xD

essaies, tu verras bien ^^

Merci :)

par Koumalo » 28 mai 2008, 11:57

Si tu remplaces tes espaces par des ' ' IE ne devrait plus les enlever

par chrislabricole » 28 mai 2008, 01:39

Ah... pas l'habitude de regarder se que ça donne sous.... IE7 ^^

Par contre sous FireFox ça marche bien :D

Bizarre qu'il supprime les espaces... :roll:

Merci à vous tous !

par AB » 28 mai 2008, 01:10

Ah bah chez moi sous IE7 les espaces entre les mots sont supprimés au second passage du texte :(
J'ai pas cherché à corriger car ce genre de méthode produit un défilement très saccadé donc pénible à lire.

code testé

Code : Tout sélectionner

<!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> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Document sans titre</title> <script type="text/javascript"> function bandeau_defilant() { var texteDef = document.getElementById('bandeau_defilant').innerHTML; texteDef = texteDef.substring(1,texteDef.length) + texteDef.substring(0,1); document.getElementById('bandeau_defilant').innerHTML = texteDef; tempo2 = setTimeout("bandeau_defilant()", 90); } </script> </head> <body onload="bandeau_defilant()"> <div id ="bandeau_defilant"> Un essai de texte défilant </div> </body> </html>

par chrislabricole » 27 mai 2008, 18:13

Merci à toi ! :D

par Koumalo » 27 mai 2008, 11:59

Est-ce que c'est ça que tu veux ?
function bandeau_defilant() { 
    var texteDef = document.getElementById('bandeau_defilant').innerHTML; 
    texteDef = texteDef.substring(1,texteDef.length) + texteDef.substring(0,1); 
    document.getElementById('bandeau_defilant').innerHTML = texteDef; 
    tempo2 = setTimeout("bandeau_defilant()", 90); 
}
A chaque appel de la fonction (toutes les 90 millisecondes) la routine retire un caractère au texte et le replace à la fin.

Eric

par chrislabricole » 25 mai 2008, 19:34

en fait non, j'ai pris ce script sur internet puisque je ne savais pas du tout comment m'y prendre...

j'ai rajouter:
var texteOrigine = document.getElementById('bandeau_defilant').innerHTML;
en haut pour "sauvegarder le texte"

mais pour le faire réapparaitre sur la droite... je vois pas trop comment :roll:

Merci !

par jojolapine » 25 mai 2008, 18:44

Bonjour,
est-ce que tu as compris le fonctionnement de ce script?
En gros le défilement est simulé, puisque la fonction ne fait qu'enlever la première lettre de ton conteneur, ce qui fait qu'on à l'impression qu'il "défile"...
Mais pour qu'il revienne, il faudrait déjà stocker quelque part le texte de départ, et ensuite, arriver à l'afficher depuis la droite, ce qui devient vite compliqué...
regarde de ce côté pour une autre solution:
http://www.phpfrance.com/forums/voir_su ... lant-0.php
(un petit lien: http://www.abciweb.net/defilant.php?page=250)

Texte défilante dans un DIV

par chrislabricole » 25 mai 2008, 18:26

Bonjour,

Alors, là, je sèche :s
ça consiste à faire défiler du texte dans une div.... (sans utiliser marquee bien sûr...)
Script JS :
function bandeau_defilant() {
	var texteDef = document.getElementById('bandeau_defilant').innerHTML;
	var texte = ' ';
	texteDef = texteDef.substring(1,texteDef.length);
	while(texteDef.length < 100) {
		texteDef += " " + texte;
	}
	document.getElementById('bandeau_defilant').innerHTML = texteDef;
	tempo2 = setTimeout("bandeau_defilant()", 90);
}

Code : Tout sélectionner

onload="bandeau_defilant();"
et mon div....
<div id="bandeau_defilant" style="width:660px; border:1px solid #000000; margin:auto;">Ceci est mon texte, mon texte, mon texte, mon texte, mon texte, mon texte, mon texte, mon texte, mon texte, mon texte.......</div>
Il défile bien mais.... il revient pas...

Merci à vous ! :)