Défilement texte

**mastamx** · 27/11/2007, 19h18

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 :

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
 
<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 :

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
 
<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 :

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

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 :

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

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

**Sheriff** · 27/11/2007, 20h22

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

**Sheriff** · 28/11/2007, 10h52

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 :

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
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>

++

**mastamx** · 28/11/2007, 23h36

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 !

**Sheriff** · 30/11/2007, 15h08

et le tag

alors ?

Défilement texte

JavaScript

Discussions similaires

Partager

Partager