Discussion :

[TERRIBLE]

Toujours dans le cadre de la réalisation d'un site multi-navigateurs je viens de développer en JS un petit programme qui fait défiler vericalement un texte
Pour ce faire j'ai deux "div" spécifiques, l'un qui délimite le fond l'autre dans lequel le texte est inscrit

Code :

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

1
2
3
4
5
 
<div id="promo_bloc">
<div id="promo_texte">
</div>
</div>

un fichier css qui définit les caractèristiques de positionnement

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
 
#promo_bloc
{
position:absolute;
top:2%;
left:0%;
width:100%;
height:30%;
background-color:#2d2768;
overflow:hidden;
clip:rect(0% 100% 30% 0%);
}
 
 
#promo_texte
{
display:block;
position:absolute;
top:30%;
left:3%;
right:3%;
color:#ffcc00;
}

et enfin le programme JS qui est lancé par un "onload" et qui assure la rotation du texte

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
 
var positionPromotext=30;
function promotion()
{
obj2=document.getElementById("promo_texte");
	var promo_texte="";;
	switch (langue)
	{
 
		case"F":
		langue="F";
		promo_texte=promo_texte_F;
		break;
 
		case"E":
		promo_texte=promo_texte_E;
		break;
 
		case"D":
		promo_texte=promo_texte_D;
		break;
 
		case"A":
		promo_texte=promo_texte_A;
 
		case"I":
		promo_texte=promo_texte_I;
		break;
		default:
		break;
 
 
	}
 
obj2.innerHTML= promo_texte;
		{
 
		positionPromotext=positionPromotext- 0.5;
			obj2.style.top=positionPromotext  +"%";
		}
 
if (positionPromotext==-50)
	{positionPromotext=30;
	}
	setTimeout("promotion()",100);
 
}

Ce programme affiche correctement le texte su IE par contre avec nestcape et fireFox le défilement n'est pas fluide et le texte clignote


Avez-vous une solution à ce problème ?
par avance merci

[javatwister]

Code :

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

obj2.innerHTML= promo_texte;

cette ligne provoque certainement le clignotement dont tu parles!

[TERRIBLE]

que me proposes-tu?
mettre directement le texte dans le "div"?

[denisC]

que me proposes-tu?
mettre directement le texte dans le "div"?

Séparer l'initialisation du texte (en fonction de la langue) de son défilement. Ce sont deux choses complétement séparée, une à appeller uniquement au chargement de la page, et l'autre à faire tourner en continu.

[SpaceFrog]

les défilements ont un meilleur rendu dans un div en overflow hidden et en gérant le scrollTop ... pas de clignotement ...
juste une différence de vitesse en focntion du navigateur ...