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+

offsetLeft & offsetTop ne fait rien sous IE7

JavaScript

Vue hybride

Discussions similaires

Partager

Partager