Faire défiler un texte (fichier *.txt)

Version imprimable

Voir 40 message(s) de cette discussion en une page

23/09/2018, 15h01
Crachover

Faire défiler un texte (fichier *.txt)
Bonjour,

J'ai une page web, sur cette page, je fais défiler un texte de droite à gauche, j'utilise pour cela la commande MARQUEE et cela fonctionne très bien. j'ai cependant plusieurs problèmes et demandes... ;)

J'aimerais pouvoir comme indiqué dans le titre, aller chercher le contenu du texte directement dans un fichier *.txt, j'ai essayé avec le code <object data="Classeur1.txt"/> cela fonctionne, le texte est bien là, mais impossible de le mettre en forme, impossible de retirer une barre de défilement horizontale, sauf en fixant la longueur du texte... 100% ne fonctionne pas etc... je me tourne donc vers du JavaScript, mais là, je suis nul... :oops:

Donc, je me permet de poster cette demande.

J'aimerais pouvoir :
- Faire défiler un texte, (source : *.txt) de droite vers la gauche avec possibilité de choisir la taille du texte, la couleur, la couleur de fond de la zone de défilement etc...
- Faire défiler un texte, (source : *.txt) de bas en haut, style générique de film dans une box (<div>) avec possibilité de choisir la taille du texte, la couleur, la couleur de fond de la zone de défilement, que le texte passe à la ligne automatiquement si la box ne permet pas un affichage en une ligne etc...
Merci d'avance pour votre aide :)
23/09/2018, 15h29
NoSmoking

Bonjour,
on fait quoi de ton autre discussion, Intégrer fichier TXT avec MARQUEE ,à la quelle il serait poli de répondre, c'est la moindre des choses :(.
23/09/2018, 15h33
Crachover

Bonjour,
Il fallait juste m'en laisser le temps... :) mais effectivement j'aurais peut-être dû faire l'inverse... répondre et puis poster dans une autre rubrique :oops: personne n'est parfait :P
23/09/2018, 16h30
NoSmoking

C'est tout à fait faisable en CSS, on en avait parlé sur le forum dans cette discussion : Défilement horizontal en CSS, d'un texte sans saccades, il y a des solutions JavaScript si mes souvenirs sont bons.

J"avais mis un lien vers une démo CSS : [CSS] Texte défilant.
25/09/2018, 18h38
Crachover
Bonjour,

Je reviens vers vous, car je n'y arrive pas... j'arrive bien "en partie" à réaliser les exemples du précédent message, mais je n'arrive pas à les adapter...

Ce que j'aimerais ces :
1. que le texte provienne d'un fichier *.txt
2. que le code s'adapte automatiquement par rapport à la longueur du texte présent dans le fichier *.txt
3. que le texte démarre du bord droit et non du coté gauche comme dans l'exemple
Ps : le contenu du fichier *.txt sera toujours sur une ligne, car le fichier texte est créé préalablement par du vba Excel !

Merci d'avance pour votre aide :-)
25/09/2018, 20h17
psychadelic

lire un fichier texte => utiliser un fetch
un texte de 50 pages ?
25/09/2018, 22h17
Crachover

Bonjour,

Nonnnnn.... je dirais 100 caractères maximum que je ferais défiler à un endroit de ma page web... :)
25/09/2018, 22h33
psychadelic

pour faire défiler un texte d'une centaine de caractères le plus simple c(est d'utiliser la fonction animate de jQuery en jouant sur la postion absolute de ton élément contenant le text avec un left identique à la taille du conteneur
puis diminuer sa valeur jusqu'a en être négatiive si la longueur du texte est plus longue que celle du conteneur.
apres dans le callback du animate tu peux éventuellement lancer un setTimeout pour rejouer en boucle cette animation.
26/09/2018, 07h08
Crachover

Holaaaaa, merci, mais là tu parles chinois pour moi :lol:

Je vais encore chercher :)

Bonne journée
26/09/2018, 10h53
NoSmoking

Je viens de mettre en ligne une solution simple de mise en oeuvre : Texte défilant avec départ à droite.
C'est du 100% CSS pure jus concernant l'animation, plus simple que la version précédemment citée.

Concernant le chargement automatique du texte cela peut se faire aisément en utilisant la technique Ajax.

Bonjour,

1- @NoSmoking
Ce serait bien que tu affiches dans la page démo aussi le code HTML + CSS.
Notamment pour les débutants : ça éviterait d'avoir à chercher dans le code source.

Code:

1
2
3
      <div class="marque-rtl">
        <div class="msg">Texte défilant horizontalement plus long que la fenêtre de défilement</div>
      </div>

Code:

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
29
30
31
32
33
34
35
36
/* texte défilant, de droite vers la gauche, avec départ du texte à droite de la fenêtre de défilement */
/* le block conteneur */
.marque-rtl {
  max-width: 30em;
  margin: 2em auto;
  border: 10px solid #F0F0FF;
  overflow: hidden;
  box-shadow: 0 .25em .5em #CCC,inset 0 0 1em .25em #CCC;
}
.marque-rtl > div {
  display: inline-block;
  padding-right: 2em;
  padding-left: 100%;
  white-space: nowrap;
  animation: defilement-rtl 15s infinite linear;
  cursor: pointer;
}
.marque-rtl:hover > div {
  animation-play-state: paused;
}
.msg {
  font-size: 1.5em;
  line-height: 2em;
}
.msg:first-letter {
  font-weight: 700;
  color: #F00;
}
@keyframes defilement-rtl {
  0% {
    transform: translate3d(0,0,0);
  }
  100% {
    transform: translate3d(-100%,0,0);
  }
}

2- Pour intégrer le fichier texte avec PHP :

Code:

1
2
3
      <div class="marque-rtl">
        <div class="msg"><?php include('Classeur1.txt'); ?></div>
      </div>

Il faut que le fichier ait l'extension .php, et bien sûr que PHP soit activé !

3- Pour un défilement vertical : https://codepen.io/jreaux62/pen/JagyMj

Code:

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
29
30
31
32
33
34
35
36
37
38
/* ---------------- */
/* Texte défilant vertical, de bas en haut */
.marque-ver {
  position:relative;
  max-width: 30em;
  height:6em;
  margin: 2em auto;
  border: 10px solid #F0F0FF;
  overflow: hidden;
  box-shadow: 0 .25em .5em #CCC,inset 0 0 1em .25em #CCC;
}
.marque-ver > div {
  position:relative;
  padding: 2em;
  padding-top: 6em; /* meme que height du parent */
  animation: defilement-ver 10s infinite linear;
  cursor: pointer;
}
.marque-ver:hover > div {
  animation-play-state: paused;
}
.msg {
  font-size: 1.5em;
  line-height: 1.5em;
}
.msg:first-letter {
  font-weight: 700;
  color: #F00;
}
@keyframes defilement-ver {
  0% {
    transform: translate3d(0,0,0);
  }
  100% {
    transform: translate3d(0,-100%,0);
  }
}
/* ---------------- */

Remarque : la vitesse de défilement va dépendre du nombre de lignes de texte (puisque c'est sa hauteur qui est prise en compte).

26/09/2018, 16h48
NoSmoking

Citation:

Ce serait bien que tu affiches dans la page démo aussi le code HTML + CSS.

Je fais ce que je veux avec mes sources :langue:

Citation:

Notamment pour les débutants : ça éviterait d'avoir à chercher dans le code source.

Un minimum de recherche n'a jamais fait de mal à personne et je dirais même que c'est d'autant plus vrai pour les débutant :aie:

Ceci étant plus sérieusement, cette page fait partie de la dizaine de pages que j'ai en souffrance depuis le début de l'année ... alors dès que j'aurais vraiment du temps j'essaierais de la finaliser suivant mon schéma habituel.

Pour info j'ai également le déplacement vertical ;)
26/09/2018, 18h33
Invité

Mea culpa !

Je n'avais pas vu toutes tes sources (CSS) !
Beau travail, et très détaillé.

Chapeau.

Comme disais mon grand-père :

Citation:

"Je n'ai rien dit avant de parler"
27/09/2018, 16h25
Crachover

Salut,

Super, merci beaucoup, cela fonctionne très bien :P:P:P:P
29/09/2018, 01h06
psychadelic

Citation:

Envoyé par Crachover

J'aimerais pouvoir :
[*]Faire défiler un texte, (source : *.txt) de bas en haut, style générique de film dans une box (<div>) avec possibilité de choisir la taille du texte, la couleur, la couleur de fond de la zone de défilement, que le texte passe à la ligne automatiquement si la box ne permet pas un affichage en une ligne etc...

J'avais vu ce truc la un jour, puis je viens de madire que c'est pile poil ce que tu recherche ;)
==> https://codepen.io/thatbram/pen/KuHsl
06/10/2018, 16h39
Crachover

Je créé mes pages, je test sur mon pc, tout est nickel, même avec un include PHP... je lance la page sur ma SMART TV et là.... rien, snif, le code de NoSmoking ne fonctionne pas sur une SMART TV... le texte n'apparait pas, pourquoi ????

Pour info :
un petit exemple, sur ma SMART TV Samsung la déclaration des variables LET ne fonctionne pas, je dois obligatoirement mettre VAR...

Une idée ?
06/10/2018, 17h39
Invité

Bonjour,

Citation:

Envoyé par Crachover

...sur ma SMART TV Samsung la déclaration des variables LET ne fonctionne pas, je dois obligatoirement mettre VAR...

Oui, on avait déjà vu ça (dans une autre discussion).

Peux-tu re-montrer ton code ?

Salut,

Voici...

messageiframe.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css.css"/>
<title>Message</title>
</head>
<body>
<div class="marque-rtl">
<div id="messageii" class="msg"><?php include('Classeur1.txt'); ?></div>
</body>
</html>

css.css

Code:

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
29
30
31
32
/* texte défilant, de droite vers la gauche, avec départ du texte à droite de la fenêtre de défilement */
/* le block conteneur */
body
{
  background-color: black; /* Le fond de la page sera noir */
  color: #A6A6A6; /* Le texte de la page sera blanc */
}
.marque-rtl {
  max-width: 296px;
  border: 1px solid #A6A6A6;
  overflow: hidden;
}
.marque-rtl > div {
  display: inline-block;
  padding-right: 296px;
  padding-left: 296px;
  white-space: nowrap;
  animation: defilement-rtl 15s infinite linear;
  cursor: pointer;
}
.msg {
  font-size: 16px;
  line-height: 25px;
}
@keyframes defilement-rtl {
  0% {
    transform: translate3d(0,0,0);
  }
  100% {
    transform: translate3d(-100%,0,0);
  }
}

Classeur1.txt

Code:

Vous pouvez écrire içi ... :-) un texte... blablabla...

Code iframe de ma page index.htm

Code:

1
2
<span style='mso-ignore: vglayout; position: absolute; z-index: 2; margin-left: 18px; margin-top: 260px; left: 890px; top: 355px;'><div>
<iframe id="messagei" name="messagei" title="messagei" src="messageiframe.php" frameborder=0  height=91px width=100% scrolling="No" marginheight="0" marginwidth="0"></iframe></div></span>

07/10/2018, 09h25
Invité

Bonjour,

Je doute que ta SMART TV interprète le PHP.

si... en tapant ce code, le texte est bien affiché sur la SMART TV... c'est à mon avis au niveau des animations... :?
Code:

1 2 3 4 5 6 7 8 9 10 11 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Test PHP Smart TV</title> </head> <body> <?php include('Classeur1.txt'); ?> </body> </html>

Voir 40 message(s) de cette discussion en une page