breves déroulantes ne fonctionnant pas sous tous les navigateurs [Résolu]

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

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 :

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 :

+"px"

sur les lignes

Code :

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 :

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