texte défilant vertical ?

Version imprimable

18/06/2009, 10h37
laurentSc

texte défilant vertical ?

Bonjour,

j'aimerais réaliser un texte défilant vertical (éventuellement texte sur plusieurs lignes). J'ai d'abord récupérer un script ici mais ça ne marche pas (je suis en IE6 et je crois que ça a son importance). Comme je ne connais rien en javascript, je compte sur Auteur...

tu peux partir de cette base :

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
		<style type="text/css">
		body {margin:0px}
		#listYear {border:1px solid #666;position:relative;overflow:hidden;}
		#listYear span{position:absolute;display:block;width:100px;background-color:green;text-align:center;z-index:100;font-weight:bold;}
		</style>
 
		<script type="text/javascript">
			var animTimer = null;
			function init(){
				var pos = 0 ;
				var c=document.createElement('div');
				c.id="listYear";
				c.style.width=100+"px";
				c.style.height=30+"px";
				document.body.appendChild(c);
 
				var d=document.createElement('div');
				d.style.width=10+"px";
				d.style.height=30+"px";
				d.style.position  = "absolute";
				d.style.left = 0 + "px";
				d.style.backgroundColor = "red";
				d.style.zIndex = "200";
				d.onmouseover = function(){
					animTimer = setInterval(function(){
						moveLeft()
						}, 30);
					}
				d.onmouseout = function(){
					clearInterval(animTimer);
				}
 
 
				c.appendChild(d);
				var pd = d.cloneNode(true);
				pd.style.left = 90 + "px";
				pd.onmouseover = function(){
					animTimer = setInterval(function(){
						moveRight()
						}, 50);
					}
				pd.onmouseout = function(){
					clearInterval(animTimer);
				}	
				c.appendChild(pd);
				//Ajout des dates
				for(var i = 0 ; i != 3 ; i++){
					var MySpan=document.createElement('span');
					MySpan.innerHTML = 1980+i;
					MySpan.style.left = pos + "px";
					pos += 100 ;
					c.appendChild(MySpan);
				}
			}
 
			function moveLeft(){
				var listYear = document.getElementById('listYear').getElementsByTagName('span');
				for (var i = 0; i != 3; i++) {
					listYear[i].style.left = (parseInt(listYear[i].style.left) - 5 )+"px";
					if(parseInt(listYear[i].style.left) <= -100){
						listYear[i].innerHTML = parseInt(listYear[i].innerHTML) + 3 ;
						listYear[i].style.left = 190+"px";
					}
				}
			}
 
			function moveRight(){
				var listYear = document.getElementById('listYear').getElementsByTagName('span');
				for (var i = 0; i != 3; i++) {
					listYear[i].style.left = (parseInt(listYear[i].style.left) +  5 )+"px";
					if(parseInt(listYear[i].style.left) >= 200){
						listYear[i].innerHTML = parseInt(listYear[i].innerHTML) - 3 ;
						listYear[i].style.left = -90+"px";
					}
				}
			}
 
		</script>
	</head>
 
	<body onload="init()">
 
	</body>
</html>

le texte défile de façon horizontal, mais facilement modifiable et automatisable :)

22/06/2009, 15h20
laurentSc

Est-on censé voir quelque chose ? Car j'ai récupéré ce code et l'ai exécuté et il ne se passe rien...
22/06/2009, 15h50
le_chomeur

tu as testé sous IE ... en local ....

javascript bloqué tu dois l'autoriser ;)
22/06/2009, 16h10
laurentSc

C'est vrai que je suis en IE ; comment le sais-tu ?
Et d'autre part, où se trouve la gestion du javascript (et ce qui est bizarre, c'est que d'autres programmes en javascript peuvent tourner en local)
22/06/2009, 16h18
le_chomeur

Lorsque tu copie/colle le contenu cité plus haut, tu l'enregistres dans un fichier .html

lorsque tu le lance, tu as une alert sécurité juste en dessous de la barre d'adresse de ton navigateur ( en dessous de l'url ) jaune, click dessus et autorise la page :)

toujours faire le distinguo entre site internet local via localhost et un script exécuté directement via c:\ ... :)
22/06/2009, 16h49
laurentSc

OK, mais j'ai déjà fait ça (et d'ailleurs, d'autres scripts en javascript tournent sans problème); es-tu donc sûr du script que tu m'as passé ?
22/06/2009, 17h18
le_chomeur

tu m'avais mis le doute ^^

copier/coller exacte de ce que j'ai posté plus haut

- IE6 : OK
- IE7 : OK
- IE8 : OK
- FF3 : OK
- chromde : OK
- safari : OK

:mrgreen: l'erreur ne vient donc pas du script
22/06/2009, 17h32
laurentSc

Sur mon poste, j'ai IE6 et FF2, mais que dalle ; et pour être sûr, je l'ai aussi transféré sur internet, mais pas mieux. :cry:
23/06/2009, 08h56
le_chomeur

tu ne vois même pas les bloc vert et rouge ?
si oui , passe ton curseur sur les bloc rouge :)
23/06/2009, 09h18
laurentSc

Non, juste une page complètement blanche...:(
23/06/2009, 09h22
le_chomeur

alors la :calim2:

Essaye sous firefox , mais j'ai effectué tous les tests cité au dessus ...

la je ne peux plus grand chose si cela ne fonctionne pas :-/