POSITION, OFFSETLEFT, CLIENTLEFT CROSSBROWSER

Signaler
Messages postés
262
Date d'inscription
vendredi 6 mai 2005
Statut
Membre
Dernière intervention
19 septembre 2014
-
Messages postés
262
Date d'inscription
vendredi 6 mai 2005
Statut
Membre
Dernière intervention
19 septembre 2014
-
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.

https://codes-sources.commentcamarche.net/source/50062-position-offsetleft-clientleft-crossbrowser

Messages postés
262
Date d'inscription
vendredi 6 mai 2005
Statut
Membre
Dernière intervention
19 septembre 2014

salut mickaelpfr , voici un exemple qui te permettra de voir de juger des problèmes des getOffset (la fonction que j'utilise est la même que la tienne mais simplifier grâce à la fonction do{}while(). )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<style>
body{
margin : 10px;
padding :15px;
border : 5px solid blue;
}
.ele{
position : absolute ;
border : 6px solid green;
background-color : yellow;/*z-index : 1010;*/
}
</style>
<title>ID</title>
<script type="text/javascript" src="position.js"></script>
<script type="text/javascript">
function getPosition (element) {
var o={left:0,top:0};
do{
o.left+=element.offsetLeft;
o.top+=element.offsetLeft;
}while(element=element.offsetParent)
return o;
}

var testPlaceCoor = function(el){
var of=getPosition(document.getElementById(el)),
ele=document.createElement('div');

ele.className='ele';
ele.innerHTML='je suis un div en position absolue placer grace a la fonction getOffset';
ele.style.position='absolute';
ele.style.left=of.left+'px';
ele.style.top=of.top+'px';
document.body.appendChild(ele);
};
</script>
</head>






je suis un div

je suis un div

je suis un div

je suis un div

je suis un div ABSOLUTIZER MOI !!!!!



/div>






tu peux aussi mettre les position parents en absolue , ca bug aussi .
j'ai testé avec et sans doctype , pour le même résultat.
Du coup tu me dit que sa marche chez toi, je voudrais bien que tu me fasse voire ton exemple... mon script à encore des bug (je viens de m'en apercevoir sur chrome) mais juste un léger décalage , quand j'aurais le temps , je mit remetterais , surtout que j'ai vue que dojo avait une fonction semblable , qui devrait me donner des idées ...

a++
Messages postés
197
Date d'inscription
mardi 18 février 2003
Statut
Membre
Dernière intervention
29 avril 2009
2
Salut kimjoa :)

Pourrais tu nous donner des exemples sur lesquelles nous pourrions tester la différence ??
j'ai essayé des absolute dans des absolute etc mais ça marche correctement de mon coté ...
Messages postés
262
Date d'inscription
vendredi 6 mai 2005
Statut
Membre
Dernière intervention
19 septembre 2014

salut amrounix, cette nouvelle fonction ressemble un peu plus à celle que l'on retrouve sur le web et que mickaelfr nous a proposé...
en effet, j'avais remarqué que tu avais utilisé parentNode au lieux de offsetParent, mais oublié de te le faire remarquer :( ....

En faite , t'as fonction devrait être bonne (d'ailleur si tu détail mon code j'utilise la même base), mais malheureusement les navigateurs interprètent différemment les offsets, suivant si le offsetParent est en absolue, ou si entre le offsetParent se trouve un tableau ou qu'il définit une dimension ou un overflow(bug ie).... il y a aussi un problème lié aux offsetParent avec une position relative, mais là y'a tellement de bug (surtout ie) que j'ai pas réussi a trouver la formule pour débeuger, j'ai cherché sur le web sans résultat :(....

voilà voilà, pour t'en convaincre test t'as fonction dans mon exemple , tu verras les problèmes ....

a plush ;)
Messages postés
78
Date d'inscription
lundi 10 mars 2003
Statut
Membre
Dernière intervention
12 juillet 2010

nouvelle version spécial killer ...

function getProp(x)
{htm=""; for (e in x) if (x[e]==parseInt(x[e],10)) htm+=e+":"+x[e]+"\n";alert(htm);}

/*retourne la position en {x,y} d'un element */
function posxy(rst,xx,yy) {
var cc = { x: xx, y: yy };
while (rst) {
//getProp(rst);
cc.x += rst.offsetLeft;
cc.y += rst.offsetTop;
rst = rst.offsetParent;
}
return cc;
}

mon erreur à été de parcourir la node avec parentNode alors qu'il existe un offsetParent !
Afficher les 16 commentaires