Bonjour,

J'ai besoin de centrer un calque sur la partie affichée d'une page. Ce calque est flottant (style="position:absolute") et est affiché dynamiquement au centre de la fenêtre losqu'on clique sur une vignette de la page (cela affiche la photo en grand).

En largeur, j'obtiens sans problème la valeur en utilisant document.body.clientWidth (sous IE8 ou Firefox 4).

Par contre, en hauteur, je n'arrive pas à obtenir la dimension intérieure de la fenêtre.
Sous Firefox, pas de problème, window.innerHeight ramène la bonne valeur.
Par contre, sous IE8, j'obtiens toujours la hauteur totale du document et non celle affichée. J'ai essayé:
document.body.clientHeight
document.body.offsetHeight
document.body.scrollHeight

Ces trois fonctions ramènent TOUTES la même valeur, la hauteur totale du document ! C'est pourtant contraire à tout ce que j'ai pu trouver sur les forums consultés, y compris celui-ci.

La valeur retournée (pour une page donnée) est toujours identique, que je redimensionne la fenêtre ou pas, même maximisée.
Du coup, mon calque est centré sur le milieu du document et se retrouve placé la plupart du temps en dehors de l'écran (le document est assez long et fait plusieurs fois la hauteur de l'écran).

D'autre part, document.body.scrollTop et document.body.scrollLeft ramènent toujours 0 quelle que soit l'état la position de la page dans l'écran.

Quelqu'un saurait-il expliquer ces anomalies, et surtout en donner une solution (qui marche) ?

Pour plus de compréhension, je joins ci-dessous mon script pour ceux qui voudront bien se pencher dessus. Cette fonction est appelée avec les paramètres suivants :
- path = chemin de l'image à afficher,
- file = nom de l'image à afficher,
- ratio = rapport Largeur/Hauteur de l'image
Le calque flottant s'appelle 'showimg' et contient un objet image (vide au départ) nommé 'image'.

Le but de la fonction est d'afficher le calque au centre de la fenêtre d'appel, quelle qu'en soit la taille et le scroll, et qu'il y tienne en entier (en fait, il doit faire 90% de la dimension maximale possible).

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
 
function showimage(path, file, ratio)
{
 if(document.body)
 {
  var screenheight = document.body.clientHeight;
  var screenwidth = document.body.clientWidth;
 }
 else
 {
  var screenheight = window.innerHeight;
  var screenwidth = window.innerWidth;
 }
 
 var maxheight = screenheight * 0.9;
 var maxwidth = screenwidth * 0.9;
 
 if(ratio > 1)  // Image en paysage
 {
  imgwidth = maxwidth;
  imgheight = maxwidth / ratio;
  if(imgheight > maxheight)
  {
   imgheight = maxheight;
   imgwidth = maxheight * ratio;
  }
 }
 else  // Image en portrait
 {
  imgheight = maxheight;
  imgwidth = maxheight * ratio;
  if(imgwidth > maxwidth)
  {
   imgwidth = maxwidth;
   imgheight = maxwidth / ratio;
  }
 }
 
 var titles = document.getElementById('imgtitle').rows[0];
 titles.cells[0].innerHTML = '  ' + file; // Nom du fichier
 
 with(document.getElementById('showimg').style)  // Calque de visualisation de l'image
 {
  display = 'none';  // Pour éviter l'affichage de l'image précédente pendant le déplacement éventuel
  left = (screenwidth - imgwidth) / 2;
  width = imgwidth;
  top = (screenheight - imgheight) /3;
  with(document.image)
  {
   src = '';
   height = imgheight;
   width = imgwidth;
   src = path + '/' + file;
  }
  display='';  // Réaffichage
 }
}
Et voici la définition du calque dans la page :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
 
<div id="showimg" style="position:absolute; display:none;">
 <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" background="../images/bandeau.gif" id="imgtitle">
  <tr>
   <td width="50%" align="left"   style="color:#FFFFFF; font-weight:bold">&nbsp;</td>
   <td width="25%" align="center" style="color:#FFFFFF; font-weight:bold; cursor:pointer" onclick="slideprev()">[ &lt;&lt; Pr&eacute;c&eacute;dent ]</td>
   <td width="25%" align="center" style="color:#FFFFFF; font-weight:bold; cursor:pointer" onclick="slidenext()">[ Suivant &gt;&gt; ]</td>
   <td width="1%" height="19"><img src="../images/close.gif" alt="Fermer l'image" width="19" height="19" title="Fermer l'image" onclick="hideimage()" /></td>
  </tr>
 </table>
 <img src="" alt="" name="image" id="image" />
</div>