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/