[DOM] offsetTop - comportement hératique (Firefox)

**lmeylan** · 30/04/2008, 23h07

Bonjour,

Mon objectif: pouvoir positionner des images en superposition d'autres !

je me creuse la tête depuis pas mal de temps pour comprendre pourquoi Firefox n'affiche pas correctement la page lors du premier chargement de la page, mais par contre l'affiche correctement lorsque l'on la réactualise !
Le problème revient si on vide le cache.
Cela marche bien avec Internet Explorer !

Voici mon code :

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
<script language="Javascript" TYPE="text/javascript">
// position des réalisations, 
function getOffsets(obj) {
    var offsetTop = obj.offsetTop;
    var offsetLeft = obj.offsetLeft;
    while ((obj = obj.offsetParent )!=null) {
        offsetTop += obj.offsetTop;
        offsetLeft += obj.offsetLeft;
    	}
    return [offsetTop,offsetLeft];
}
 </script>
<img id="my_map_v" src="ly_carte2.jpg"  style="border-width: 0px 0 0 0;">
 
<div id="my_map"><img src="reglyon.jpg"  style="border-width: 0px 0 0 0"></div>
<script language="Javascript" TYPE="text/javascript">
var obj1 =document.getElementById("my_map");
var top_map = getOffsets (obj1)[0];
var left_map = getOffsets (obj1)[1]; 
 
// position des réalisations, couleurs corrspondantes et image associée 
document.write("<div style=\"position:absolute;top:"+top_map+"px;left:" + left_map +"px;\">");
document.write("<img name=\"Fond1\" src=\"reglyon.gif\" WIDTH=\"662px\" height=\"576px\" border=\"0\">" );
document.write("</div>");
</script>

**SpaceFrog** · 01/05/2008, 10h05

document.write

**lmeylan** · 01/05/2008, 14h27

belu je suis, et je ne comprends pas le sens de la réponse ci-dessus

.

Oui, je fais bien usage de "document.write()" ...

**SpaceFrog** · 01/05/2008, 21h05

document.write a une facheuse tendance a être instable et a détruire ce qui existe sur la page ...
passe plutot par le DOM
document.createElement ...

**lmeylan** · 01/05/2008, 23h21

J'ai procédé au changement et ai exactement le même effet.

Il peut être constaté sur :
http://www.art-et-histoire.com/tempo.html
--> chargez la page --> le graphe n'est pas aligné avec le fond
--> actualisez --> les deux s'alignent
--> effacez votre cache --> désalignement

mon code modifié :

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 
<script language="Javascript" TYPE="text/javascript">
// position des réalisations, 
function getOffsets(obj) {
    var offsetTop = obj.offsetTop;
    var offsetLeft = obj.offsetLeft;
    while ((obj = obj.offsetParent )!=null) {
        offsetTop += obj.offsetTop;
        offsetLeft += obj.offsetLeft;
    	}
    return [offsetTop,offsetLeft];
}
 
var first_img    = document.createElement("img");
	with(first_img){
		src		= "ly_carte2.jpg";
		style.borderWidth	= "0px 0 0 0";
	}
document.body.appendChild(first_img);
</script>
 
<br>
 
<script language="Javascript" TYPE="text/javascript">
var scd_img    = document.createElement("img");
	with(scd_img){
		src		= "reglyon.jpg"; 
		id 		= "my_map"
		style.borderWidth	= "0px 0 0 0";
	}
document.body.appendChild(scd_img);
 
var obj1 =document.getElementById("my_map");
var top_map = getOffsets (obj1)[0];
var left_map = getOffsets (obj1)[1]; 
// super position des détails 
var detail    = document.createElement("img");
 
	with(detail){
		src		= "reglyon.gif";
		style.position	= "absolute";
	 	style.top		= top_map+"px";
	  	style.left		= left_map+"px";
		style.borderWidth	= "0px 0 0 0";
	}
 
document.body.appendChild(detail);
</script>

Je ne vois toujours pas ce qui cloche ...

Merci à tout sorcier de me prêter sa baguette magique

**SpaceFrog** · 02/05/2008, 08h33

Code :

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

1
2
var top_map = getOffsets (obj1)[0] +"px";
var left_map = getOffsets (obj1)[1] +"px";

**lmeylan** · 02/05/2008, 08h36

+"px" se trouve juste un peu plus bas au moment d'affecter le style

Sympa d'être aussi disponible pour répondre !

**SpaceFrog** · 02/05/2008, 09h02

Exact, j'ai pas scrollé assez

essaye d'attribuer les top et left après avois appendé ?

**lmeylan** · 02/05/2008, 10h04

quif, quif.

En fait, le problème vient manifestement d'une mauvaise évaluation de offsetTop, qui revient avec une valeur erronée.

Quand je demande d'imprimer les valeurs top et left :
au premier chargement :
top:37px;left:8px;

après un refresh manuel de la page :
top:363px;left:8px;

L'image se positionne dynamiquement conformément à ces valeurs, malheureusement erronées

**SpaceFrog** · 02/05/2008, 10h20

ils sont positonnés en absolute ???
donc pas de boucle sur le parent ...

**lmeylan** · 02/05/2008, 10h30

Oui sur l'exemple (voir http://www.art-et-histoire.com/tempo.html) la page est super simple. Il n'y a pas de frame.

Sur mon site, quand je l'emploie, c'est à l'intérieur d'un frame. mais j'ai exactement le même problème.

**SpaceFrog** · 02/05/2008, 10h43

ben enlève la focntion qui incrémente les offsetTop des parents puisque les objets sont positionnés en absolute ... et que du coup le offsetTop retourné est par rapport au document

**lmeylan** · 02/05/2008, 19h43

Non, ça change rien.
J'ai enlevé le while, qui dans l'exemple ne sert à rien, mais le résultat reste identique et insatisfaisant.

J'ai soumis mon cas sur un autre forum, et on m'a proposé d'introduire un "windows.onload". Ca marche mais c'est super lourd pour une fonction basique qui devrait seulement marcher ...

**Sacha999** · 05/05/2008, 01h17

Remplace ton javascript par celui-la (j'ai rajouté du zIndex et du position = absolute)

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
<script language="Javascript" TYPE="text/javascript">
// position des réalisations, 
function getOffsets(obj) {
    var offsetTop = obj.offsetTop;
    var offsetLeft = obj.offsetLeft;
    while ((obj = obj.offsetParent )!=null) {
        offsetTop += obj.offsetTop;
        offsetLeft += obj.offsetLeft;
    	}
    return [offsetTop,offsetLeft];
}
 
var first_img    = document.createElement("img");
	with(first_img){
		src		= "ly_carte2.jpg";
		style.borderWidth	= "0px 0 0 0";
		style.position = "absolute";
		style.zIndex = 1;
	}
document.body.appendChild(first_img);
</script>
 
<br>
 
<script language="Javascript" TYPE="text/javascript">
var scd_img    = document.createElement("img");
	with(scd_img){
		src		= "reglyon.jpg"; 
		id 		= "my_map"
		style.position = "absolute";
		style.borderWidth	= "0px 0 0 0";
		style.zIndex = 0;
	}
document.body.appendChild(scd_img);
 
var obj1 =document.getElementById("my_map");
var top_map = getOffsets (obj1)[0];
var left_map = getOffsets (obj1)[1]; 
// super position des détails 
var detail    = document.createElement("img");
 
	with(detail){
		src		= "reglyon.gif";
		style.position	= "absolute";
	 	style.top		= top_map+"px";
	  	style.left		= left_map+"px";
		style.borderWidth	= "0px 0 0 0";
		style.zIndex = 2;
	}
 
document.body.appendChild(detail);
</script>

**lmeylan** · 05/05/2008, 08h20

Bien tenté ! essayé mais :
- le fait de rajouter les mentions "absolute", modifie de facto la position des images, et les place en haut de page --> mon souci est qu'elles doivent s'enchaîner --> d'abord la carte région, puis la carte ville et ces cartes et les textes qui les séparent sont variables par nature et leurs positions dépendent de l'écran du "client"
- pour zIndex, je ne vois pas d'impact.

Je travaille à changer carrément de techno, en passant par une création dynamique d'image GIF unique, en php, synthèse du fond et du détail. J'ai bien avancé, mais j'ai le même souci pour positionner les zones actives (2 layers de <area> dans une <map>)

**Sacha999** · 05/05/2008, 23h47

Je crois j'ai trouvé, le truc c'est dans un premier temps on se contente de creer les elements dans le DOM sans se préocupper de leur position, puis une fois tous est crée, chargé et affiché, c'est la qu'on modifie les positions, ce moment la on le trouve à l'evenement "onload" du "body":

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body onload="replacement()">
 
 
<script language="Javascript" TYPE="text/javascript">
// position des réalisations, 
function getOffsets(obj) {
    var offsetTop = obj.offsetTop;
    var offsetLeft = obj.offsetLeft;
    while ((obj = obj.offsetParent )!=null) {
        offsetTop += obj.offsetTop;
        offsetLeft += obj.offsetLeft;
    	}
    return [offsetTop,offsetLeft];
}
 
var first_img    = document.createElement("img");
	with(first_img){
		src		= "ly_carte2.jpg";
		style.borderWidth	= "0px 0 0 0";
	}
document.body.appendChild(first_img);
</script>
 
<br>
 
<script language="Javascript" TYPE="text/javascript">
var scd_img    = document.createElement("img");
	with(scd_img){
		src		= "reglyon.jpg"; 
		id 		= "my_map"
		style.borderWidth	= "0px 0 0 0";
	}
document.body.appendChild(scd_img);
 
// super position des détails 
var detail    = document.createElement("img");
with(detail){
		src		= "reglyon.gif";
		id 		= "my_detail"
		style.borderWidth	= "0px 0 0 0";
	}
document.body.appendChild(detail);
</script>
 
<script language="Javascript" TYPE="text/javascript">
function replacement()
{
	var obj1 =document.getElementById("my_map");
	var top_map = getOffsets (obj1)[0];
	var left_map = getOffsets (obj1)[1]; 
	var obj2 = document.getElementById("my_detail");
	with(obj2){
		style.position	= "absolute";
	 	style.top		= top_map+"px";
	  	style.left		= left_map+"px";
	}
}
</script>
 
</body>
 
</HTML>

**lmeylan** · 06/05/2008, 09h50

Super sympa de continuer à chercher.

Je suis arrivé à la même conclusion, à ceci près :
1/je déroule le script pour ts les éléments standards de la page
2/ je crée ts les éléments flottants en position absolute 0
3/ par windows.onload je les repositionne, en fonction de l'offset des premiers

J'ai testé, ca marche (tout cas our FF, mais pour IE, j'ai l'impression que la modification dynamique des styles est spécifique).
Ds ts les cas, c'est lourd, car en plus, j'ai selon les certains cas pas loin de 1000 objets flottants (un par localisation sur la carte, avec hyperlien vers la page de détail).

C'est pourquoi je tente en parallèle de réduire ce nombre à 1 ou 2, en faisant appel à la création dynamique d'image en php et aux "map".

Je vous propose en retour un script complet dès que tt fonctionne

[DOM] offsetTop - comportement hératique (Firefox)

JavaScript

Discussions similaires

Partager

Partager