[DOM] offsetTop sous IE7 marche ou marche pas ?

Version imprimable

Bonjour,

Je voudrais savoir s'il n'y a pas un problème de compatibilité entre IE et offsetTop car quand je teste le code suivant :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function mafonction(id){ if(document.getElementById){ hover = document.getElementById(""+id+""); }else{ hover = document.all[""+id+""]; } var position = hover.offsetTop; alert('mon id = '+id+''); alert('ma position = '+position+''); }
J'obtiens le résultat suivant pour id = 1 par exemple:

FF => mon id = 1 puis ma position = 20 (ma div étant placé à 20px de hauteur)

IE => mon id = 1 mais pour position j'ai tout le temps 0 ???

Quelqu'un a t-il déjà eu le même soucies ou c'est un problème d'interprétation d'IE ?

merci

09/04/2009, 11h46
le_chomeur

le code html total ?
mais je pense que tu as une erreur sur la récupération de ton objet ;)
essaye avec document.getElementById() également sous IE

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Scroller</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" >
function changeclass(id){
	alert('id'+id+'')
		if(document.getElementById){
			box = document.getElementById(""+id+"");
		}else{
			box = document.all[""+id+""];
		}
 
		var boxposition = box.offsetTop;
 
 
		alert('boxposition'+boxposition+'')
}
</script> 
</head>
 
<body>
<div id="contenu">
<ul>
<li><a  href="#"   id="1" name="itembox" class="itembox" onclick="changeclass(1)"><span class="itemlink">Item 1</span></a></li>
<li><a  href="#"   id="2" name="itembox" class="itembox" onclick="changeclass(2)"><span class="itemlink">Item 2</span></a></li>
</ul>
</div>
</body>
</html>

Marche sous FF sous IE boxposition = 0 chaque fois ???

09/04/2009, 12h17
RomainVALERI

As-tu envisagé que la position haute de ta div soit peut-être réellement égale à 0 ? ^^
09/04/2009, 12h20
yamatoshi

Citation:

Envoyé par RomainVALERI

As-tu envisagé que la position haute de ta div soit peut-être réellement égale à 0 ? ^^

Non parce que j'ai bien mes deux liens

Lien 1
Lien 2

Sous FF Lien 1 position = 0
Sous FF Lien 2 position = 41

Sous IE lien 1 position = 0
Sous IE lien 2 position = aussi 0 px ce qui n'est pas normal

Code:

1
2
3
4
5
6
7
8
9
10
function changeclass(un_id){
	alert('id : '+un_id);
	var box = document.getElementById(un_id);
	var boxposition = box.offsetTop;
	while(box.offsetParent){
		box = box.offsetParent;
		boxposition += box.offsetTop;
	}
	alert('boxposition : '+boxposition);
}

09/04/2009, 15h20
yamatoshi

Donc c'est bien ce que je disais offsetTop n'est pas bien géré par IE car tu es obligé de passer par offsetParent. Du coup vu que la valeur du offsetParent de ma div contenueur n'est pas la même que celle du offsetTop de ma div du coup mon positionnement est chaque fois érroné.

Quelle merde IE:?

N'y a t il pas moyen de récupérer le offsetTop correctement ?

Merci
09/04/2009, 15h23
le_chomeur

non tu n'as pas compris ...
ici offsetParent représente le parent au niveau du dom !!!

offsetTop ou left fonctionne PARFAITEMENT !!

Citation:

Envoyé par yamatoshi

Donc c'est bien ce que je disais offsetTop n'est pas bien géré par IE car tu es obligé de passer par offsetParent. Du coup vu que la valeur du offsetParent de ma div contenueur n'est pas la même que celle du offsetTop de ma div du coup mon positionnement est chaque fois érroné.

Quelle merde IE:?

N'y a t il pas moyen de récupérer le offsetTop correctement ?

Merci

Si :
Code:

1 2 3 4 5 6 7 8 9 10 function changeclass(un_id){ alert('id : '+un_id); var box = document.getElementById(un_id); var boxposition = box.offsetTop; while(box.offsetParent){ box = box.offsetParent; boxposition += box.offsetTop; } alert('boxposition : '+boxposition); }
:roll:

Ben non Bovino

Avec ta méthode
Code:

1 2 3 4 5 6 7 8 9 10 function changeclass(un_id){ alert('id : '+un_id); var box = document.getElementById(un_id); var boxposition = box.offsetTop; while(box.offsetParent){ box = box.offsetParent; boxposition += box.offsetTop; } alert('boxposition : '+boxposition); }
Lorsque je test le lien 2 par exemple sous FF l'alerte me retourne boxposition=58

Si j'enleve le while toujours sous FF l'alerte me donne boxposition=23
Code:

1 2 3 4 5 6 7 function changeclass(un_id){ alert('id : '+un_id); var box = document.getElementById(un_id); var boxposition = box.offsetTop; alert('boxposition : '+boxposition); }
8O8O:cry: