Discussion :

[Phiss]

Bonjour,

Comme je le dis dans le sujet de mon post, j'ai une application qui affiche des brèves dans une div et ces brèves tournent en défilant.

Voici le code source.

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
<!-- DEBUT DU SCRIPT -->
 
<script language="JavaScript"> 
scroll_message = new Array;
scroll_message[0]='<strong>test1:</strong> 11:03:45 - Voici un message bref. Comment va t on le gérer? ';
scroll_message[1]='<strong>test2:</strong> 11:04:01 - Et celui la? ';
scroll_message[2]='<strong>test1:</strong> 11:04:20 - Troisieme ';
scroll_message[3]='<strong>test4:</strong> 11:04:52 - Quatrieme membre, quatrieme message. Logique non? ';
scroll_message[4]='<strong>test3:</strong> 11:05:10 - encore un autre ';
 
function d(texte)
	{
	document.write(texte);
	}
 
d('<DIV ID="scroll_relativ">');
d('<DIV ID="scroll_cadre">');
d('<div id="scroller_1">'+scroll_message[0]+'</DIV>');
d('<div id="scroller_2">'+scroll_message[1]+'</DIV>');
d('</DIV></DIV>');
scroll_mode =1;
scroll_actuel = 0;
function scroll_start()
	{
	if(scroll_mode == 1)
		{
		scroller_haut = "scroller_1";
		scroller_bas = "scroller_2";
		scroll_mode = 0;
		}
	else
		{
		scroller_bas = "scroller_1";
		scroller_haut = "scroller_2";
		scroll_mode = 1;
		}
	scroll_nb_message = scroll_message.length-1;
	if(scroll_actuel == scroll_nb_message)
		scroll_suivant = 0;
	else
		scroll_suivant = scroll_actuel+1;
	if(document.getElementById)
		document.getElementById(scroller_bas).innerHTML = scroll_message[scroll_suivant];
	scroll_top = 0;
	if(document.getElementById)
		setTimeout("scroll_action()",750)
	}
 
function scroll_action()
	{
	scroll_top -= 1;
	document.getElementById(scroller_haut).style.top = scroll_top;
	document.getElementById(scroller_bas).style.top = scroll_top+80;
	if((scroll_top+80) > 0)
		setTimeout("scroll_action()",10)
	else
		scroll_stop()
	}
 
function scroll_stop()
	{
	scroll_actuel = scroll_suivant;
	scroll_start()
	}
window.onload = scroll_start;
</SCRIPT>

Pour les styles 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
#scroll_relativ
{
position:relative;
width:200px;
height:80px;
background-color:#b3b3b3;
}
#scroll_cadre
{
position:absolute;
width:192px;
height:72px;
top:4px;
left:4px;
clip:rect(0 192 72 0);
}
 
#scroller_1
{
position:absolute;
width:192px;
left:0px;
top:0px;
font-size:11px;
font-family:Verdana;
color:#000000;
text-decoration:none;
}
 
#scroller_2
{
position:absolute;
width:192px;
left:0pt;
top:100pt;
font-size:11px;
font-family:Verdana;
color:#000000;
text-decoration:none;
}

Donc pour résumé, sous IE et Opéra le script fonctionne bien. Les 5 brèves tournent en continu et défilent normalement.
Sous Firefox, Safari et Chrome, les brèves sont afficher les unes sur les autres (2 par deux) et ne défilent pas.

J'ai l'impression que la commande qui définit le point top des div scroller ne marche pas correctement.

Avez vous une idée?

Merci.

[Phiss]

J'ai remarqué que le bout de code marchait très bien si je le mettais seul sur une page.
Il doit y avoir un conflit avec d'autres scripts sur la page.
Je vais faire le tour.
Si j'ai d'autres questions je rouvrirais le post.

[Phiss]

Pour info j'ai résolu le problème en ajoutant

Code :

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

+"px"

sur les lignes

Code :

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

1
2
	document.getElementById(scroller_haut).style.top = scroll_top;
	document.getElementById(scroller_bas).style.top = scroll_top+80;

car la propriété top demande une unité de mesure.
Cela donne donc

Code :

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

1
2
	document.getElementById(scroller_haut).style.top = scroll_top+"px";
	document.getElementById(scroller_bas).style.top = scroll_top+80+"px";