Rendre un simple script compatible Firefox

**Goltar** · 13/03/2011, 09h52

Bonjour à tous,

Je reprend le développement d'un site après quelques années d'abstinence et bé! rien ne va plus, du à l'apparition d'une flopée d'interface Internet.
IE, Firefox, Netscape,... et j'en passe.
Je travaille sur un script tout simple d'affichage un peu fun, qui fonctionne parfaitement sur IE mais refuse obstinément de tourner sous Firefox.
Et malheureusement il faudrais qu'il le fasse...

Si quelqu'un pouvait me filer un coup de pouce ce serait sympa, d'avance merci

voici le 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
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<%@LANGUAGE="JAVASCRIPT" CODEPAGE="1252"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type=text/css>
    .telestyle {
	position:absolute;
	font-size:25pt;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-weight:normal;
	color:#FF6633;
	top:96px;
	left:110px;
	height:60px;
	width:600px; 
	filter:alpha(opacity=100);
	opacity:1.0;
	-moz-opacity: 1.0;
	font-variant: small-caps;
	background-position: center;
	line-height: 50px;
	visibility: visible;
	background-color: #FEF9F5;
    }
 
    </style>
</head>
 
    <script language="javascript1.5" type="text/javascript">
<!--
 
    var message = "Message d'Accueil"
    var character = 0;
    var to_print = "";
    var ypos = 96;
    var next = 0 ;
    var fade = 100 ;
	var fade2 = 1.0;
    var next_message = new Array() ;
    next_message[0] = "Et voici un Deuxième"
    next_message[1] = "Et pourquoi pas un troisième"
    next_message[2] = "et voici le dernier!."
	next_message[3] = "On revient à l'accueil"
    function doText(text) {
    if (document.all){
    if (character <= text.length - 1) {
    to_print += text.charAt(character);
    teletext.innerHTML = to_print;
    character++;
    }
    else
    scrollIt();
    }
    setTimeout("doText(message)", 20);
    }
    function scrollIt() {
    if (ypos >= 0) {
    ypos -= 1;
    fade -= 3;
	fade2 -= 0.03;
    if (ypos < 5) {
    teletext.innerHTML = "" ;
    }
    }
    else {
    ypos = 96;
    character = 0;
    to_print = "";
    nextMessage();
    fade = 100;
	fade2 = 1.0;
    }
    teletext.style.top = ypos;
    teletext.filters.alpha.opacity = fade;
	teletext.style.opacity = fade2;
    }
    function nextMessage() {
    message = next_message[next]
    if (next == 3) {
    next = 0;
    }
    else
    next++;
    }
 // -->
 
    </script>
    <body onload="doText(message)"; >
    <div id="teletext"  class="telestyle"> </div>
    </body>
</html>

**Nesmontou** · 13/03/2011, 11h21

Bonjour,

Tu pourrais nous dire ce qui ne fonctionne pas ?

message d'erreur
comportement erroné
...

Sinon, pour t'aider dans les développements, tu peux installer le plug-in Firebug pour Firefox.

**Bovino** · 13/03/2011, 11h27

Code :

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

teletext.innerHTML = to_print;

avant d'utiliser un objet HTML, la moindre des choses est de le définir

teletext c'est quoi pour JavaScript ?

**Goltar** · 13/03/2011, 12h21

Bonjour,

@Bovino:

Code :

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

teletext.innerHTML = to_print;

teletex étant l'ID de ma DIV
Suggererais-tu getElementbyID?
@Nesmontou:
il y a deux incompatibilités avec Firefox (Qui me donne pas d'erreur, mais ne tourne pas)
1) filter:alpha(opacity=100); (pur IE) pour Firefox il faut passer opacity:1.0;
2) justement teletex.innerHTML - InnerHTML n'est pas interprèté par Firefox

**Goltar** · 13/03/2011, 12h33

@ Mesmontou:

Firebug n'est pas encore compatible Firefox 4

**Eric2a** · 13/03/2011, 14h29

Salut,

Envoyé par Goltar

@Bovino: Suggererais-tu getElementbyID ?

On ne peux pas faire autrement.

Pour commençer, teletext doit être une variable globale.

Code :

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

var teletext;

Ensuite, on lui donne la valeur requise dans la fonction doText() qui est appelée au chargement de la page.

Code :

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

1
2
3
4
function doText(text) {
 teletext=getElementById('teletext');
 // Suite du code...
}

**Goltar** · 13/03/2011, 16h58

Merci,
Mais ça ne règle pas mon problème, même sans ta suggestion cela fonctionne parfaitement sous IE. (vas t'en savoir pourquoi ?

)

Je suppose que le document.all lui suffit
Mais je reconnais que getElementbyID serait plus adapté, mais ce n'est pas là que ça coince, je suis persuadé que c'est InnerHTML qui n'est pas interprèté correctement par Firefox.

**Bovino** · 13/03/2011, 17h02

@Goltar : oui, je préconisais bien l'utilisation de getElementById. Si IE (ou au moins certaines versions) est capable de référencer un objet HTML par son name et comme IE a tendance à confondre name et id, la syntaxe que tu as utilisée "fonctionne" avec IE (mais pas forcément toutes les versions), il s'agit d'un comportement non garantit et dépendant de l'interprétation du navigateur.

Attention aussi que la solution proposée par Eric2a comporte un oubli : getElementById est une méthode de l'objet document

Code :

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

teletext=document.getElementById('teletext');

**Eric2a** · 13/03/2011, 17h16

Envoyé par Bovino

Attention aussi que la solution proposée par Eric2a comporte un oubli : getElementById est une méthode de l'objet document

Code :

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

teletext=document.getElementById('teletext');

Merci pour la correction Bovino !

**Goltar** · 13/03/2011, 17h48

Merci beaucoup,
J'ai modifié le code comme suit:

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<%@LANGUAGE="JAVASCRIPT" CODEPAGE="1252"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type=text/css>
    .telestyle {
	position:absolute;
	font-size:25pt;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-weight:normal;
	color:#FF6633;
	top:96px;
	left:110px;
	height:60px;
	width:600px; 
	filter:alpha(opacity=100);
	opacity:1.0;
	-moz-opacity: 1.0;
	font-variant: small-caps;
	background-position: center;
	line-height: 50px;
	visibility: visible;
	background-color: #FEF9F5;
    }
 
    </style>
</head>
 
    <script language="javascript1.5" type="text/javascript">
<!--
 
    var message = "Message d'Accueil"
    var teletext;
	var character = 0;
    var to_print = "";
    var ypos = 96;
    var next = 0 ;
    var fade = 100 ;
	var fade2 = 1.0;
	var next_message = new Array() ;
    next_message[0] = "Et voici un Deuxième"
    next_message[1] = "Et pourquoi pas un troisième"
    next_message[2] = "et voici le dernier!."
	next_message[3] = "On revient à l'accueil"
    function doText(text) {
	teletext=document.getElementById('teletext');
    	if (teletext.all){
    if (character <= text.length - 1) {
    to_print += text.charAt(character);
    teletext.innerHTML = to_print;
    character++;
    }
    else
    scrollIt();
    }
    setTimeout("doText(message)", 20);
    }
    function scrollIt() {
    if (ypos >= 0) {
    ypos -= 1;
    fade -= 3;
	fade2 -= 0.03;
    if (ypos < 5) {
    teletext.innerHTML = "" ;
    }
    }
    else {
    ypos = 96;
    character = 0;
    to_print = "";
    nextMessage();
    fade = 100;
	fade2 = 1.0;
    }
    teletext.style.top = ypos;
    teletext.filters.alpha.opacity = fade;
	teletext.style.opacity = fade2;
    }
    function nextMessage() {
    message = next_message[next]
    if (next == 3) {
    next = 0;
    }
    else
    next++;
    }
 // -->
 
    </script>
    <body onload="doText(message)"; >
    <div id="teletext"  class="telestyle"> </div>
    </body>
</html>

Cela fonctionnes toujours parfaitement sous IE, mais sous Firefox...Bernique !!
Sans message d'erreur, ce qui m'agace encore plus !

Invité · 13/03/2011, 18h38

danss le script il y a une condition

Code :

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

1
2
 
if (teletext.all){

il me semble que c'est pour ie uniquement et si tu n'a pas de reaction de la part de firefox c'est surement parce que firefox zape cette partie et si firefox ne donne pas de message d'erreur c'est parce que il n'y en a pas il faudrait retirer cette condition

ps:
firebug fonction avec firefox 4

**Goltar** · 13/03/2011, 19h22

Merci Mekal,

En effet j'ai trouvé firebug 1.7 qui tourne +/- sous firefox 4.0

Et en effet si je vire

Code :

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

if (teletext.all){

sous firefox il affiche le premier message mais n'entre bien sûr pas dans la boucle de fading et ne va pas plus loin, ce qui est déjà une piste, mais il faut que je trouve un autre test !

**ABCIWEB** · 13/03/2011, 20h39

Voilà ton code fonctionnel sous IE et FF. J'ai viré la variable fade2 et indiqué les endroits où j'ai fait des corrections :

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
 
var message = "Message d'Accueil"
var teletext;
var character = 0;
var to_print = "";
var ypos = 96;
var next = 0 ;
var fade = 100 ;
var next_message = new Array() ;
next_message[0] = "Et voici un Deuxième";
next_message[1] = "Et pourquoi pas un troisième";
next_message[2] = "et voici le dernier!.";
next_message[3] = "On revient à l'accueil";
 
function doText(text) 
{
	teletext=document.getElementById('teletext');
 
	if (typeof teletext == "object")// correction ligne ci-contre
		{
			if (character <= text.length - 1) 
				{
					to_print += text.charAt(character);
					teletext.innerHTML = to_print;
					character++;
				}
			else
				scrollIt();
		}
		setTimeout("doText(message)", 20);
}
 
function scrollIt() 
{
	if (ypos >= 0) 
	{
		ypos -= 1;
		fade -= 3;
 
		if (ypos < 5) 
			{
				teletext.innerHTML = "" ;
			}
	}
	else 
	{
		ypos = 96;
		character = 0;
		to_print = "";
		nextMessage();
		fade = 100;
	}
	// corrections lignes ci-dessous
	teletext.style.top = ypos+'px';
 
	teletext.style.filter = "alpha(opacity:"+fade+")";
	teletext.style.KHTMLOpacity = fade/100;
	teletext.style.MozOpacity = fade/100;
	teletext.style.opacity = fade/100;
}
 
function nextMessage() 
{
	message = next_message[next];
	if (next == 3) 
		{
			next = 0;
		}
	else
		next++;
}
//-->
</script>
 
<style type=text/css>
    .telestyle {
	position:absolute;
	font-size:25pt;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-weight:normal;
	color:#FF6633;
	top:96px;
	left:110px;
	height:60px;
	width:600px; 
	filter:alpha(opacity=100);
	opacity:1.0;
	-moz-opacity: 1.0;
	font-variant: small-caps;
	background-position: center;
	line-height: 50px;
	visibility: visible;
	background-color: #FEF9F5;
    }
 
    </style>
</head>
 
    <body onload="doText(message)"; >
    <div id="teletext"  class="telestyle"> </div>
    </body>
</html>

Il en manquait pas beaucoup pour que ça fonctionne

**Goltar** · 13/03/2011, 21h11

Merci !!!!!!

J'aimerais comprendre, afin de mourir moins con !

Peut tu m'expliquer

Code :

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

if (typeof teletext == "object")

Et non seulement il est compatible Firefox, mais les autres aussi !

Chapeau bas messire !

Un grand merci

**ABCIWEB** · 13/03/2011, 21h49

Puisque teletext a été associé à document.getElementById, son type de valeur doit être un objet, donc je peux écrire

if(typeof teletext == "object") { } pour tester le retour

En étant moins strict on aurait pu tester simplement l'existence de la variable en faisant :

if(teletext) { }