Vraie position d'un objet ?

Version imprimable

23/10/2009, 09h25
le_chomeur

1 pièce(s) jointe(s)

Vraie position d'un objet ?

Bonjour a tous , je tente d'utiliser une méthode pour récupérer la position d'un objet, pour en positionner un second , mais je m'aperçois que les positions ne sont pas identique sous ie/FF ET chrome :-(

ci joint le zip de démo ...

alors est ce que le problème vient de la méthode de recherche de position ou autre ???
23/10/2009, 09h34
d-Rek

Et bah j'ai pas tout compris car malgré avoir téléchargé ton zip, ton soucis est pas vraiment expliqué..
Pour savoir où est un élément, je fais document.getElementById('mon_id').offsetLeft et document.getElementById('mon_id').offsetTop malgré que mon élément ne soit pas du tout en absolute..
J'espère que ça t'aidera !
23/10/2009, 09h36
le_chomeur

pardon :|

effectivement ...
en fait mes infobulle ne sont pas correctement positionnées selon chaque navigateur ... impossible de trouver pourquoi ...

il suffit de lancer la page de démo sur différent navigateur pour voir le comportement ;-)
23/10/2009, 09h42
SpaceFrog

ça viendrait pas du boxtype ?
si un calcul de position est fait par rapport à des height ou width ...
23/10/2009, 09h47
le_chomeur

je crois qu'il s'agit non pas d'un problème de positionnement , mais de taille de la tooltip :

j'utilise du padding et je crois me souvenir que celui ci n'est pas interprèté dans la taille de l'élément , je vais faire un test et je reviens donner les résultats ;-)

Salut,

Pour mes infobulles, j'utilise ce type de code et je n'ai jamais eu de souci :?

Code:

1
2
3
4
5
6
7
8
9
10
function getPosition(elt){
    var posX = elt.offsetLeft;
    var posY = elt.offsetTop + elt.offsetHeight;
    while (elt.offsetParent) {
        elt = elt.offsetParent;
        posX += elt.offsetLeft;
        posY += elt.offsetTop;
    }
    return {haut: posY, gauche: posX}
}

oui j'utilise le même Bovino ;-)

mais la j'ai l'impression que le problème se situe ailleurs ...

mon code pour calculer la position de l'input :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
var getPosition = function(objectDom) {
	var tmpLeft = objectDom.offsetLeft;
	var tmpTop = objectDom.offsetTop;
	var MyParent = objectDom.offsetParent;
	while(MyParent) {
		tmpLeft += MyParent.offsetLeft;
		tmpTop += MyParent.offsetTop;
		MyParent = MyParent.offsetParent;
	}
	return [tmpLeft,tmpTop]
 
  };

ensuite je calcul la position de la box ...
elle s'affiche parfaitement selon les calculs donné sous firefox, mais pas sous ie , ni chrome ...

après test il ne sagit pas de problème de padding :

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
	</head>
	<body>
		<div id="test" style="border:5px solid green;padding:10px;background-color:red;width:200px;">
			<div style="background-color:#ffffff;">
				voici le contenu dans une div simple avec du contenu et fond blanc<br />
				ma div parente : <br /> 
				- bordure de 5px <br />
				- padding de 10px <br />
				- width de 200px fixée <br />
			</div>
		</div>
 
		vérification en javascript :
		<div id="result" style="border:1px solid #666"></div>
		<script type="text/javascript">
		var monElement = document.getElementById('test');
		var monResultat = document.getElementById('result');
		monResultat.innerHTML += "Taille sur monElement.style.width : "+monElement.style.width+"<br />";
		monResultat.innerHTML += "Taille sur monElement.offsetWidth : "+monElement.offsetWidth+"<br />";
		</script>
	</body>
</html>

résultat identique sous ie/ff/chrome/safari :(

23/10/2009, 10h02
SpaceFrog

y'a un code quelque part pour le calcul d'un vrai offset qui cumule par rapport au parents ...

la taille ?
( je viens de mettre des alerts, et effectivement les résultats renvoyés pour les calcul ne sont pas identique ... )

portion incriminé :
Code:

1 2 3 4 5 6 switch (finalRender) { case "Left": //Récupération des propriétées de la toolTip height pour la centrer positionToolTip = [positionObject[0] - mToolTip.ToolTip.offsetWidth - 12, positionObject[1] + (ObjectDom.offsetHeight / 2) - (mToolTip.ToolTip.offsetHeight / 2)]; alert(positionToolTip); break
( dans le fichier ;) )

23/10/2009, 10h09
SpaceFrog

donc boxtype
les border , margins ou padding n'étant par compris de la même façon dasn les dimensions hors tout des objets selon les navigateurs ...
Il me semble que JQuery l'intègre

bingo effectivement ...

et c'est même pire que ça :-)

voila mon CSS :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 .mToolTip{ width:200px; padding:5px; position:absolute; background-color:#323232; color:#ffffff; } .mToolTip .contentText{ background-color:#505050; padding:5px; }
mToolTip corespond a la div Parent et contentText a l'enfant ce qui donne :

---------mToolTip----------
| -----contentText----- |
| |__________________| |
|______________________|

hé bien ... la hauteur des 2 est ajouté :|

si je fais un mToolTip.offsetHeight sous FF j'obtiens 40px ( pour une VRAIE taille de 40px vérifié sous photoshop ... )
sous ie : 69px :calim2: j'en reste baba !!

23/10/2009, 10h24
SpaceFrog

c'est pas une nouveauté fillot ;)
[ame]http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug[/ame]
23/10/2009, 10h35
le_chomeur

loul !

et une solution en javascript ?
23/10/2009, 10h36
SpaceFrog

sniffer le navigateur et additionner toi même les comptued styles ...
23/10/2009, 10h38
le_chomeur

ben non justement je dois les soustraire :-/
23/10/2009, 10h41
SpaceFrog

:oops:
tu peux additionner des nombres négatifs ...

y'a pas une autre paires de branches ou m'accrocher dans le coin ...:aie:
23/10/2009, 11h07
le_chomeur

mince je n'y arrive pas ... :-/