jQuery.info
Découvrir et utiliser jQuery, la librairie javascript du XXIIème siècle

Accueil du site > Plugins > Connaître la position d’un élément

Connaître la position d’un élément

vendredi 10 août 2007, par cam.lafit

Etendre les possibilités de jQuery afin de connaître les coordonnées X et Y d’une balise HTML.


Par défaut jquery ne permet pas de connaître la position d’un élément.

Ce qui est parfois gênant, lorsque, par exemple, on veut positionner un élément vis à vis d’un autre tel que des tooltips [1]

Utiliser les fonctions natives de javascript

En cherchant sur le net, nous trouvons assez rapidement ceci :

function findPos(obj) {
        var curleft = obj.offsetLeft || 0;
        var curtop = obj.offsetTop || 0;
        while (obj = obj.offsetParent) {
                curleft += obj.offsetLeft
                curtop += obj.offsetTop
        }
        return {x:curleft,y:curtop};
}

Comme vous pouvez le constater pas une once de jQuery, et pourtant ce code est issu d’un script [2] utilisant pleinement jQuery.

Si dans ce code on n’en trouve pas, c’est dû au fait que les méthodes offsetLeft, offsetTop, … sont des méthodes DOM propres à javascript. Ces méthodes ne sont pas accessibles directement par jQuery.

Etendre jQuery

Pour remédier à cela, il existe 2 fonction jQuery intéressantes :

  • $().get(val)
  • jQuery.fn.extend()

get() retourne un tableau d’objets DOM associés à l’objet jquery spécifié. Ainsi les fonctions DOM seront utilisables. extend() permet d’étendre jQuery pour offrir une nouvelle fonction aux différents objets jQuery.

Get

La fonction Get() retourne les éléments DOM à partir de jQuery. Par défaut Get() retourne un tableau des éléments DOM. Ainsi $('body').get(); retourne un tableau d’une seule entrée. Pour accéder à l’objet <body>, il faut donc faire $('body').get();

Extend()

La fonction extend()

En combinant le code précédent et ces 2 fonctions, nous obtenons :

jQuery.fn.extend({
   findPos : function() {
       obj = jQuery(this).get(0);
       var curleft = obj.offsetLeft || 0;
       var curtop = obj.offsetTop || 0;
       while (obj = obj.offsetParent) {
                curleft += obj.offsetLeft
                curtop += obj.offsetTop
       }
       return {x:curleft,y:curtop};
   }
});

Un exemple d’utilisation :

   pos = $('body').findPos();
//retourne le coordonnées via
   alert(pos.x);
//et
   alert(pos.y);

Remarques

Ce code ne retourne pas d’objet jQuery, il sera donc impossible de chaîner d’autres fonctions. La fonction ne fonctionne que pour un élément unique.

Notes

[1] en français : bulles d’aide

[2] voir

Répondre à cet article

11 Messages de forum

  • (logo)

    petite question

    8 août 2008 11:43

    Bonjour,
    une petite correction...
    ici :
    "
    Pour accéder à l’objet , il faut donc faire $(’body’).get(0) ;
    "
    ou alors j’ai mal compris l’exemple .

    Répondre à ce message

    • (logo)
      petite question 8 août 2008 11:57, par cam.lafit

      Bonjour

      Non il n’est pas necessaire de faire get(0) car la fonction findPos() le fait.

      Le code actuel récupere une collection d’element jquery par exemple $('body'), $('li') et retourne la position du premier element de cette collection.

      Dans le cas de body aucun problème, c’est une collection à un seul élément.

      Répondre à ce message

  • (logo)

    Connaître la position d’un élément

    8 octobre 2008 02:03, par Heirem

    Très intéressant. Cependant quand l’on cherche à obtenir la position relative à la fenêtre et non à la page, comment s’y prend t on ?

    Voir en ligne : Et par rapport à la fenêtre ?

    Répondre à ce message

    • (logo)
      Connaître la position d’un élément 8 octobre 2008 13:31, par cam.lafit

      Le code permet de connaître la position d’un élément par rapport à la balise <HTML />

      Quelle différence faites vous avec page et fenêtre ? Si par fenêtre vous prenez en compte votre navigateur (barre d’outil, de navigation,...) cela ne semble pas possible car on sort du cadre de ce que peux voir une page web.

      Répondre à ce message

      • (logo)
        Connaître la position d’un élément 8 octobre 2008 23:02, par Heirem

        Merci de votre réponse.

        La différence c’est que c’est la fenêtre qui contient la page et pas l’inverse évidement. Mais surtout la page, malgré cela est souvent plus haute, voir plus large aussi, que la fenêtre. Positionner un élément par rapport à la page, oui, mais quand il s’agit de connaitre la position d’un élément par rapport au bord haut ou bas de la fenêtre ?

        Un exemple concret qui me préoccupe justement. Soit un élément, qui est un composant d’un plugin, qui lui-même peut être placé n’importe où dans une page, sans que le concepteur du plugin puisse le savoir à l’avance. Un clic sur cet élément fait dérouler une liste. Cette liste peut apparaitre verticalement (vers le haut ou le bas) ou bien horizontalement (vers la gauche ou la droite) en fonction de la proximité d’un des bord de la fenêtre. Et non pas de la page. Vous me suivez ? Connaitre la position de l’élément cliqué par rapport au bord de la fenêtre est donc indispensable. Ou alors quelque chose m’échappe !

        En javascript, un objet de la classe window englobe au plus haut niveau tous les autres objets du document dans la fenêtre. On peut donner un nom quelconque à une fenêtre, donc à une occurrence d’objet window. Mais l’occurrence de nom « window » désigne la fenêtre qui exécute le script. Pour accéder à un sous-objet direct de cette fenêtre on n’est pas obligé de citer window. Par exemple, « document.body » équivaut à « window.document.body ».

        Pourquoi alors ne serait-il pas envisageable de connaitre la position dans une fenêtre d’un élément de la page ? ;)

        Voir en ligne : http://heirem.fr

        Répondre à ce message

      • (logo)
        Connaître la position d’un élément 9 octobre 2008 02:40, par Heirem

        J’ai trouvé la réponse à ma question. Et par là même à mon problème.

        Tout est expliqué ici : http://docs.jquery.com/Tutorials:Mouse_Position

        Alors bien entendu il ne s’agit pas de la position d’un élément mais celle de la souris au moment du click sur cet élément. C’est un moyen détourné de situer un élément dans la fenêtre, à condition qu’il soit cliqué. Ce n’est donc pas parfait mais en l’occurrence si cela peut servir quelqu’un.

        Ce qui n’est pas dis dans le tutorial, mais que j’ai bien entendu testé, c’est que, outre les propriétés pageX et pageY, les screenX et screenY fonctionnent aussi très bien. Et bien sûr screen c’est pour la fenêtre et non pas pour la position dans la page ;)

        J’aurai bien aimé avoir cette position avant le click, mais bon .. on ne peut pas tout avoir :)

        Répondre à ce message

  • (logo)

    Connaître la position d’un élément

    17 avril 2009 16:17

    Attention à bien utiliser jQuery et non pas le raccourci $ à la ligne 3 !

    Répondre à ce message

  • (logo)

    Connaître la position d’un élément

    21 décembre 2009 23:53, par sikko

    Marche du toner merci :)

    Répondre à ce message


Derniers commentaires