[DOM] offsetTop sous IE7 marche ou marche pas ?

**yamatoshi** · 09/04/2009, 11h37

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 :

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

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

**le_chomeur** · 09/04/2009, 11h46

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

**yamatoshi** · 09/04/2009, 12h07

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

**RomainVALERI** · 09/04/2009, 12h17

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

**yamatoshi** · 09/04/2009, 12h20

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

**Bovino** · 09/04/2009, 12h50

Code :

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

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

**yamatoshi** · 09/04/2009, 15h20

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

**le_chomeur** · 09/04/2009, 15h23

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

offsetTop ou left fonctionne PARFAITEMENT !!

**Bovino** · 09/04/2009, 16h00

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 :

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

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

**yamatoshi** · 09/04/2009, 16h58

Ben non Bovino

Avec ta méthode

Code :

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

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 :

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

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

[DOM] offsetTop sous IE7 marche ou marche pas ?

JavaScript

Discussions similaires

Partager

Partager