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

Version imprimable

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:

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>

01/05/2008, 10h05
SpaceFrog

document.write :vomi:
01/05/2008, 14h27
lmeylan

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

Oui, je fais bien usage de "document.write()" ...
01/05/2008, 21h05
SpaceFrog

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

Même problème en 100% DOM

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:

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

Code:

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

02/05/2008, 08h36
lmeylan

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

Sympa d'être aussi disponible pour répondre !
02/05/2008, 09h02
SpaceFrog

Exact, j'ai pas scrollé assez :oops:

essaye d'attribuer les top et left après avois appendé ?
02/05/2008, 10h04
lmeylan

Très têtue, la chose

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
02/05/2008, 10h20
SpaceFrog

ils sont positonnés en absolute ???
donc pas de boucle sur le parent ...
02/05/2008, 10h30
lmeylan

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.
02/05/2008, 10h43
SpaceFrog

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
02/05/2008, 19h43
lmeylan

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

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

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

05/05/2008, 08h20
lmeylan

Coriace, le bougre

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

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:

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>

06/05/2008, 09h50
lmeylan

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