Infobulle et compatibilité

**thegreatbato** · 15/02/2007, 10h51

Bonjour !

Voilà j'ai quelques petits problèmes pour ce qui est d'un script JavaScript. Il me dit que l'objet event n'est pas défini pour ce qui est de Firefox.

Alors j'ai quelques petites questions. Existe t'il un outil pour vérifier le script JavaScript en fonction de tous les navigateurs existants ? Ou pourrais-je trouver la documentation en fonction de chacun de ces navigateurs ? Pourriez vous m'aider pour corriger le code foireux ? Voici le code :

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
 
<script language = "javascript" type="text/javascript">
<!--
ContentInfo = "";
var mouse_X;
var mouse_Y;
var tip_active = 0;
var agt=navigator.userAgent.toLowerCase();
var is_opera = (agt.indexOf("opera") != -1);
var is_mac = (agt.indexOf("mac")!=-1);
var is_konq = (agt.indexOf('konqueror') != -1);
var is_safari = ((agt.indexOf('safari')!=-1)&&(agt.indexOf('mac')!=-1))?true:false;
var is_khtml  = (is_safari || is_konq);
var is_gecko = ((!is_khtml)&&(navigator.product)&&(navigator.product.toLowerCase()=="gecko"))?true:false;
var is_fb = ((agt.indexOf('mozilla/5')!=-1)&&(agt.indexOf('spoofer')==-1)&&(agt.indexOf('compatible')==-1)&&(agt.indexOf('opera')==-1)&&(agt.indexOf('webtv')==-1)&&(agt.indexOf('hotjava')==-1)&&(is_gecko) && (navigator.vendor=="Firebird"));
var is_fx = ((agt.indexOf('mozilla/5')!=-1) && (agt.indexOf('spoofer')==-1)&&(agt.indexOf('compatible')==-1)&&(agt.indexOf('opera')==-1)&&(agt.indexOf('webtv')==-1)&&(agt.indexOf('hotjava')==-1)&&(is_gecko)&&((navigator.vendor=="Firefox")||(agt.indexOf('firefox')!=-1)));
var is_moz = ((agt.indexOf('mozilla/5')!=-1)&&(agt.indexOf('spoofer')==-1)&&(agt.indexOf('compatible')==-1)&&(agt.indexOf('opera')==-1)&&(agt.indexOf('webtv')==-1)&&(agt.indexOf('hotjava')==-1)&&(is_gecko)&&(!is_fb)&&(!is_fx)&&((navigator.vendor=="")||(navigator.vendor=="Mozilla")||(navigator.vendor=="Debian")));
var is_nav = ((agt.indexOf('mozilla')!=-1)&&(agt.indexOf('spoofer')==-1)&&(agt.indexOf('compatible') == -1)&&(agt.indexOf('opera')==-1)&& (agt.indexOf('webtv')==-1)&&(agt.indexOf('hotjava')==-1)&&(!is_khtml)&&(!(is_moz))&&(!is_fb) && (!is_fx));
var is_ie = ((agt.indexOf('msie') != -1)&&(!is_opera)&&(!is_khtml));
if (!is_ie) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;
 
function update_tip_pos()
{
		document.getElementById('ToolTip').style.left = mouse_X + 20;
		document.getElementById('ToolTip').style.top  = mouse_Y;
}
 
function getMouseXY(e) 
{
	if (is_ie || is_fb || is_fx || is_moz || is_gecko) 
	{ // grab the x-y pos.s if browser is IE
		mouse_X = event.clientX + document.body.scrollLeft;
		mouse_Y = event.clientY + document.body.scrollTop;
	}
	else 
	{ // grab the x-y pos.s if browser is NS
		mouse_X = e.pageX;
		mouse_Y = e.pageY;
	}
	if (mouse_X < 0){mouse_X = 0;}
	if (mouse_Y < 0){mouse_Y = 0;}
	if(tip_active)
	{
		update_tip_pos();
	}
}
 
function EnterContent(TTitle, TContent)
{
	ContentInfo = '<table width="240" border="0" cellspacing="0" cellpadding="0"><tr><td width="15" height="15" class="idx_h_g"></td><td height="15" class="idx_h"></td><td width="15" height="15" class="idx_h_d"></td></tr>'+
				  '<tr><td width="15" class="idx_g"></td><td><table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#FFFFFF">'+
				   '<tr><td class="tooltiptitle" align="center">'+TTitle+'<hr class="normal" /></td></tr>'+
				   '<tr><td class="tooltiptext">'+TContent+'</td></tr>'+
			       '</table></td><td width="15" class="idx_d"></td></tr><tr><td width="15" height="15" class="idx_b_g"></td><td height="15" class="idx_b"></td><td width="15" height="15" class="idx_b_d"></td></tr></table>'
}
function tip_it(which, TContent)
{
	if(which)
	{
		update_tip_pos();
		tip_active = 1;
		document.getElementById('ToolTip').style.visibility = "visible";
		EnterContent('Informations Complémentaires', TContent);
		document.getElementById('ToolTip').innerHTML = ContentInfo;
	}
	else
	{
		tip_active = 0;
		document.getElementById('ToolTip').style.visibility = "hidden";
	}
}
//-->
</script>

**Matthieu2000** · 15/02/2007, 12h23

Existe t'il un outil pour vérifier le script JavaScript en fonction de tous les navigateurs existants ?

Code :

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

if (is_ie || is_fb || is_fx || is_moz || is_gecko)

Il est déjà dans ton code!

**thegreatbato** · 15/02/2007, 12h30

non c'est pas ça que je voulais dire. Je voulais dire un programme / script qui vérifie si le script est correct en fonction du navigateur et non pas juste savoir a quel navigateur on a a faire

**Auteur** · 15/02/2007, 13h10

bonjour,

avec Firefox l'objet event doit être un paramètre de la fonction :

Remplace

Code javascript :

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

1
2
3
 
if (!is_ie) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;

par

Code html :

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

1
2
 
<body onmousemove="getMouseXY(event)">

c'est plus efficace et au moins c'est compatible avec tous les navigateurs

-----------

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
 
function getMouseXY(e) 
{
	if (is_ie || is_fb || is_fx || is_moz || is_gecko) 
	{ // grab the x-y pos.s if browser is IE
		mouse_X = event.clientX + document.body.scrollLeft;
		mouse_Y = event.clientY + document.body.scrollTop;
	}
	else 
	{ // grab the x-y pos.s if browser is NS
		mouse_X = e.pageX;
		mouse_Y = e.pageY;
	}
(..........)
}

ton test est foireux : dans ce cas event n'est connu que de IE : en effet contrairement à Firefox, event est un objet de window. Donc pour moi le test serait le suivant (j'ai mis en commentaire le code erroné) :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
     //if (is_ie || is_fb || is_fx || is_moz || is_gecko) 
     if (is_ie) 
	{ // grab the x-y pos.s if browser is IE
		mouse_X = event.clientX + document.body.scrollLeft;
		mouse_Y = event.clientY + document.body.scrollTop;
	}
	else 
	{ // grab the x-y pos.s if browser is NS
		mouse_X = e.pageX;
		mouse_Y = e.pageY;
	}

Envoyé par thegreatbato

non c'est pas ça que je voulais dire. Je voulais dire un programme / script qui vérifie si le script est correct en fonction du navigateur et non pas juste savoir a quel navigateur on a a faire

tu n'as pas le choix tu dois tester ton code avec tous les navigateurs

: je crois que tu peux faire des tests en ligne, mais j'ai oublié le nom du site

**thegreatbato** · 15/02/2007, 14h41

Voilà j'ai déjà résolu une partie du problème mais il y a de nouveau un problème sur firefox. L'infobulle s'affiche mais je n'arrive pas a modifier le "style.left" et le "style.top". Je comprends pas pourquoi ça marche bien sur IE et pas sur firefox.

Voilà le html :

Code :

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

1
2
3
 
<body class="normal" onmousemove="getMouseXY(event)">
<div id="ToolTip"></div>

Le css :

Code :

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

#ToolTip{position:absolute; z-index:4; visibility:hidden;}

Et le javascript :

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
112
113
114
115
 
ContentInfo = "";
var mouse_X;
var mouse_Y;
var e;
var tip_active = 0;
var agt=navigator.userAgent.toLowerCase();
var is_opera = (agt.indexOf("opera") != -1);
/*var is_mac = (agt.indexOf("mac")!=-1);*/
var is_konq = (agt.indexOf('konqueror') != -1);
var is_safari = ((agt.indexOf('safari')!=-1)&&(agt.indexOf('mac')!=-1))?true:false;
var is_khtml  = (is_safari || is_konq);
/*var is_gecko = ((!is_khtml)&&(navigator.product)&&(navigator.product.toLowerCase()=="gecko"))?true:false;
var is_fb = ((agt.indexOf('mozilla/5')!=-1)&&(agt.indexOf('spoofer')==-1)&&(agt.indexOf('compatible')==-1)&&(agt.indexOf('opera')==-1)&&(agt.indexOf('webtv')==-1)&&(agt.indexOf('hotjava')==-1)&&(is_gecko) && (navigator.vendor=="Firebird"));
var is_fx = ((agt.indexOf('mozilla/5')!=-1) && (agt.indexOf('spoofer')==-1)&&(agt.indexOf('compatible')==-1)&&(agt.indexOf('opera')==-1)&&(agt.indexOf('webtv')==-1)&&(agt.indexOf('hotjava')==-1)&&(is_gecko)&&((navigator.vendor=="Firefox")||(agt.indexOf('firefox')!=-1)));
var is_moz = ((agt.indexOf('mozilla/5')!=-1)&&(agt.indexOf('spoofer')==-1)&&(agt.indexOf('compatible')==-1)&&(agt.indexOf('opera')==-1)&&(agt.indexOf('webtv')==-1)&&(agt.indexOf('hotjava')==-1)&&(is_gecko)&&(!is_fb)&&(!is_fx)&&((navigator.vendor=="")||(navigator.vendor=="Mozilla")||(navigator.vendor=="Debian")));
var is_nav = ((agt.indexOf('mozilla')!=-1)&&(agt.indexOf('spoofer')==-1)&&(agt.indexOf('compatible') == -1)&&(agt.indexOf('opera')==-1)&& (agt.indexOf('webtv')==-1)&&(agt.indexOf('hotjava')==-1)&&(!is_khtml)&&(!(is_moz))&&(!is_fb) && (!is_fx));*/
var is_ie = ((agt.indexOf('msie') != -1)&&(!is_opera)&&(!is_khtml));
 
function update_tip_pos()
{
 	document.getElementById('ToolTip').style.left = mouse_X + 5;
	document.getElementById('ToolTip').style.top  = mouse_Y + 10;
}
 
function getMouseXY(e) 
{
	if(is_ie)
	{
		e = event;
		mouse_X = e.clientX + document.body.scrollLeft;
		mouse_Y = e.clientY + document.body.scrollTop;
	}
	else
	{
		mouse_X = e.pageX + document.body.scrollLeft;
		mouse_Y = e.pageY + document.body.scrollTop;
	}
 
	if (mouse_X < 0){mouse_X = 0;}
	if (mouse_Y < 0){mouse_Y = 0;}
	if(tip_active)
	{
		document.getElementById('ToolTip').style.left = mouse_X + 5;
		document.getElementById('ToolTip').style.top  = mouse_Y + 10;
	}
}
 
function EnterContent(TTitle, TContent)
{
	ContentInfo = '<table width="240" border="0" cellspacing="0" cellpadding="0"><tr><td width="15" height="15" class="idx_h_g"></td><td height="15" class="idx_h"></td><td width="15" height="15" class="idx_h_d"></td></tr>'+
				  '<tr><td width="15" class="idx_g"></td><td><table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#FFFFFF">'+
				   '<tr><td class="tooltiptitle" align="center">'+TTitle+'<hr class="normal" /></td></tr>'+
				   '<tr><td class="tooltiptext">'+TContent+'</td></tr>'+
			       '</table></td><td width="15" class="idx_d"></td></tr><tr><td width="15" height="15" class="idx_b_g"></td><td height="15" class="idx_b"></td><td width="15" height="15" class="idx_b_d"></td></tr></table>'
	return ContentInfo;
}
function tip_it(which, TContent,file,id)
{
	if(which)
	{
		update_tip_pos();
		tip_active = 1;
		var xhr = getXhr();
		document.getElementById('ToolTip').style.visibility = "visible";
		document.getElementById('ToolTip').innerHTML = EnterContent('Informations Complémentaires', 'Chargement ...');
		if(xhr!=null)
		{
			xhr.onreadystatechange = actualiser(TContent,file,id,xhr);
			xhr.open("GET","test.xml",true);
			xhr.send(null);
		}
	}
	else
	{
		tip_active = 0;
		document.getElementById('ToolTip').style.visibility = "hidden";
	}
}
function actualiser(TContent,file,id,xhr)
{
	if(xhr.readyState == 4 && xhr.status == 200)
	{
		var id = xhr.responseXML.getAttribute("id");
		var nom = xhr.responseXML.getAttribute("nom");
		var prenom = xhr.responseXML.getAttribute("prenom");
		var adresse = xhr.responseXML.getAttribute("adresse");
		var date = xhr.responseXML.getAttribute("date");
		var Content = '<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td>ID</td><td>'+id+'</td></tr><tr><td>Nom</td><td>'+nom+'</td></tr><tr><td>Prénom</td><td>'+prenom+'</td></tr><tr><td>Adresse</td><td>'+adresse+'</td></tr><tr><td>Date d\'inscription</td><td>'+date+'</td></tr></table>';
		document.getElementById('ToolTip').innerHTML = EnterContent('Informations Complémentaires', Content);
	}
}
// JavaScript Document
function getXhr()
{
	var xhr = null; 
	if(window.XMLHttpRequest) // Firefox et autres
  	  xhr = new XMLHttpRequest(); 
	else if(window.ActiveXObject)
	{ // Internet Explorer 
		try 
		{
			xhr = new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch (e) 
		{
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	else 
	{ // XMLHttpRequest non supporté par le navigateur 
		xhr = false; 
	} 
	return xhr
}

**Auteur** · 15/02/2007, 15h22

Code :

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

1
2
3
 
document.getElementById('ToolTip').style.left = mouse_X + 5;
	document.getElementById('ToolTip').style.top  = mouse_Y + 10;

En précisant l'unité ?

Code :

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

1
2
3
 
document.getElementById('ToolTip').style.left = mouse_X + 5+"px";
document.getElementById('ToolTip').style.top  = mouse_Y + 10+"px";

Ces lignes apparîssent deux fois dans ton code : update_tip_pos() et getMouseXY()

**thegreatbato** · 15/02/2007, 15h54

Oh merci t'est un chou

après 6 heures de recherche intensive tu me donne la réponse si facilement, alors là j'ai l'air très bête

Mais enfin merci beaucoup !

Infobulle et compatibilité

JavaScript

Vue hybride

Discussions similaires

Partager

Partager