Rendre un simple script compatible Firefox [Résolu]

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,

Citation:

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

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 :

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 !

mekal · 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) { }

Goltar · 14/03/2011, 06h54

Bein voilà!
Encore merci
J'avais testé

Code :

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

if(teletext) { }

sous IE ça marchais, pas sous Firefox.

ABCIWEB · 14/03/2011, 17h13

Citation:

Envoyé par Goltar

Bein voilà!
Encore merci
J'avais testé

Code :

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

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

13/03/2011, 11h21	#2
Nesmontou Modérateur Benjamin PREVOT Architecte de système d'information Inscription : septembre 2004 Messages : 1 568 Détails du profil Informations personnelles : Nom : Benjamin PREVOT Âge : 30 Localisation : France, Nord (Nord Pas de Calais) Informations professionnelles : Activité : Architecte de système d'information Secteur : Finance Informations forums : Inscription : septembre 2004 Messages : 1 568 Points : 2 493 Points : 2 493	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. __________________ Si vous ne pouvez expliquer un concept à un enfant de six ans, c'est que vous ne le comprenez pas complètement. Albert EINSTEIN F.A.Q. : Java, PHP, (X)HTML / CSS N'oubliez pas de cliquer sur le bouton Résolu en bas de page quand vous avez obtenu une solution à votre problème
	00

13/03/2011, 11h27	#3
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 805 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 805 Points : 35 807 Points : 35 807	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 ? __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

13/03/2011, 12h21	#4
Goltar Nouveau Membre du Club Patrick Algrain Développeur Web Débutant Inscription : mars 2011 Messages : 63 Détails du profil Informations personnelles : Nom : Patrick Algrain Localisation : Belgique Informations professionnelles : Activité : Développeur Web Débutant Secteur : Boutique - Magasin Informations forums : Inscription : mars 2011 Messages : 63 Points : 25 Points : 25	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
	00

13/03/2011, 17h02	#8
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 805 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 805 Points : 35 807 Points : 35 807	@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'); __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

13/03/2011, 19h22	#12
Goltar Nouveau Membre du Club Patrick Algrain Développeur Web Débutant Inscription : mars 2011 Messages : 63 Détails du profil Informations personnelles : Nom : Patrick Algrain Localisation : Belgique Informations professionnelles : Activité : Développeur Web Débutant Secteur : Boutique - Magasin Informations forums : Inscription : mars 2011 Messages : 63 Points : 25 Points : 25	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 !
	00

13/03/2011, 12h33	#5
Goltar Nouveau Membre du Club Patrick Algrain Développeur Web Débutant Inscription : mars 2011 Messages : 63 Détails du profil Informations personnelles : Nom : Patrick Algrain Localisation : Belgique Informations professionnelles : Activité : Développeur Web Débutant Secteur : Boutique - Magasin Informations forums : Inscription : mars 2011 Messages : 63 Points : 25 Points : 25	@ Mesmontou: Firebug n'est pas encore compatible Firefox 4
	00

13/03/2011, 16h58	#7
Goltar Nouveau Membre du Club Patrick Algrain Développeur Web Débutant Inscription : mars 2011 Messages : 63 Détails du profil Informations personnelles : Nom : Patrick Algrain Localisation : Belgique Informations professionnelles : Activité : Développeur Web Débutant Secteur : Boutique - Magasin Informations forums : Inscription : mars 2011 Messages : 63 Points : 25 Points : 25	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.
	00

13/03/2011, 21h11	#14
Goltar Nouveau Membre du Club Patrick Algrain Développeur Web Débutant Inscription : mars 2011 Messages : 63 Détails du profil Informations personnelles : Nom : Patrick Algrain Localisation : Belgique Informations professionnelles : Activité : Développeur Web Débutant Secteur : Boutique - Magasin Informations forums : Inscription : mars 2011 Messages : 63 Points : 25 Points : 25	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
	00

13/03/2011, 21h49	#15
ABCIWEB Membre Expert Inscription : septembre 2010 Messages : 1 240 Détails du profil Informations forums : Inscription : septembre 2010 Messages : 1 240 Points : 1 562 Points : 1 562	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) { } __________________ - Réalisations - Interface graphique : génération en javascript d'objets défilants, texte et/ou images, mode horizontal ou vertical.
	00

14/03/2011, 06h54	#16
Goltar Nouveau Membre du Club Patrick Algrain Développeur Web Débutant Inscription : mars 2011 Messages : 63 Détails du profil Informations personnelles : Nom : Patrick Algrain Localisation : Belgique Informations professionnelles : Activité : Développeur Web Débutant Secteur : Boutique - Magasin Informations forums : Inscription : mars 2011 Messages : 63 Points : 25 Points : 25	Bein voilà! Encore merci J'avais testé Code : Sélectionner tout - Visualiser dans une fenêtre à part if(teletext) { } sous IE ça marchais, pas sous Firefox.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email