Sujet Précédent Sujet Suivant

Texte defilant arrêt définitif

Résolu/Fermé
cary64 Messages postés 58 Date d'inscription vendredi 16 mars 2007 Statut Membre Dernière intervention 23 octobre 2007 - 18 sept. 2007 à 13:58
Escienca Messages postés 418 Date d'inscription mercredi 12 janvier 2011 Statut Membre Dernière intervention 4 avril 2024 - 19 mai 2011 à 18:35
bonjour,

Je viens vers vous car, malgrés mes recherches, je ne trouve pas le code pour l'effet que je désire faire :

Un texte, defilant de gauche à droite et s'arrêtant en plein milieu de ma page 3 sec. et redemarrant pour finir le defilement.. ainsi de suite....

je travaille avec dreamweaver mx en code html


merci bcp

4 réponses

Réponse 1 / 4
Posotaz Messages postés 489 Date d'inscription samedi 23 juin 2007 Statut Membre Dernière intervention 19 juin 2011 225
18 sept. 2007 à 23:43
Salut Cary,


Pour me détendre (heu oui y'a des fous qui se détendent comme ça) j'ai essayé de faire un truc tout pourri en 20 minutes ; en espérant que ça puisse au moins t'aider à comprendre.

La fonction setInterval exécute une action de manière répétée (ici, le défilement toutes les 100 milisecondes) tandis que setTimeout ordonne d'attendre un certain temps avant d'exécuter ce qu'on veut (ici, 3 secondes avant de repartir).

Pour calculer l'arrêt au milieu j'ai récupéré la moitié de la largeur de la fenêtre du navigateur et j'ai retiré la largeur du span qui contient le texte défilant, lui aussi divisé par 2.

Finalement quand il commence à dépasser la fenêtre, je le remets à gauche. Pour les déplacements je joue sur la propriété "marge gauche" que j'augmente de 5 pixels à chaque fois.

C'est super pourri mais bon, ça bouge ^^

Au fait, c'est important, dans mon exemple, que le texte défilant se trouve dans une balise de type Inline (par exemple span) sinon la largeur réelle d'occupation du texte n'est pas calculée mais c'est plutôt la largeur du bloc qui est prise en compte (et cette largeur occupe , par défaut, toute la largeur de la page moins les marges).

Bon courage ! 


<html>
<head>
<script type="text/javascript">

var timer;
var larg;
var marge = 5;
var milieu;
var blocDefil;

function repars() {
	timer = setInterval("defile(larg-blocDefil.offsetWidth)", 100);
}

function defile(fin) {
	marge = marge + 5;
	blocDefil.style.marginLeft = marge + "px";
	if(marge >= fin) {
		clearInterval(timer);
		if(!(marge >= larg-blocDefil.offsetWidth)) {
			setTimeout("repars()", 3000);
		}else {
			marge = 0;
			timer = setInterval("defile(milieu)", 100);
		}
	}
}

function initDefile() {
	blocDefil = document.getElementById("txtdefil");
	
	if (document.body) {
		larg = document.body.clientWidth;
	}else {
		larg = window.innerWidth;
	}
	milieu = larg/2 - blocDefil.offsetWidth/2;
	timer = setInterval("defile(milieu)", 100);
}
</script>
<style type="text/css">
.txtdefil {
	text-align: left;
	margin-left: 5px;
}
</style>
</head>

<body onload="initDefile()">
	<div>
		<span id="txtdefil">Je défile, je m'arrête, je repars.</span>
	</div>
</body>
</html>
1
talmai
18 déc. 2008 à 16:18
Très joli.
Savez vous comment je dois m'y prendre pour arrêter le texte de façon definitive sur la droite de l'ecran quand il est entrer par la gauche et inversement ?

Ensuite, je souhaiterai egalement pouvoir le faire entrer par le haut ou le bas et le stopper au milieu avec redemarrage. Puis sans redemarrage.

ça fait beaucoup de chose mais si vous pouvez m'aider, ce serait très sympa...

Merci d'avance à vous tous.
0
Posotaz Messages postés 489 Date d'inscription samedi 23 juin 2007 Statut Membre Dernière intervention 19 juin 2011 225 > talmai
21 déc. 2008 à 00:48
Bonjour Talmai,

(enfin joli... mais merci pour le compliment).

Pour l'arrêt du texte j'utilise la fonction clearInterval ; s'il donne l'impression de ne pas s'arrêter c'est parce que je le fais repartir avec setInterval.

Pour le faire fonctionner dans l'autre sens il faudrait aligner le texte à droite en commençant et agrandir la marge de droite (marginRight) plutôt que celle de gauche (marginLeft). Il faudra peut-être adapter les tests bien qu'en réalité ils se basent sur la largeur totale de la page alors qu'en général ce n'est pas le cas puisqu'il y a autre chose autour du texte qui défile... c'était vraiment pour faire un exemple rapide et fonctionnel.

Pour que ça défile verticalement plutôt que horizontalement, le secret réside toujours et encore dans les marges (marginTop -marge haut- pour le faire descendre et marginBottom -marge bas- pour le faire monter). La seule différence c'est que le milieu sera calculé non plus sur base de la largeur mais de la hauteur (remplace les Width par Height) du conteneur.

Ensuite pour que ça s'arrête ou que ça s'arrête un moment et puis reparte, j'ai donné l'astuce avec clearInterval (pour arrêter définitivement) et setTimeout (pour le faire repartir au bout d'un certain temps).

Voilà tu as tous les éléments nécessaires pour y parvenir, bon courage !
0
Réponse 2 / 4
Serge_La Messages postés 407 Date d'inscription lundi 19 mars 2007 Statut Membre Dernière intervention 3 mars 2009 47
19 sept. 2007 à 01:04
Pas mal, Posostaz. Amusant.
0
Réponse 3 / 4
cary64
19 sept. 2007 à 10:37
alors là je dis...

MAGNIFIQUE !!!!!!!!!!

c'est génial ce que tu as fait ! je suis super contente du résultat !

Bravo !! Merci d'avoir passé du temps sur ce problème !

Mille merci


CAry
0
Réponse 4 / 4
Escienca Messages postés 418 Date d'inscription mercredi 12 janvier 2011 Statut Membre Dernière intervention 4 avril 2024 56
19 mai 2011 à 18:35
Bonjour,

ce sujet étant résolu mais étant fort utile, je l'ai relancé ici:

https://forums.commentcamarche.net/forum/affich-22141933-texte-defilant-arret-au-milieu-de-la-page#newanswer

Merci...
0

Discussions similaires

Formule Excel : "SI" une cellule contient un mot, alors ?
Tonio5933 -
Mike-31 -

9 réponses
Trouver le mot réellement écrit en lettres capitales PIX
ETHAN -
kirikou -

4 réponses
Excel si cellule contient texte alors...
caba_44 -
RENOU -

41 réponses
Excel 365 + Windows 10 Arrêt défilement flèches
VALBRISE -
VALBRISE -

5 réponses
copie de texte
jean -
jean -

5 réponses