Positionnement d'un élément dans la page

Résolu
cs_ov3rdoze Messages postés 414 Date d'inscription lundi 19 juillet 2004 Statut Membre Dernière intervention 23 septembre 2014 - 27 mai 2008 à 10:54
nickadele Messages postés 1251 Date d'inscription mercredi 7 août 2002 Statut Modérateur Dernière intervention 10 avril 2013 - 28 mai 2008 à 15:28
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

24 réponses

maelob Messages postés 943 Date d'inscription mardi 14 novembre 2006 Statut Membre Dernière intervention 7 août 2009 3
28 mai 2008 à 11:09
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)
3
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
28 mai 2008 à 11:51
Bonjour,
<table bgcolor= "#e6effe" border="0" cellpadding="5" cellspacing="0" width="100%">----, Avec window.innerWidth ça centre exactement
comme il faut, mais il ne fonctionne pas avec
IE.</td>
</td></tr></tbody></table>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)
3
nickadele Messages postés 1251 Date d'inscription mercredi 7 août 2002 Statut Modérateur Dernière intervention 10 avril 2013
27 mai 2008 à 11:07
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';
0
cs_ov3rdoze Messages postés 414 Date d'inscription lundi 19 juillet 2004 Statut Membre Dernière intervention 23 septembre 2014
27 mai 2008 à 11:16
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 :)
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
nickadele Messages postés 1251 Date d'inscription mercredi 7 août 2002 Statut Modérateur Dernière intervention 10 avril 2013
27 mai 2008 à 13:11
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
0
maelob Messages postés 943 Date d'inscription mardi 14 novembre 2006 Statut Membre Dernière intervention 7 août 2009 3
27 mai 2008 à 13:24
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)
0
nickadele Messages postés 1251 Date d'inscription mercredi 7 août 2002 Statut Modérateur Dernière intervention 10 avril 2013
27 mai 2008 à 13:36
@maelob ++; j'aime bien ton avatar !
0
maelob Messages postés 943 Date d'inscription mardi 14 novembre 2006 Statut Membre Dernière intervention 7 août 2009 3
27 mai 2008 à 13:39
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)
0
cs_ov3rdoze Messages postés 414 Date d'inscription lundi 19 juillet 2004 Statut Membre Dernière intervention 23 septembre 2014
27 mai 2008 à 14:20
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.
0
maelob Messages postés 943 Date d'inscription mardi 14 novembre 2006 Statut Membre Dernière intervention 7 août 2009 3
27 mai 2008 à 14:31
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)
0
cs_bultez Messages postés 13616 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 31
27 mai 2008 à 14:32
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]
0
cs_ov3rdoze Messages postés 414 Date d'inscription lundi 19 juillet 2004 Statut Membre Dernière intervention 23 septembre 2014
27 mai 2008 à 14:40
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
0
cs_bultez Messages postés 13616 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 31
27 mai 2008 à 14:46
parce que tu ne tiens pas compte de la taille du div... probablement.
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
0
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
27 mai 2008 à 18:22
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)
0
nickadele Messages postés 1251 Date d'inscription mercredi 7 août 2002 Statut Modérateur Dernière intervention 10 avril 2013
27 mai 2008 à 18:39
PetoleTeam, je pense que l'on se rapproche de la solution ;), si la question est de centrer par rapport à la fenêtre !

Nickadele
0
cs_ov3rdoze Messages postés 414 Date d'inscription lundi 19 juillet 2004 Statut Membre Dernière intervention 23 septembre 2014
28 mai 2008 à 10:15
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?
0
maelob Messages postés 943 Date d'inscription mardi 14 novembre 2006 Statut Membre Dernière intervention 7 août 2009 3
28 mai 2008 à 10:41
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)
0
cs_ov3rdoze Messages postés 414 Date d'inscription lundi 19 juillet 2004 Statut Membre Dernière intervention 23 septembre 2014
28 mai 2008 à 10:44
Excellente idée! Je m'y met et je vous tiens au courant
0
maelob Messages postés 943 Date d'inscription mardi 14 novembre 2006 Statut Membre Dernière intervention 7 août 2009 3
28 mai 2008 à 10:51
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)
0
cs_ov3rdoze Messages postés 414 Date d'inscription lundi 19 juillet 2004 Statut Membre Dernière intervention 23 septembre 2014
28 mai 2008 à 11:03
   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
0