Défilement texte

Version imprimable

Défilement texte

Bonsoir !

J'ai un petit soucis avec une fonction javascript qui permet de faire défiler un texte dans une div en jouant avec le "top" dans le style.
Voilà le code du script :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <script language="javascript" type="text/javascript"> // Script pour le défilement de la description de l'image var Timer; var Pas = 3; function moveLayer(Sens, Contenu, Support) { Objet=document.getElementById("contenu1"); if(parseInt(Objet.style.top) + (Pas*Sens)>0) { clearTimeout(Timer); } else { if(parseInt(Objet.style.top) + (Pas*Sens)<-(Objet.offsetHeight-document.getElementById("support1").offsetHeight)) { clearTimeout(Timer); } else { Objet.style.top = (parseInt(Objet.style.top) + (Pas*Sens)) + "px"; } } Timer = setTimeout("moveLayer(" + Sens + ");", 30); } </script>
Voilà mes div :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <div class="expo_description" id="support1" style="position:relative; width:10%; height:60; overflow:hidden;"> // div contenant le texte a defile <div id="contenu1" style="width:90%; position:relative; top:0;"> test<br /> test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br /> test<br />test<br />test<br />test<br />test<br /> </div> // div contenant les images up et down pour le defilement du texte <div style="width:10%; height:60; position:absolute; right:0; top:0;"> <img onMouseOver="moveLayer(1, 'contenu1', 'support1');" onMouseOut="clearTimeout(Timer);" src="css/img/slideup.gif" style="cursor:pointer; position:absolute; right:0; top:0;" alt="" /> <img onMouseOver="moveLayer(-1, 'contenu1', 'support1');" onMouseOut="clearTimeout(Timer);" src="css/img/slidedown.gif" style="cursor:pointer; position:absolute; right:0; bottom:0;" alt="" /> </div> </div>
J'ai donc une div principale nommée "support1" qui va encadrer le reste pour éviter que le texte sorte de la div, et j'ai une sous-div nommée "contenu1" qui va contenir le texte a défilé.
Ces 2 codes fonctionnent à merveille (vous pouvez tester).

Le soucis étant que je vais avoir plusieurs de ces memes div dans une meme page et que donc il faut que je différencie les id des div (d'où le passage en parametre dans la fonction de 'contenu1' et 'support1'.
Dans le script on changera donc
Code:

1 2 3 4 5 6 ... Objet=document.getElementById("contenu1"); ... if(parseInt(Objet.style.top) + (Pas*Sens)<-(Objet.offsetHeight-document.getElementById("support1").offsetHeight)) { ...
par
Code:

1 2 3 4 5 6 ... Objet=document.getElementById(Contenu); ... if(parseInt(Objet.style.top) + (Pas*Sens)<-(Objet.offsetHeight-document.getElementById(Support).offsetHeight)) { ...
Et là, probleme !
Le défilement se fait toujours mais cran par cran même si on laisse la souris sur l'image.
Je ne vois vraiment pas d'où vient le probleme, j'ai fait des alert de contenu et support et on trouve bien "contenu1" et "support1" (normal puisque ça déroule quand meme).
De plus une erreur javascript s'affiche dans le 2eme code (mais pas dans le premier).

Si vous pouviez m'éclairer :/

Merci

27/11/2007, 20h22
Sheriff

bonjour !
je n'ai pas testé, mais...
pourquoi la fonction moveLayer() ne prend-elle qu'un seul paramètre dans le setTimeout() ?
à plus

salut
je crois que le problème vient du setTimeout()
j'ai essayé de passer des paramètres, mais ça génère des erreurs ; du coup, j'ai essayé de donner des id numérotés à mes div, et passer juste leur numéro en paramètre : résultat, ça fonctionne impec chez moi. voici le code

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
<html>
	<head>
		<script language="javascript" type="text/javascript">
// Script pour le défilement de la description de l'image
var Timer;
var Pas = 3;
function moveLayer(Sens, Numero) {
	Objet=document.getElementById("contenu"+Numero);
    if(parseInt(Objet.style.top) + (Pas*Sens)>0)  {
		clearTimeout(Timer);	
	}
	else {
		 if(parseInt(Objet.style.top) + (Pas*Sens)<-(Objet.offsetHeight-document.getElementById("support"+Numero).offsetHeight)) {
			clearTimeout(Timer);
		}
		else {
			Objet.style.top = (parseInt(Objet.style.top) + (Pas*Sens)) + "px";
		}
	}
	Timer = setTimeout("moveLayer(" + Sens + ", " + Numero + ");", 30);
}
</script>
	</head>
	<body>
 
<div class="expo_description" id="support1" style="position:relative; width:10%; height:60; overflow:hidden;">
             // div contenant le texte a defile
	<div id="contenu1" style="width:90%; position:relative; top:0;">
		test<br />
        test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />		 		
		test<br />test<br />test<br />test<br />test<br />
	</div>
             // div contenant les images up et down pour le defilement du texte
	<div style="width:10%; height:60; position:absolute; right:0; top:0;">
		<img onMouseOver="moveLayer(1, '1');" onMouseOut="clearTimeout(Timer);" 
					src="css/img/slideup.gif" style="cursor:pointer;" alt="" />
		<img onMouseOver="moveLayer(-1, '1');" onMouseOut="clearTimeout(Timer);"
					src="css/img/slidedown.gif" style="cursor:pointer;" alt="" />		
	</div>
</div>
<br><br><br>
<div class="expo_description" id="support2" style="position:relative; width:10%; height:60; overflow:hidden;">
             // div contenant le second texte a defile
	<div id="contenu2" style="width:90%; position:relative; top:0;">
		test1<br />
        test1<br />test1<br />test1<br />test1<br />test1<br />test1<br />test1<br />test1<br />test1<br />		 		
		test1<br />test1<br />test1<br />test1<br />test1<br />
	</div>
             // div contenant les images up et down pour le defilement du second texte
	<div style="width:10%; height:60; position:absolute; right:0; top:0;">
		<img onMouseOver="moveLayer(1, '2');" onMouseOut="clearTimeout(Timer);" 
					src="css/img/slideup.gif" style="cursor:pointer;" alt="" />
		<img onMouseOver="moveLayer(-1, '2');" onMouseOut="clearTimeout(Timer);"
					src="css/img/slidedown.gif" style="cursor:pointer;" alt="" />		
	</div>
</div>
<br><br><br>
<div class="expo_description" id="support3" style="position:relative; width:10%; height:60; overflow:hidden;">
             // div contenant le troisième texte a defile
	<div id="contenu3" style="width:90%; position:relative; top:0;">
		test2<br />
        test2<br />test2<br />test2<br />test2<br />test2<br />test2<br />test2<br />test2<br />test2<br />		 		
		test2<br />test2<br />test2<br />test2<br />test2<br />
	</div>
             // div contenant les images up et down pour le defilement du second texte
	<div style="width:10%; height:60; position:absolute; right:0; top:0;">
		<img onMouseOver="moveLayer(1, '3');" onMouseOut="clearTimeout(Timer);" 
					src="css/img/slideup.gif" style="cursor:pointer;" alt="" />
		<img onMouseOver="moveLayer(-1, '3');" onMouseOut="clearTimeout(Timer);"
					src="css/img/slidedown.gif" style="cursor:pointer;" alt="" />		
	</div>
</div>
	</body>
</html>

28/11/2007, 23h36
mastamx

Merci beaucoup pour tes réponses, la premiere m'a permis de résoudre mon problème (ah les erreurs d'inattention ;) ).
Et j'en suis arrivé à peu près au même résultat que dans ta deuxième réponse, en passant les paramètres entierement. Mais je vais surement faire comme tu le proposes en ne passant que le numéro, ça me parait un peu plus propre.

Merci encore,
Problème résolu !
30/11/2007, 15h08
Sheriff

et le tag :resolu: alors ?