Vraie position d'un objet ?

**le_chomeur** · 23/10/2009, 09h25

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 ???

**d-Rek** · 23/10/2009, 09h34

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 !

**le_chomeur** · 23/10/2009, 09h36

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

**SpaceFrog** · 23/10/2009, 09h42

ça viendrait pas du boxtype ?
si un calcul de position est fait par rapport à des height ou width ...

**le_chomeur** · 23/10/2009, 09h47

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

**Bovino** · 23/10/2009, 09h50

Salut,

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

Code :

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

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}
}

**le_chomeur** · 23/10/2009, 09h56

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 :

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

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 :

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
<!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

**SpaceFrog** · 23/10/2009, 10h02

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

**le_chomeur** · 23/10/2009, 10h05

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 :

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

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

)

**SpaceFrog** · 23/10/2009, 10h09

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

**le_chomeur** · 23/10/2009, 10h21

bingo effectivement ...

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

voila mon CSS :

Code :

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

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

j'en reste baba !!