POSITION, OFFSETLEFT, CLIENTLEFT CROSSBROWSER
cs_Kimjoa
Messages postés
262
Date d'inscription
vendredi 6 mai 2005
Statut
Membre
Dernière intervention
19 septembre 2014
-
24 mai 2009 à 00:58
cs_Kimjoa Messages postés 262 Date d'inscription vendredi 6 mai 2005 Statut Membre Dernière intervention 19 septembre 2014 - 30 juin 2009 à 17:04
cs_Kimjoa Messages postés 262 Date d'inscription vendredi 6 mai 2005 Statut Membre Dernière intervention 19 septembre 2014 - 30 juin 2009 à 17:04
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
https://codes-sources.commentcamarche.net/source/50062-position-offsetleft-clientleft-crossbrowser
30 juin 2009 à 17:04
<!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++
30 juin 2009 à 08:39
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é ...
29 juin 2009 à 23:59
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 ;)
29 juin 2009 à 16:50
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 !
16 juin 2009 à 23:26
de plus, pour le test de mise en absolue c'est normale que t'as fonction ne marche pas, car il aurait fallut cour-circuiter la récursivité de t'as fonction au 1er élement non-static ....
tchaooo ;)
16 juin 2009 à 23:21
var testAbsolutize = function(el){
var es=document.getElementById(el).style,
of=posxy(document.getElementById(el),0,0),
dim=[document.getElementById(el).clientWidth,document.getElementById(el).clientHeight];
alert(of.x)
es.position = 'absolute';
es.left = of.x + 'px';
es.top = of.top + 'px';
es.width =dim.y + 'px';
es.height = dim.height + 'px';
};
et de même pour la fonction placeCoor , et sur tout les navigateurs ça bug ....
me suis rendu compte il y a peu que dojo, avait une fonction assé similaire à la mienne , malgré quelques détails ....
faudrait sans doute faire encore des tests, mais j'ai plus le temps et se script ma découragé, j'ai pas vraiment envie de m'y remettre ...
si tu t'y sent prêt?? c'est le genre de fonctions qui sont vraiment essentiels et pourtant même de grosse librairie, n'arrive pas à les implémenter ....
a++
11 juin 2009 à 23:16
var nomove={"TR":0, "CENTER":0, "B":0, "P":0, "U":0, "I":0, "DIV":0, "A":0, "FONT":0, "LI":0, "PRE":0, "SPAN":0, "SUB":0, "SUP":0, "FORM":0};
/*retourne la position en {x,y} d'un element */
function posxy(rst,x,y)
{
if ( rst.style!=null && rst.style.position == 'absolute' ) { return {"x":x + rst.offsetLeft,"y":y + rst.offsetTop} }
else if (rst.parentNode == null ) { return {"x":x,"y":y} }
else { return (nomove[rst.tagName]==0) ? posxy(rst.parentNode,x,y) : posxy(rst.parentNode,x+rst.offsetLeft,y+rst.offsetTop) ; }
}
(avec x & y, un delta par rapport au pt d'origine)
utilisation :
var pos_=posxy(document.getElementById('element'),0,0);
2 juin 2009 à 19:03
25 mai 2009 à 16:37
la position de l'élément par rapport au body justement, ( pour le positionnement d'un absolute dans un relatif oui je connais ^^ )
je vais effectuer quelques test :)
25 mai 2009 à 15:43
Il existe en css , l'attribut position , ses valeurs sont static (classique) , abolute et relative .
En mode absolute la position d'un element , ne se fait pas a partir du body, mais du dernier élément parent , avec comme position -> relative.
En mode relative , la position d'un element , se fait pas a partir de sa position d'origine ...
Dans ses deux dernier cas , t'as fonction n'est plus bonne, il lui manquera , un test pour savoir si le parent est en relatif ou absolue , et casser la boucle si oui... le problème reste comment interprète les navigateurs le offsetLeft quand l'un des parent est en relative ou absolue, car aucun ne le fait parreil ...
voilà a++
25 mai 2009 à 09:49
j'ai toujours utilisé cette méthode :
function getPosition (element) {
var tmpLeft = element.offsetLeft;
var tmpTop = element.offsetTop;
var MyParent = element.offsetParent;
while(MyParent) {
tmpLeft += MyParent.offsetLeft;
tmpTop += MyParent.offsetTop;
MyParent = MyParent.offsetParent;
}
return {"left":tmpLeft,"top":tmpTop};
}
qui se comporte de la même façon sous ie6/7/8 et FF et chrome et safari
25 mai 2009 à 03:32
bye
25 mai 2009 à 01:53
Le grand Lama des Andes me succure à l'oreille que les problèmes d'offset seraient dépendants du doctype de la page... Et si c'était vrai ?... Des fois que le DOM ne soit pas le même ;)
Je dis, je dis rien... Bon courage les amis.
24 mai 2009 à 23:16
j'espère finir ce soir, koi kil arrive , je lâcherais pas le morceaux : )
Concernant IE, c'est les plus lamentable, il ont deux mode d'affichage, l'un standard, complètement pas du tout standard !! et l'autre maison , en plus comme tu le précisent aucune version ne donne les même résultat lors d'un offset... quand on fait un logiciel, on fait tjrs en sorte que les versions futurs soit compatible avec les précédentes, surtout un browser .... c'est comme si un cms, changer le nom de se table sql dans la base, entre différentes versions, ou que les requette vers la base de données renvoyent pas le même résultat, pour un op similaire sur des versions différents...
voila voila , bye !!
24 mai 2009 à 22:31
24 mai 2009 à 00:58