récupérer un élément [Résolu]

thrakkazz · 07/07/2011, 09h51

Bonjour,
Il semble que j'ai un probleme pour afficher une infobulle avec une position relative à un élément

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
<HEAD>
  <TITLE>Feuille de résultats</TITLE>
  <SCRIPT LANGUAGE="JavaScript" type="text/javascript">
    var IB=new Object;
    var posY=0;
    var yOffset=-5;
    function AffBulle(eleID, texte, xOffset) {
      contenu="<TABLE border=0 cellspacing=0 cellpadding="+IB.NbPixel+"><TR bgcolor='"+IB.ColContour+"'><TD><TABLE border=0 cellpadding=2 cellspacing=0 bgcolor='"+IB.ColFond+"'><TR><TD><FONT size='-1' color='"+IB.ColTexte+"'>"+texte+"</FONT></TD></TR></TABLE></TD></TR></TABLE>&nbsp;";
      if (document.all) {
        bulle.innerHTML=contenu;
        var ele=document.all["+eleID+"];
        yOffset=calculeOffsetTop(ele);
        document.all["bulle"].style.top=yOffset;
        document.all["bulle"].style.left=xOffset;
        document.all["bulle"].style.visibility="visible";
      }
    }
 
    function getMousePos(e) {
      if (document.all) {
        posY=event.y+document.body.scrollTop;
      }
      else {
        posY=e.pageY;
      }
    }
 
    function HideBulle() {
      if (document.all) {
        document.all["bulle"].style.visibility="hidden";
      }
     }
 
    function InitBulle(ColTexte,ColFond,ColContour,NbPixel) {
      IB.ColTexte=ColTexte;IB.ColFond=ColFond;IB.ColContour=ColContour;IB.NbPixel=NbPixel;
      if (document.all) {
        document.write("<DIV id='bulle' style='position:absolute;top:0;left:0;visibility:hidden'></DIV>");
        document.onmousemove=getMousePos;
      }
    }
 
    function calculeOffsetTop(r){
      return calculeOffset(r,"offsetTop")
    }
    function calculeOffset(element,attr){
      var offset=0;
      while(element){
        offset+=element[attr];
        element=element.offsetParent;
      }
      return offset;
    }
  </SCRIPT>
</HEAD>
<BODY>
  <SCRIPT language="JavaScript">
    InitBulle("black","#FFCC66","orange",1);
  </SCRIPT>

et plus loin dans une table... une cellule:

Code :

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

<td width=30% id='H3480'><font size=-1><A style="color: black; text-decoration: none" href="#" onMouseOver="AffBulle('H3480', 'mon super text', 180)" onMouseOut="HideBulle()">See this ?</A></font></td>

Ce que je cherche à faire c'est à afficher mon info bulle à quelques pixels à droite de mon élément et à "la même hauteur" que lui.
Pour la droite aucun soucis puisque je passe le nombre de pixel, ici 180.
le soucis est avec la hauteur d'affichage car je veux que l'info bulle soit alligné avec mon text "See this ?"
Avec la position de la sourie ça marche moyen car suivant que j'accede au lien par le dessus ou par le dessus l'info bulle se décalle soit vers le haut soit vers le bas.
Bref mon idée c'est de récupéper l'offset de ma cellule et ensuite à partir de là de calculer la position Y de mon info bulle pour l'aligner avec ma cellule (qui elle même contient le lien).
J'ai l'impression que c'est cette partie du code qui ne marche pas donc:

Code :

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

1
2
        var ele=document.all["+eleID+"];
        yOffset=calculeOffsetTop(ele);

Pour info c'est une simple page html sans <FORM> ni <DIV> mais c'est peut etre là aussi le soucis...
Comment je peux récupérer mon élément ?
J'ai l'impressin qu'il me faudrait peut etre utiliser des <DIV> </DIV> mais je ne sais pas où.
J'ai essayé de remplacer ça

Code :

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

1
2
<td width=30% id='H3480'><font size=-1><A style="color: black; text-decoration: none" href="#" onMouseOver="AffBulle('H3480', 'mon super text', 180)" onMouseOut="HideBulle()">See this ?</A></font></td>
par ça mais sans succes

Code :

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

<div id='H3480'><td width=30%><font size=-1><A style="color: black; text-decoration: none" href="#" onMouseOver="AffBulle('H3480', 'mon super text', 180)" onMouseOut="HideBulle()">See this ?</A></font></td></div>

Merci de votre aide

Bovino · 07/07/2011, 09h56

Code :

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

if (document.all)

document.all est une syntaxe obsolète depuis des décennies... c'est spécifique IE (et Opera) et ne doit plus être utilisé depuis IE4 et l'apparition de getElementById !

EDIT :
J'avais pas vu le pire :

Code :

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

var ele=document.all["+eleID+"];

Tu crois vraiment que tu as un élément dont le nom est +eleID+ ?

thrakkazz · 07/07/2011, 10h22

ok mais même en nettoyant mon code des document.all
et en corrigeant

Code :

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

1
2
var ele=document.getElementById(eleID);
yOffset=calculeOffsetTop(ele);

ca ne marche pas mieux (carrement plus d'info bulle visible alors que si je supprime ces 2 lignes ça marche bien mais c'est dependant de la position sourie

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
<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
    var IB=new Object;
    var posY=0;
    var yOffset=-5;
    function AffBulle(eleID, texte, xOffset) {
      contenu="<TABLE border=0 cellspacing=0 cellpadding="+IB.NbPixel+"><TR bgcolor='"+IB.ColContour+"'><TD><TABLE border=0 cellpadding=2 cellspacing=0 bgcolor='"+IB.ColFond+"'><TR><TD><FONT size='-1' color='"+IB.ColTexte+"'>"+texte+"</FONT></TD></TR></TABLE></TD></TR></TABLE>&nbsp;";
        document.getElementById("bulle").innerHTML=contenu;
        document.getElementById("bulle").style.top=posY+yOffset;
        document.getElementById("bulle").style.left=xOffset;
        document.getElementById("bulle").style.visibility="visible";
    }
 
    function getMousePos(e) {
      if (document.all) {
        posY=event.y+document.body.scrollTop;
      }
      else {
        posY=e.pageY;
      }
    }
 
    function HideBulle() {
      document.getElementById("bulle").style.visibility="hidden";
    }
 
    function InitBulle(ColTexte,ColFond,ColContour,NbPixel) {
      IB.ColTexte=ColTexte;IB.ColFond=ColFond;IB.ColContour=ColContour;IB.NbPixel=NbPixel;
      document.onmousemove=getMousePos;
      document.write("<DIV id='bulle' style='position:absolute;top:0;left:0;visibility:hidden'></DIV>");
    }
 
    function calculeOffsetTop(r){
      return calculeOffset(r,"offsetTop")
    }
    function calculeOffset(element,attr){
      var offset=0;
      while(element){
        offset+=element[attr];
        element=element.offsetParent;
      }
      return offset;
    }
  </SCRIPT>

andry.aime · 07/07/2011, 11h36

Bonjour,

L'élément à l'attribut id passé en paramètre ?
Montre nous le code HTML.

A+.

thrakkazz · 07/07/2011, 11h56

Bon alors après un gros coup de bol j'ai trouvé ça:
http://www.quirksmode.org/dom/w3c_cs...l#offsetParent

et donc sous IE7 le offsetTop ne marche pas apparement alors que le offsetLeft marche.

Dommage c'est justement le offsetTop que je voullais.
Bon et bien ce n'est pas grave, l'info bulle ne sera que pour ceux qui utilisent les derniers IE et puis voilà ^^

Merci pour votre aide

NoSmoking · 07/07/2011, 13h10

Bonjour,

Citation:

Envoyé par thrakkazz

Ce que je cherche à faire c'est à afficher mon info bulle à quelques pixels à droite de mon élément et à "la même hauteur" que lui.

cela se fait en CSS de nos jours...

Code html :

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
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS Info Bulle</title>
<style type="text/css">
html, body {
  font-family : Verdana;
  font-size : 1.0em;
}
span.bulle {
  border-bottom : 1px dotted #f08080;  
  cursor : pointer;  
}
span.bulle span{
  display:none;
}
span.bulle:hover span{
  position : absolute;
  display : inline;
  padding : 5px;  
  padding-right : 5px;    
  background-color : #fefeee;  
  border : 1px solid #f0f080;  
}
</style>
<body>
<p>
Ce paragraphe contient une <span class="bulle">info Bulle<span>Texte de l'info Bulle</span></span> et le texte du texte sans importance...
</p>
</body>
</html>

07/07/2011, 09h56	#2
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 807 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 807 Points : 35 803 Points : 35 803	Code : Sélectionner tout - Visualiser dans une fenêtre à part if (document.all) document.all est une syntaxe obsolète depuis des décennies... c'est spécifique IE (et Opera) et ne doit plus être utilisé depuis IE4 et l'apparition de getElementById ! EDIT : J'avais pas vu le pire : Code : Sélectionner tout - Visualiser dans une fenêtre à part var ele=document.all["+eleID+"]; Tu crois vraiment que tu as un élément dont le nom est +eleID+ ? __________________ 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

07/07/2011, 11h36	#4
andry.aime Rédacteur/Modérateur Andry Aimé Inscription : septembre 2007 Messages : 5 128 Détails du profil Informations personnelles : Nom : Andry Aimé Localisation : Ile Maurice Informations forums : Inscription : septembre 2007 Messages : 5 128 Points : 7 270 Points : 7 270	Bonjour, L'élément à l'attribut id passé en paramètre ? Montre nous le code HTML. A+.
	00

07/07/2011, 11h56	#5
thrakkazz Invité de passage Inscription : avril 2008 Messages : 11 Détails du profil Informations forums : Inscription : avril 2008 Messages : 11 Points : 3 Points : 3	Bon alors après un gros coup de bol j'ai trouvé ça: http://www.quirksmode.org/dom/w3c_cs...l#offsetParent et donc sous IE7 le offsetTop ne marche pas apparement alors que le offsetLeft marche. Dommage c'est justement le offsetTop que je voullais. Bon et bien ce n'est pas grave, l'info bulle ne sera que pour ceux qui utilisent les derniers IE et puis voilà ^^ Merci pour votre aide
	00

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