Discussion :

[MGD_Software]

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>

[nadox]

Bonjour,

Première chose :
les attributs de style 'top' et 'left' prennent une valeur avec une unité

Code :

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

1
2
3
  left = ((screenwidth - imgwidth) / 2)+"px";
  top = ((screenheight - imgheight) /3)+"px";

Deuxième chose : il semble que les valeurs ne soit pas forcément les bonnes avec un doctype sur la page. Si il y a un doctype, il faut utiliser

Code :

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

document.documentElement.clientHeight

à la place de

Code :

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

document.body.clientHeight

par exemple.

Par contre, je ne vois pas à quoi cela sert de faire un test sur l'existence du body. Il est toujours là peu importe le navigateur utilisé, et j'ai envie de dire : heureusement .

[MGD_Software]

Première chose : les attributs prennent des unités
Bon sang, mais c'est bien sûr ! Curieusement, internet Explorer se contentait très bien de l'absence d'unités et l'assimilait par défaut à des pixels. Par contre, Firefox convertissait systématiquement les valeurs en une chaine vide, qui donnait donc zéro.

Deuxième chose : le DocType
Je n'avais trouvé nulle part le fait que si le document possède un doctype les propriétés du document étaient profondément modifiées...
Mon document possède effectivement un doctype XHTML Transitionnel 1.0.
J'ai utilisé les propriétés clientHeight, clientWidth et scrollTop de l'objet document.documentElement et les valeurs retournées sont correctes, aussi bien dans IE8 dans dans Firefox 4.
Où peut-on trouver les propriétés dépendantes du doctype ??

Troisième chose : le test de l'existence de body
Vieille habitude... C'est vrai que maintenant tous les navigateurs implémentent l'objet body. je vais supprimer le test, cela économisera (très peu) le temps d'exécution.

Conclusion : Mon script marche très bien, je vais pouvoir continuer à implémenter mon moteur d'album photo. Un prototype peut être vu (provisoirement) sur http://docteur.anne.mignard.free.fr/AlbumPhotos


C'était un réponse de pro : rapide et efficace. Bravo et Merci !

[nadox]

Il n'existe pas (à ma connaissance) de liste complète concernant les propriétés affecté par la présence ou non d'un doctype.

Pour le cas présent, il faut juste savoir que la présence ou non d'un doctype impacte les valeurs des attributs de 'document.body'.

Un petit exemple ici (à faire avec IE):
http://www.xinotes.org/notes/note/210/