Rendre un simple script compatible Firefox

Version imprimable

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... :cry:
Si quelqu'un pouvait me filer un coup de pouce ce serait sympa, d'avance merci

voici le script:

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

13/03/2011, 11h21
Nesmontou
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.
13/03/2011, 11h27
Bovino

Code:

teletext.innerHTML = to_print;

avant d'utiliser un objet HTML, la moindre des choses est de le définir :roll:
teletext c'est quoi pour JavaScript ?
13/03/2011, 12h21
Goltar

Bonjour,

@Bovino:

Code:

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
13/03/2011, 12h33
Goltar

@ Mesmontou:

Firebug n'est pas encore compatible Firefox 4 :cry:
13/03/2011, 14h29
Eric2a
Salut,

Citation:

Envoyé par Goltar

@Bovino: Suggererais-tu getElementbyID ?

On ne peux pas faire autrement.

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

Code:

var teletext;

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

1 2 3 4 function doText(text) { teletext=getElementById('teletext'); // Suite du code... }
13/03/2011, 16h58
Goltar

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 ? :calim2:) :)

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.
13/03/2011, 17h02
Bovino

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

teletext=document.getElementById('teletext');
13/03/2011, 17h16
Eric2a

Citation:

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:

teletext=document.getElementById('teletext');

:oops: Merci pour la correction Bovino !

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

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

13/03/2011, 18h38
Invité
danss le script il y a une condition
Code:

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
13/03/2011, 19h22
Goltar

Merci Mekal,

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

Et en effet si je vire

Code:

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 !

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:

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

13/03/2011, 21h11
Goltar

Merci !!!!!!

J'aimerais comprendre, afin de mourir moins con !

Peut tu m'expliquer

Code:

if (typeof teletext == "object")

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

Chapeau bas messire !

Un grand merci
13/03/2011, 21h49
ABCIWEB

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) { }
14/03/2011, 06h54
Goltar

Bein voilà!
Encore merci
J'avais testé

Code:

if(teletext) { }

sous IE ça marchais, pas sous Firefox.
14/03/2011, 17h13
ABCIWEB

Citation:

Envoyé par Goltar

Bein voilà!
Encore merci
J'avais testé

Code:

if(teletext) { }

sous IE ça marchais, pas sous Firefox.

Heu ... si ça fonctionnait sous Firefox, mais c'est la suite du code qui ne fonctionnait pas sous Firefox (le deuxième bloc de code que j'ai corrigé) ;)