var position = $("#maDiv").position();
var largeur = $("#maDiv").width();
var hauteur = $("maDiv").height();
alert( position.left );
alert( position.top );
alert( largeur );
alert( hauteur );On peut noter que en fonction de IE ou de FireFox les valeurs retournées ne sont pas les mêmes. Pour IE (v6) le coin en haut gauche peut retourner (-2,-2) tandis que FireFox renvoie bien (0,0).
L'opération inverse maintenant : comment positionner
#maDiv a de bonnes coordonnées ? Le plugin dimensions.js ne fournit pas de fonctions pour leftet
top, mais les fonctions
height() et width() fixent respectivement la hauteur et la largeur de l'élément DOM. Il suffit de mettre en paramètres les valeurs souhaitées.
Pour les coordonnées top et left, l'accès au style de l'élément est alors indispensable :
maDiv.style.left = nouvLeft;
maDiv.style.top = nouvTop;ou en utilisant JQuery :
$("#maDiv").css("top",nouvTop);
$("#maDiv").css("left",nouvLeft);
En faisant le test suivant on s'aperçoit que le comportement d'IE et de FireFox sont encore une fois bien différents. Positionnons nouvLeft à 0 et nouvTop à 0. IE6 affiche la div aux coordonnées absolues (0,0) en haut à gauche de l'écran, mais FireFox affice la div en coordonnées relatives dans le container parent (margin+padding inclus) !
N'ayant pas de plugin sous la main pour faire le job correctement, j'ai donc utilisé une rustine en javascript :
position = $("#maDiv").position();
if (position.left != myObject.left )
{ $("#maDiv").css("left",myObject.left-(position.left-myObject.left));
}
if (position.top != myObject.top )
{ $("#maDiv").css("top",myObject.top-(position.top-myObject.top));
}myObject représente les coordonnées (top,left) comme elles sont demandées, l'objectif à atteindre.L'idée dans ce bout de code est de corriger l'écart de positionnement entre les coordonnées absolues lues depuis dimensions.js et les coordonnées possiblement relatives en écriture. S'il y a écart entre l'attendu et l'observé alors on décale l'observé de ce qu'il faut.
clics
