offsetLeft & offsetTop ne fait rien sous IE7
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:
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> |
