Discussion :

[fab256]

Bonjour,

J'utilise une fenêtre fixe (en réalité un DIV) dans mon écran qui reste a la même position lorsqu’on défile la page en utilisant la propriété CSS position: fixed;

Code :

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

1
2
3
4
5
6
7
.MaFenetre {
position: fixed;
right: 0px;
top: 179px;
width: 140px;
height: 180px;
}

Maintenant je voudrais avoir les coordonnées absolue de cette élément

Code :

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

1
2
3
var mafen = document.getElement('.MaFenetre');
mafen.top = mafen.getTop();
mafen.left = mafen.getLeft();

Ca me donne toujours les coordonnées 179px et 0px, alors que la fenetre s'est déplacée avec le défilement, comment faire pour avoir les coordonnées absolues avec les défilement?

Merci

[Bovino]

Le principe d'un élément en position fixed est qu'il est précisément à une position fixe sur la partie visible de la page (d'où son nom en fait).
Pour récupérer sa position dans le document, il faut tenir compte de la valeur de scrollTop() et scrollLeft().

[kalimukti]

Le principe d'un élément en position fixed est qu'il est précisément à une position fixe sur la partie visible de la page (d'où son nom en fait).
Pour récupérer sa position dans le document, il faut tenir compte de la valeur de scrollTop() et scrollLeft().

Euh... c'est plutôt des fonctions jquery ça, nan ?
Moi j'utilise les propriétés

Code :

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

offsetleft

et

Code :

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

offsettop

, j'ai regardé un peu scrolltop et scrollleft, en js ça a l'air plutôt d'être des propriétés, et j'ai du mal à voir la différence par ex entre scrollleft et offsetleft...
enfin, bon, quoiqu'il en soit, ça marche aussi avec offsetleft et offsettop, avec une petite manip un peu spéciale: ces propriétés donnent le offset de l'élément par rapport à son parent. (il faut donc parcourir tout l'arbre, tant qu'il y a un parent, pour avoir les coordonnées absolues: le parcours est en gras dans le code)
(le code que j'utilise est tiré d'un tuto sur le web)
la fonction:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function ObjectPosition(obj) {
    var curleft = 0;
      var curtop = 0;
      if (obj.offsetParent) {
            do {
                  curleft += obj.offsetLeft;
                  curtop += obj.offsetTop;
            } while (obj = obj.offsetParent);
      }
      return [curleft,curtop];
}

et tu t'en sers de cette façon:

Code :

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

1
2
3
4
5
6
<div id="MyElementId">My test element</div>
<script language="javascript" type="text/javascript">
    var aryPosition = ObjectPosition(document.getElementById('MyElementId'));
    document.write('MyElementId left offset is ' + aryPosition[0] + '<br />');
    document.write('MyElementId top offset is ' + aryPosition[1] + '<br />');
</script>