[JQuery] Ajax et firefox

Version imprimable

Bonjour,

Le code ci-dessous ne fonctionne pas sous firefox et moyennement sous Opera. Il arrive même qu'il buggue sous IE.

J'aimerais donc savoir si quelqu'un pouvait m'aider à l'améliorer afin que celui soit supporté de maniére optimale par au moins ces 3 navigateurs.

Le but de ce code est d'afficher à coté du curseur, le profil de la personne que l'utilisateur survole.

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
 
function GetId(id)
{
  return document.getElementById(id);
}
 
var i=false; // La variable i nous dit si le profil est visible ou non
 
function move(e) {
  if(i) {  // Si le profil est visible, on calcul en temps reel sa position ideale
    if (navigator.appName!="Microsoft Internet Explorer") { // Si on est pas sous IE
      GetId("profil_survol").style.left=e.pageX + 5+"px";
      GetId("profil_survol").style.top=e.pageY + 10 +"px";
    }
    else { 
      if(document.documentElement.clientWidth>0) {
        GetId("profil_survol").style.left=event.x+document.documentElement.scrollLeft+5+"px";
        GetId("profil_survol").style.top=event.y+document.documentElement.scrollTop+10+"px";
      } 
      else {
        GetId("profil_survol").style.left=event.x+document.body.scrollLeft+5+"px";
        GetId("profil_survol").style.top=event.y+document.body.scrollTop+10+"px"; 
      }
    }
  }
}
 
function montre(text) {
  if(i==false) {
  GetId("profil_survol").style.visibility="visible"; // Si il est cacher (la verif n'est qu'une securité) on le rend visible.
  GetId("profil_survol").innerHTML = text; // on copie notre texte dans l'élément html
  i=true;
  }
}
 
function changeProfil(id_profil){
  if (id_profil==0){
    document.getElementById("profil_survol").innerHTML = "";
  }
  else{
    xhr = new XMLHttpRequest();
    xhr.open("get", "http://dunksession.free.fr/test.php?id_dunkeur=" + id_profil, false);
    xhr.send(null);
    montre(xhr.responseText);
  }
}
 
function cache() {
  if(i==true) {
    GetId("profil_survol").style.visibility="hidden"; // Si le profil est visible on la cache
    i=false;
  }
}
document.onmousemove=move; // dès que la souris bouge, on appelle la fonction move pour mettre à jour la position du profil.

Coté HTML cela donne ça

Code:

1
2
<a href="index.php?page=profil.php&profil=<?php echo $donneesprof['id_profil']  ?>'" onmouseover="changeProfil(<?php echo $donneesprof['id_profil']  ?>);" onmouseout="cache();"><?php echo $pseudo_d ;?></a><br />
      <div id="profil_survol"></div>

Merci.

01/09/2008, 14h28
Orvinfait

function move(e) et document.onmousemove=move;??

Dans ce dernier cas (e) = ?
01/09/2008, 16h37
Micke7

Ce code est un source que j'ai adapté pour mes besoins, et je dois avouer que cette derniére ligne me laisse aussi perplexe.
01/09/2008, 17h43
Orvinfait

Le problème ne vient pas de là. Comme j'utilise Javascript avec SVG un tel code ne passe pas d'où ma remarque erronée. Par contre en SVG il n'y a pas besoin de détecter le navigateur.

En Html il faut que tu adaptes ton code suivant le navigateur voir :

http://www.webdeveloper.com/forum/ar...p/t-90611.html
01/09/2008, 19h02
Micke7

Pourtant la gestion du navigateur est fait avec le

Code:

if (navigator.appName!="Microsoft Internet Explorer")

.
D'ailleurs le code fonctionne avec opéra.

J'avoue être perdu là...

Il doit falloir ajouter e = window.event;

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
 
function GetId(id)
{
  return document.getElementById(id);
}
 
var i=false; // La variable i nous dit si le profil est visible ou non
 
function move(e) {
  if(i) {  // Si le profil est visible, on calcul en temps reel sa position ideale
    if (navigator.appName!="Microsoft Internet Explorer") { // Si on est pas sous IE
      e = window.event;
      GetId("profil_survol").style.left=e.pageX + 5+"px";
      GetId("profil_survol").style.top=e.pageY + 10 +"px";
    }
    else { 
      if(document.documentElement.clientWidth>0) {
        GetId("profil_survol").style.left=event.x+document.documentElement.scrollLeft+5+"px";
        GetId("profil_survol").style.top=event.y+document.documentElement.scrollTop+10+"px";
      } 
      else {
        GetId("profil_survol").style.left=event.x+document.body.scrollLeft+5+"px";
        GetId("profil_survol").style.top=event.y+document.body.scrollTop+10+"px"; 
      }
    }
  }
}
 
function montre(text) {
  if(i==false) {
  GetId("profil_survol").style.visibility="visible"; // Si il est cacher (la verif n'est qu'une securité) on le rend visible.
  GetId("profil_survol").innerHTML = text; // on copie notre texte dans l'élément html
  i=true;
  }
}
 
function changeProfil(id_profil){
  if (id_profil==0){
    document.getElementById("profil_survol").innerHTML = "";
  }
  else{
    xhr = new XMLHttpRequest();
    xhr.open("get", "http://dunksession.free.fr/test.php?id_dunkeur=" + id_profil, false);
    xhr.send(null);
    montre(xhr.responseText);
  }
}
 
function cache() {
  if(i==true) {
    GetId("profil_survol").style.visibility="hidden"; // Si le profil est visible on la cache
    i=false;
  }
}
document.onmousemove=move; // dès que la souris bouge, on appelle la fonction move pour mettre à jour la position du profil.

Coté HTML cela donne ça

Code:

1
2
<a href="index.php?page=profil.php&profil=<?php echo $donneesprof['id_profil']  ?>'" onmouseover="changeProfil(<?php echo $donneesprof['id_profil']  ?>);" onmouseout="cache();"><?php echo $pseudo_d ;?></a><br />
      <div id="profil_survol"></div>

01/09/2008, 21h22
Micke7

J'ai trouvé exactement ce qu'il me faut. Pour cela il faut que j'utilise jquery et plus particuliérement un plugin nommé cluetip.

L'exemple se situe sur cette page, c'est le numéro 9.

Par contre je ne vosi pas du tout comment l'utiliser, donc si quelqu'un pouvait m'expliquer ça serait parfait !

Merci beaucoup :)