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

Vraie position d'un objet ?

JavaScript

Vue hybride

Discussions similaires

Partager

Partager