Positionnement d'un élément dans la pageRésolu

Question

Bonjour à tous

Je suis en train de mettre en place une galerie photo. Les images sont listées dans un tableau en petit, et sont affichées en grand dans un div quand on clique dessus.
La fonction appelée est zoomer(), à laquelle je passe en paramètre le nom de l'image ainsi que ses dimensions.
Le div dans laquelle l'image s'affiche est Zoom. (J'ajoute 32 aux dimensions du div pour avoir une parge de 16 autour de l'image).
Le div est correctement centré en largeur, mais pas en hauteur. Il est trop en bas. Je ne comprend pas d'où vient le problème.
Voici mon code :

  function zoomer (img, largeur, hauteur) {
    var l  = screen.availWidth;
    var h  = screen.availHeight;
    var div = document.getElementById ("Zoom");
     var l_div = largeur + 32;
     var h_div = hauteur + 32;
     var pos_x = Math.round ((l - l_div) / 2);
     var pos_y = Math.round ((h - h_div) / 2);
     
     document.getElementById ("imgZoom").src = "images/photos/" + img;
     div.style.width  = l_div.toString ();
     div.style.height  = h_div.toString ();
     div.style.left   = pos_x.toString ();
     div.style.top   = pos_y.toString ();
     div.style.display  = "block";
   }

Je précise que le résultat est le même avec IE et Opéra. Avec FF ça ne fonctionne pas du tout (mais c'est pas ça qui me dérange pour l'instant).

Si quelqu'un a une idée. Merci d'avance

maelob · Accepted Answer

window.event pour IE
event pour ff

Mais pourquoi ne mettrais-tu pas un id a l'image que tu fais passer en parametres et pour recupererer la position j'utilise ces fonctions

function getLeft(l) {
  if (l.offsetParent) return (l.offsetLeft + getLeft(l.offsetParent));
  else return (l.offsetLeft);
}

function getTop(t) {
  if (t.offsetParent) return (t.offsetTop + getTop(t.offsetParent));
  else return (t.offsetTop);
}

l et t etant les id
D'ailleurs je crois que c'était Bul qui m'avais aidé a faire ces fonctions ;-)

<hr size="2" width="100%" />
Maelo ou Elo --> Mon blog

Si quelqu'un vous dit : "Je me tue à vous le répéter", laissez-le mourir. (Jacques Prévert)

nickadele · Answer

div.style.width  = l_div.toString ()+'px';
div.style.height  = h_div.toString ()+'px';
div.style.left   = pos_x.toString ()+'px';
div.style.top   = pos_y.toString ()+'px';

cs_ov3rdoze · Answer

Merci pour ta réponse

Ca n'a pas résolu le problème du positionnement en hauteur, mais par contre maintenant ça marche aussi avec FF :)

nickadele · Answer

Re,
juste une petite réflection : screen.availHeight renvoie normalement la hauteur de l'écran, hors menu, barre d'outil, etc...
Peut-être que ton problème vient de là ?

Nickadele
----------------------------------------------
non, ma belle ne s'appel pas Adèle

maelob · Answer

Bonjour,

nickadele++;

c'est screen.height qu'il te faudrait utiliser.

<hr size="2" width="100%" />
Maelo ou Elo --> Mon blog

Si quelqu'un vous dit : "Je me tue à vous le répéter", laissez-le mourir. (Jacques Prévert)

nickadele · Answer

@maelob ++; j'aime bien ton avatar !

maelob · Answer

Merci 
Bon j'avoue c'est pas moi qu'il l'ai fais :o)

<hr size="2" width="100%" />
Maelo ou Elo --> Mon blog

Si quelqu'un vous dit : "Je me tue à vous le répéter", laissez-le mourir. (Jacques Prévert)

cs_ov3rdoze · Answer

Je viens d'essayer avec screen.height mais le résultat est exactement le même.
En fait dirait que la valeur récupérée par availHeight (ou par height) est trop grande.
J'ai essayé de mettre dans la hauteur de mon div (screen.availHeight - 40) et celui-ci dépasse quand même.

maelob · Answer

D'après selfhtml c'est different
http://fr.selfhtml.org/javascript/objets/screen.htm

Sinon je en vois le pas problème.

<hr size="2" width="100%" />
Maelo ou Elo --> Mon blog

Si quelqu'un vous dit : "Je me tue à vous le répéter", laissez-le mourir. (Jacques Prévert)

cs_bultez · Answer

Bonjour,
    [http://www.javascriptfr.com/codes/TAILLES-POSITIONS-OBJETS_36145.aspx [TOP] Tailles Objets et Positions]        pour aller dans le même sens que maelob et nickadele 
<hr />                Cordialement             Bul         [mon Site]     [M'écrire]

cs_ov3rdoze · Answer

J'avais justement utilisé screen.availHeight car il ne prends pas en compte les menus.
Pour une raison qui m'echappe, j'ai remplacé : 
      var pos_y = Math.round ((h - h_div) / 2);
par : 
      var pos_y = Math.round ((h - h_div) / 4);
et là c'est parfaitement centré. Je cherche pas à comprendre, ça fonctionne c'est déjà ça.

Merci pour votre aide

cs_bultez · Answer

parce que tu ne tiens pas compte de la taille du div... probablement.
<hr />                Cordialement             Bul         [mon Site]     [M'écrire]

PetoleTeam · Answer

Bonjour à tous,
 
Je ne saisi pas le pourquoi de 
l'utilisation de l'objet screen alors que le 
souhait est de centrer par rapport à la page et non à l'écran... 
Il me 
semble plus judicieux d'utiliser les caractéristiques de la fenêtre, donc window.innerWidth ou autre document.body.clientWidth suivant le cas... 

Peut être me trompe je ? 

;O)

nickadele · Answer

PetoleTeam, je pense que l'on se rapproche de la solution ;), si la question est de centrer par rapport à la fenêtre !

Nickadele

cs_ov3rdoze · Answer

Avec window.innerWidth 
 ça centre exactement comme il faut, mais il ne fonctionne pas avec IE.

En fait je viens de m'apercevoir que si ma pages et longue et que je suis en bas, le cadre s'affiche toujours au même endroit.
Autrement dit, il faut remonter pour le voir, et ce quelque soit la fonction que j'utilise.

J'avoue être un peu perdu : Toutes ces fonctions se basent sur le haut de la page? N'y en a t'il pas qui se basent sur la position actuelle?

maelob · Answer

A mon avis il faudrait que tu récupere la position de ton image et que tu centre a partir de la

<hr size="2" width="100%" />
Maelo ou Elo --> Mon blog

Si quelqu'un vous dit : "Je me tue à vous le répéter", laissez-le mourir. (Jacques Prévert)

cs_ov3rdoze · Answer

Excellente idée! Je m'y met et je vous tiens au courant

maelob · Answer

Je sais je sais j'ai toujours des idées excelentes mdr (mes chevilles vont exploser je crois lol)

<hr size="2" width="100%" />
Maelo ou Elo --> Mon blog

Si quelqu'un vous dit : "Je me tue à vous le répéter", laissez-le mourir. (Jacques Prévert)

cs_ov3rdoze · Answer

var l = screen.availWidth;
   var h = screen.availHeight;
   var div = document.getElementById ("Zoom");
   var l_div = largeur+32;
   var h_div = hauteur+32;
   var pos_x = Math.round ((l - l_div) / 2);
   var pos_y = Math.abs (event.y - (h_div / 2));

J'ai pensé que le plus simple pour récupérer la position de l'image était de récupérer l'endroit où l'on clique.
C'est pas trop mal, et ça fonctionne bien avec IE et Opera. En revanche FF dit :
      event is not defined

PetoleTeam · Answer

Bonjour, ----, Avec window.innerWidth ça centre exactement comme il faut, mais il ne fonctionne pas avec IE.

Normal c'est pourquoi j'avais rajouté document.body.clientWidth Une autre solution, que passer par la position de la mouse, est donc de récupérer la position de la fenêtre, je te livre une fonction que j'utilise assez souvent, qui tiens compte des navigateurs et des DOCTYPEs //------------------------------------------------- // Recup des dimensions de la fenetre d'affichage // return un tableau des valeurs //------------------------------------------------- function GetDimFenetre(){ var Left; var Top; var Right; var Bottom; var DocRef; if( window.innerWidth){ with( window){ Left = pageXOffset; Top = pageYOffset; Right = innerWidth; Bottom = innerHeight; } } else{ // Cas Explorer a part if( document.documentElement && document.documentElement.clientWidth) DocRef = document.documentElement; else DocRef = document.body; with( DocRef){ Left = scrollLeft; Top = scrollTop; Right = clientWidth; Bottom = clientHeight; } } Right += Left; Bottom += Top; return([Top, Right, Bottom, Left]); } ;O)

Positionnement d'un élément dans la page

24 réponses

Votre réponse

Discussions similaires