texte défilant vertical

**laurentSc** · 11/02/2013, 10h04

Bonjour,

j'ai fait un code qui ne marche pas mais sais pas pourquoi :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!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=ISO-8859-1">
  <title>Texte defilant</title>
  <style>
#texte {
width:640px; /* taille du div */
height:480px;
border:1px solid black;
position: absolute;
overflow:hidden; /* la partie des objets qui dépasse du div est cachée*/
}
#contenu {
position: absolute; 
}
</style>
</head>
<body>
<div id="texte">
<p id="contenu">bla bla</p>
</div>
</body>
</html>

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var TexteNode;
var ContenuNode;
var posx,texteposx;
var depart;
function init() {
TexteNode=document.getElementById("texte"); // récupération du div
TexteHeight=TexteNode.offsetHeight; // lecture de l'offset hauteur du div (html)
posx=0;
depart=0; 
setInterval("move()", 30); // appel fct move ttes les 30 ms
} 
function move() {
posx+=1;
texteposx=depart+posx+1;
contenu.style.top=texteposx+"px"; /* écriture position du texte (CSS pour écrire)*/ 
if ((texteposx>=TexteHeight)) { posx= 0;}
}
window.onload = init;

**Bovino** · 11/02/2013, 10h05

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

TexteNode=document.getElementById("texte);

Ca commence bien...

**laurentSc** · 11/02/2013, 10h14

Ca commence bien...

Et pourquoi ? Craignant d'avoir à faire à un mot-clé, j'ai remplacé "texte" par "div_texte" mais pas mieux...(je suis pas très fort en javascript, faudrait m'aider)

**Bovino** · 11/02/2013, 10h16

Quand tu ouvres une chaine, il est préférable de la fermer...
Compte le nombre de " dans la ligne indiquée et tu comprendras.

**laurentSc** · 11/02/2013, 10h24

Merci, j'avais pas vu

mais en refermant la chaîne, ça reste fixe...

**Bovino** · 11/02/2013, 10h39

Bon, j'ai corrigé dans ton premier message pour pouvoir profiter de la coloration syntaxique.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

contenu.style.top=texteposx+"px";

contenu, il sort d'où celui-là ?

**laurentSc** · 11/02/2013, 11h25

d'une petite erreur d'inattention : je suis reparti d'un code qui marche et fait défiler une image et me suis trompé en l'adaptant, mais maintenant, ça ne défile toujours pas :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
39
40
41
42
43
44
45
<!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=ISO-8859-1">
  <title>Texte defilant</title>
  <style>
#texte {
width:640px; /* taille du div */
height:480px;
border:1px solid black;
position: absolute;
overflow:hidden; /* la partie des objets qui dépasse du div est cachée*/
}
#contenu {
position: absolute; }
</style>
</head>
<body>
<script>
var TexteNode;
var ContenuNode;
var posx,texteposx;
var depart;
function init() {
TexteNode=document.getElementById("div_texte"); // récupération du div
contenu_id=document.getElementById("contenu"); // récupération du texte
TexteHeight=TexteNode.offsetHeight; // lecture de l'offset hauteur du div (html)
posx=0;
depart=0; 
setInterval("move()", 30); // appel fct move ttes les 30 ms
}
 
function move() {
posx+=1;
texteposx=depart+posx+1;
contenu_id.style.top=texteposx+"px"; /* écriture position du texte (CSS pour écrire)*/ if ((texteposx>=TexteHeight)) { posx= 0;}
}
</script>
<script language="javascript">window.onload = init;</script>
<div id="div_texte">
<p id="contenu">bla bla</p>
</div>
</body>
</html>

**SpaceFrog** · 11/02/2013, 11h37

si tu changes tes noms de varaibles en cours de route ...

contenu_id != ContenuNode

en faisant un peu de ménage dans les variable inutiles et les erreurs de varaibles, d'id et de selecteurs css ...
http://jsfiddle.net/kRB54/

**laurentSc** · 11/02/2013, 13h58

Pas compris ce qu'est un Fiddle ; sinon, j'ai corrigé mon erreur dans le nom de variable, mais toujours rien :

Code html+js :

Sélectionner tout - Visualiser dans une fenêtre à part

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
39
40
41
<!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=ISO-8859-1">
  <title>Texte defilant</title>
  <style>
#texte {
width:640px; /* taille du div */
height:480px;
border:1px solid black;
position: absolute;
overflow:hidden; /* la partie des objets qui dépasse du div est cachée*/
}
#contenu {
position: absolute; }</style>
</head>
<body>
<script>
var TexteNode;
var contenu_id;
var posx,texteposx;
var depart;
function init() {
TexteNode=document.getElementById("div_texte"); // récupération du div
contenu_id=document.getElementById("contenu"); // récupération du texte
TexteHeight=TexteNode.offsetHeight; // lecture de l'offset hauteur du div (html)
posx=0;
depart=0; setInterval("move", 30); // appel fct move ttes les 30 ms
} function move() {
posx+=1;
texteposx=depart+posx+1;
contenu_id.style.top=texteposx+"px"; /* écriture position du texte (CSS pour écrire)*/ if ((texteposx>=TexteHeight)) { posx= 0;}
}
</script>
<script language="javascript">window.onload = init;</script>
<div id="div_texte">
<p id="contenu">bla bla</p>
</div>
</body>
</html>

**SpaceFrog** · 11/02/2013, 14h04

Pas compris ce qu'est un Fiddle

T'es tu au moins donné la peine de cliquer sur le lien du fiddle ?

Ho miracle un code javascript fonctionnel !!!!

**NoSmoking** · 11/02/2013, 14h52

Bonjour,
au chapitre des remarques

Une première :
ta DIV <div id="div_texte"> n'a pas de hauteur la référence au CSS étant erroné

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
#texte {  /* ce N'EST PAS div_texte plutôt */
width:640px; /* taille du div */
height:480px;
border:1px solid black;
position: absolute;
overflow:hidden; /* la partie des objets qui dépasse du div est cachée*/
}

Une autre :
<script language="javascript"> d'un coté <script> de l'autre il manque <script type="text/javascript"> et l'on devrait être complet.

Enfin :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

setInterval("move", 30); // appel fct move ttes les 30 ms

est tu vraiment sûr de la syntaxe ??

**laurentSc** · 11/02/2013, 14h59

Je l'avais déjà fait, mais juste avec mon navigateur antique (IE8) et y avait rien ; du coup, j'ai regardé avec FF18 et là, y a tout ; merci.
Cela dit, si je regarde le lien, ça défile, mais si je copie le code (en le corrigeant, car y a une minuscule qui était devenue une majuscule...), ça reste fixe.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
39
40
<!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=ISO-8859-1">
  <title>Texte defilant</title>
  <style>
#div_texte {width:640px; /* taille du div */
height:480px;
border:1px solid black;
position: absolute;
overflow:hidden; /* la partie des objets qui dépasse du div est cachée*/
}
#contenu {
position: absolute; }
  </style>
</head>
<body>
<script>
var TexteNode;
var contenuNode;
var texteposx;
function move() {
texteposx++;
contenuNode.style.top=texteposx+"px"; /* écriture position du texte (CSS pour écrire)*/ if ((texteposx>=TexteHeight)) {texteposx =0;}
}
function init() {
TexteNode=document.getElementById("div_texte"); // récupération du div
contenuNode=document.getElementById("contenu"); // récupération du texte
TexteHeight=TexteNode.offsetHeight; // lecture de l'offset hauteur du div (html
texteposx=0;
setInterval(move, 30); // appel fct move ttes les 30 ms
}
init();
</script>
<div id="div_texte">
<p id="contenu">bla bla</p>
</div>
</body>
</html>

et comment on le génère de fiddle ?

**SpaceFrog** · 11/02/2013, 15h01

sur le fiddle le init() est lancé sur le onload

pas dans ton code ...

**Bovino** · 11/02/2013, 15h03

Lorsque tu appelles ta fonction init(), les éléments qu'elle est sensée initialiser n'existent pas encore !!!

**laurentSc** · 11/02/2013, 15h49

Ca y est, ça défile ; merci pour l'aide

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
39
40
41
42
43
44
45
<!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=ISO-8859-1">
  <title>Texte defilant</title>
  <style>
#div_texte {width:640px; /* taille du div */
height:200px;
border:1px solid black;
position: absolute;
overflow:hidden; /* la partie des objets qui dépasse du div est cachée*/
}
#contenu {
position: absolute; }
  </style>
</head>
<body>
<script language="javascript">
var TexteNode;
var contenuNode;
var texteposx;
function move() {
texteposx++;
contenuNode.style.top=texteposx+"px"; /* écriture position du texte (CSS pour écrire)*/ if ((texteposx>=TexteHeight)) {texteposx =0;}
}
function init() {
TexteNode=document.getElementById("div_texte"); // récupération du div
contenuNode=document.getElementById("contenu"); // récupération du texte
TexteHeight=TexteNode.offsetHeight; // lecture de l'offset hauteur du div (html
texteposx=0;
setInterval("move()", 30); // appel fct move ttes les 30 ms
}
</script>
<script language="javascript">window.onload = init;</script>
<div id="div_texte">
<p id="contenu">bla bla 1<br>
bla bla 2 <br>
bla bla 3<br>
bla bla 4 <br>
bla bla 5<br>
</p>
</div>
</body>
</html>

**MaitreKaio** · 11/02/2013, 18h27

Et maintenant, question subsidiaire: faut-il ? Rappelons que le scroll horizontal était à la mode dans les années 90

**SylvainPV** · 11/02/2013, 20h50

Et que fais-tu du Web mobile en pleine expansion ? Sur les petites résolutions, le défilement automatique de contenu ou "ticker" est tout à fait adapté pour présenter du texte de longueur variable dans des petits conteneurs de dimensions fixes.

J'en profite pour rappeler le petit helper jQuery que j'ai écrit pour le défilement auto de contenu : http://www.developpez.net/forums/d13...tique-contenu/

**MaitreKaio** · 12/02/2013, 10h49

Le faut-il ? était justement là pour rappeler qu'il peut être bien de se poser la question... Evidemment que ça peut se faire dans certains use cases. Mais en règle générale, je pense que ça devrait être évité. Surtout s'il s'agit de faire un simple effet de présentation...

texte défilant vertical

JavaScript

Discussions similaires

Partager

Partager