offsetLeft & offsetTop ne fait rien sous IE7

**SPACHFR** · 28/05/2009, 15h19

Bonjour,

Je test les methodes offsetLeft & offsetTop afin de récupérer les coordonnées d'un DIV.
J'obtiens bien les coordonnées sous FF, mais sous IE7 rien ne se passe (aucun méssage d'erreur).

Ci-dessous mon code de test. Il s'agit d'un bouton qui fait apparaitre un Div avec un Header (un bandeau bleu).
Lors d'un click sur le bandeau bleu j'appel une fonction (DialogMove) qui pour le moment ce contente d'afficher les coordonnées.

C'est lors de ce click que rien ne se passe sous IE7.

Auriez vous une idée ?

Merci

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
 
 <!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<script type="text/javascript">
// global variables //
var TIMER = 5;
var SPEED = 10;
var WRAPPER = 'content';
function CreatePlatform() {
   var ScreenHeight = screen.height;
   var ScreenWidth = screen.width;
   var BoxWidth = 850; // largeur de la fenetre
   var BoxHeight = 250; //hauteur de la fenetre
   ScreenWidth -= 220;  //largeur du treeview 
   var PfContent ='';
   var DialogPlatForm = document.createElement('div');
   DialogPlatForm.id = 'PlatFormDiv';
   DialogPlatForm.style.position ="absolute";
   DialogPlatForm.style.top = "100px";
   DialogPlatForm.style.left = ((ScreenWidth - BoxWidth)/2)+'px';
   DialogPlatForm.style.border ="solid  1px #3D3028";
   DialogPlatForm.style.backgroundColor ="#D6DBE0";
   DialogPlatForm.style.width = BoxWidth +"px";
   DialogPlatForm.style.height = BoxHeight +"px";
   DialogPlatForm.style.zIndex ="200";
   DialogPlatForm.innerHTML = PfContent;
   DialogPlatForm.style.visibility = "visible";
   DialogPlatForm.style.overflow = "auto";
   DialogPlatForm.style.opacity = .00;
   DialogPlatForm.style.filter = 'alpha(opacity=00)';
   DialogPlatForm.alpha = 0;
   DialogPlatForm.timer = setInterval("fadePlatForm(1)", TIMER);
   //DialogPlatForm.style.zindex ="1000";
   var DialogPlatFormMask = document.createElement('div');
   DialogPlatFormMask.id = "DialogPlatFormMask";
   DialogPlatFormMask.className ="PFMask"
   DialogPlatFormMask.style.visibility = "visible";
   var DialogPlatFormHeader = document.createElement('div');
   DialogPlatFormHeader.id = 'dialog-header';
   DialogPlatFormHeader.setAttribute('onclick','DialogMove()');
   DialogPlatFormHeader.innerHTML ='<a>Capacity</a>';
   document.body.appendChild(DialogPlatFormMask); 
   document.body.appendChild(DialogPlatForm);
   DialogPlatForm.appendChild(DialogPlatFormHeader);
 
}
 
function DialogMove() {
 var LeftPos = document.getElementById('PlatFormDiv').offsetLeft;
 var TopPos = document.getElementById('PlatFormDiv').offsetTop; 
 alert('Left :'+LeftPos+' Top :'+TopPos);
}
 
function fadePlatForm(flag) {
  if(flag == null) {
    flag = 1;
  }
  var dialog = document.getElementById('PlatFormDiv');
  var value;
  if(flag == 1) {
    value = dialog.alpha + SPEED;
  } else {
    value = dialog.alpha - SPEED;
  }
  dialog.alpha = value;
  dialog.style.opacity = (value / 100);
  dialog.style.filter = 'alpha(opacity=' + value + ')';
  if(value >= 99) {
    clearInterval(dialog.timer);
    dialog.timer = null;
  } 
}
</script>
<style>
#content {
padding:20px;
}
#dialog-header {
 display:block;
 position:relative;
 width:850px;
 height:20px;
 font-size:11px;
 font-family: Verdana, sans-serif;
 background:navy;
 color: white;
 }
.PFMask {
 position:absolute;
 top:0px;
 left:0px;
 min-height:100%;
 width:100%;
 background:#F9E08C;
 opacity:.75;
 filter:alpha(opacity=75);
 z-index:100
}
</style>                                                  
</head>
<body bgcolor="#F8F8F8">
<div id="contener">
	<div id="current">
		<input type="button" onclick="CreatePlatform();" />
	</div>
</div>
</body>
</html>

**E.Bzz** · 28/05/2009, 15h25

Bonjour,
puisque tu le crées en absolute, style.left devrait suffire ...

A+

**SPACHFR** · 28/05/2009, 15h32

Merci pour cette réponse.

J'ai testé le code ci-dessous, mais j'ai toujours le problème

Code :

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

1
2
3
4
5
6
 
function DialogMove() {
 var LeftPos = document.getElementById('PlatFormDiv').style.left;
 var TopPos = document.getElementById('PlatFormDiv').style.lop; 
alert('Left :'+LeftPos+' Top :'+TopPos);
}

**E.Bzz** · 28/05/2009, 15h33

Et avec style.left ?

A+

**SPACHFR** · 28/05/2009, 15h38

Désolé, pour le méssage précendent, mais le temps de la modif et de refaire un test, tu avais déjà vu la boulette...

Sinon j'ai le même problème

**E.Bzz** · 28/05/2009, 15h42

Envoyé par SPACHFR

Désolé, pour le méssage précendent, mais le temps de la modif et de refaire un test, tu avais déjà vu la boulette...

Pas de problème.
Au fait : "lop" ça le fera pas non plus

Tu as essayé de récupérer le left (vu que le top est défini en dur) au moment où tu le génères ?
C'est peut être le plus simple, non ?
Il me semble que JS accède au style uniquement (suivant les nav ?) si définis dans le tag, ce qui n'est pas le cas ici ...

A+

**SPACHFR** · 28/05/2009, 15h53

Envoyé par E.Bzz

Il me semble que JS accède au style uniquement (suivant les nav ?) si définis dans le tag, ce qui n'est pas le cas ici ...

A+

Là j'ai pas tout compris (?) (je débute en javascript)

J'ai des gros doigts aujourd'hui.....

Sinon j'ai essayé de récupérer uniquement le 'left' mais idem...
En fait l'idée de ma fonction (si j'y arrive) est de récupérer les coordonnées pour que lors d'un "onkeypress" on puisse deplacer le DIV, c'est pour cela que je voulais également récupérer la position 'top'.
J'ai probablement une erreur dans mon code ou il faut un code spécifique IE7, mais ça fait un moment que je cherche sans trouver...

**E.Bzz** · 28/05/2009, 15h58

Tu n'as qu'as les stocker dans une variable globale :

Code :

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

1
2
3
4
5
6
7
8
var LeTop;
var LeLeft;
function ...{
...
DialogPlatForm.style.top = "100px";
LeTop = "100px";
DialogPlatForm.style.left = ((ScreenWidth - BoxWidth)/2)+'px';
LeLeft = ((ScreenWidth - BoxWidth)/2)+'px';

A+

**E.Bzz** · 28/05/2009, 16h00

Une solution pour avoir accès au top et left sans restriction serait de créer ton div en dur (dans le HTML), mais caché.

Code :

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

<div id="PlatFormDiv" style="position:absolute;display:none;top:0px;left:0px"></div>

Dans ta fonction tu n'as alors plus qu'à le modifier (et non plus le créer)

A+

**SPACHFR** · 28/05/2009, 16h09

Je viens de tester ton idée (variable global)
Du coup je viens de mettre en évidence le problème.
En fait la boite 'alert' ne s'affiche pas sous IE. Même un simple 'alert('OK');' n'apparait pas lors du click. Il est donc probable que ce ne soit pas un problème d'offset mais plutôt d'appel de la fonction ( Enfin je suppose..) mais je ne vois toujours pas pourquoi

**SPACHFR** · 28/05/2009, 16h18

Bon tes suggestions mon mis sur la piste, j'ai trouvé.

En fait j'avais bien affecté l'attribut 'onclick', mais j'ai oublié de faire la déclaration suivante après le setAttribute:

Code :

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

1
2
 
DialogPlatFormHeader.onclick = DialogMove;

Du coup ça fonctione sous FF et IE7 sans variable globale.

**E.Bzz** · 28/05/2009, 16h31

A+

offsetLeft & offsetTop ne fait rien sous IE7

JavaScript

Discussions similaires

Partager

Partager