Je recherche un code simplifié pour faire défiler du texte.

Un code facile à comprendre pour un débutant.

18 juillet 2010 à 14:57:08

Bonjour à tous,

Je développe actuellement un site web en HTML/PHP. Je souhaiterais ajouter un script qui me permettrais d'afficher un texte défilant de Gauche à Droite dans une div, seulement mes compétences en JavaScript sont NULL ;). Je recherche un code JS se rapprochant au maximum du langage de haut niveau. Un code simplifié facile à lire pour un débutant, si possible avec des commentaires.

Merci d'avance pour vos retours,
Amicalement, Nanom.

restimel

18 juillet 2010 à 16:34:24

Regarde cette réponse. Pour adapter à ce que tu veux il te suffit de changer le marginTop en marginLeft, et le if(current<min){current=min; sens=1;} en if(current<min){current=max;} (et sur la ligne suivante faire de même en inversant max et min)

ensuite il faut paramétrer les options correctement:

sens=1 pour aller de gauche à droite et sens=-1 pour aller de droite à gauche
max=element.offsetWidth; //c'est à dire la longueur de l'élément
min=-element.firstChild.offsetWidth; // là c'est un peu plus complexe, cela signifie la longueur du premier élément contenu dans l'élément or cette propriété ne fonctionne pas avec un texte donc il faut encapsuler ton contenu dans un span (soit en automatique avec du javascript qui va créer un span et copier tout le contenu qui est actuellement dans l'élement soit en HTML où il suffit d'ajouter un <span></span> autour du texte)

par exemple:

<div id="marquee"><span>Un texte qui défile</span></div>

Attention cependant à ne pas faire de retour à la ligne entre le <div> et le <span> (sinon Firefox considère que le premier élément contenu dans le div est un saut de ligne)

jacobinus

19 juillet 2010 à 16:16:19

fait une recherche google sur la balise html <marquee> tu devrais trouver ton bonheur !

Nanom

19 juillet 2010 à 20:11:51

Bonjour à tous,

La balise <marquee></marquee> n'est pas valide W3C, c'est pourquoi je recherche un code JavaScript simplifié afin de comprendre la méthode.

J'ai essayé ceci :

<!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>Titre de ma page</title>
		<script type="text/javascript">
		function marquee_alternate(element)
		{
			if (typeof(element)==="string")
			{
				element=document.getElementById(element);
			}
			
			var min=-element.firstChild.offsetWidth; //hauteur minimum
			var max=-element.offsetWidth; //hauteur maximum
			var sens=1; //1: vers le bas / -1: vers le haut (0: ne bouge plus)
			var vitesse=25; //vitesse de déplacement
			var current=0; //position courante
			
			function move()
			{
				current+=sens*vitesse;
				
				if(current<min)
				{
					current=max;
				}
				
				if(current<max)
				{
					current=min;
				}
				
				element.style.marginLeft=current+"px"; //déplacement de l'élément
			}
			
			setInterval(move,300);
		}
		</script>
	</head>
	<body onload="marquee_alternate('marquee');">
		<div id="marquee" style="width:600px;height:20px;background:black;color:white;"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></div>
	</body>
</html>

Mais ça ne fonctionne pas, j'ai du mal m'y prendre ? pourtant il me semble avoir correctement respecté tes directives.

EDIT : il manquait un "-" entre max= et element.offsetWidth;

Mais ce n'est pas exactement ce que je recherchais, vu que la position du texte ne se réinitialise pas, et continue de défilé sur la droite indéfiniment.

J'espère trouver une solution rapidement, merci pour votre aide.
A bientôt, Nanom.

restimel

19 juillet 2010 à 23:01:56

non le max est positif, il ne faut pas mettre de -
à la ligne 28 c'est current>max