Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Position d'un champ dans la page

9 réponses
Avatar
Alexis Coudeyras
Bonjour, je cherche un moyen de connaître la position (absolute, c'est à
dire x et y) d'un champ dans une page Web. Je voudrais afficher un texte à
la droite du champ lors du survol de ce dernier. J'ai essayé avec la
position de la souris mais ce n'est pas très fiable, je n'arrive pas à
positionner mon texte exactement à droite du champ (ce n'est pas un problème
pour les champs "normaux" mais pour le select c'est problématique car mon
texte apparait en-dessous dans IE6). Je peux pas utiliser de constante non
plus (genre les champs seraient forcément à 20 px à droite de la marge
gauche) car les champs peuvent être placés un peu n'importe où. Bref, je
commence à sécher, j'ai parcouru un paquet de sites et de forum et je trouve
pas, si quelqu'un a une idée, il me dépannerait bien. Merci.

9 réponses

Avatar
Alexis Coudeyras
"Alexis Coudeyras" <acoudeyras@[NoSpam]amalthis.com> a écrit dans le message
de news: 441fed41$0$20943$
Bonjour, je cherche un moyen de connaître la position (absolute, c'est à
dire x et y) d'un champ dans une page Web. Je voudrais afficher un texte à
la droite du champ lors du survol de ce dernier. J'ai essayé avec la
position de la souris mais ce n'est pas très fiable, je n'arrive pas à
positionner mon texte exactement à droite du champ (ce n'est pas un
problème pour les champs "normaux" mais pour le select c'est problématique
car mon texte apparait en-dessous dans IE6). Je peux pas utiliser de
constante non plus (genre les champs seraient forcément à 20 px à droite
de la marge gauche) car les champs peuvent être placés un peu n'importe
où. Bref, je commence à sécher, j'ai parcouru un paquet de sites et de
forum et je trouve pas, si quelqu'un a une idée, il me dépannerait bien.
Merci.


Bon, vous connaissez l'histoire du mec qui cherche pendant 2 jours et qui
trouve la réponse 2 minutes après l'avoir posée sur le forum ? ;-) Pour ceux
qui cherchent, il faut utiliser une fonction récursive pour obtenir la
position left et top de l'élément et de tous ses parents :

function getLeft(MyObject) {
if (MyObject.offsetParent)
return (MyObject.offsetLeft + getLeft(MyObject.offsetParent));
else
return (MyObject.offsetLeft);
}

function getTop(MyObject) {
if (MyObject.offsetParent)
return (MyObject.offsetTop + getTop(MyObject.offsetParent));
else
return (MyObject.offsetTop);
}

J'avais pas trouvé la réponse sur le forum, maintenant elle y sera.

Avatar
ASM
"Alexis Coudeyras" <acoudeyras@[NoSpam]amalthis.com> a écrit dans le message
de news: 441fed41$0$20943$

Bonjour, je cherche un moyen de connaître la position (absolute, c'est à
dire x et y) d'un champ dans une page Web. Je voudrais afficher un texte à
la droite du champ lors du survol de ce dernier.


Bon, vous connaissez l'histoire du mec qui cherche pendant 2 jours et qui
trouve la réponse 2 minutes après l'avoir posée sur le forum ? ;-) Pour ceux
qui cherchent, il faut utiliser une fonction récursive pour obtenir la
position left et top de l'élément et de tous ses parents :

function getLeft(MyObject) {
if (MyObject.offsetParent)
return (MyObject.offsetLeft + getLeft(MyObject.offsetParent));
else
return (MyObject.offsetLeft);
}


et si on a scrollé dans la page c'est-y encore OK ? (IE par exemple)

J'ussions plutôt systématiquement réservé la place pour le texte

<script type="text/javascript">
function texto(montexte,monChamp) {
monChamp.parentNode.firstChild.innerHTML = montexte;
}
</script>
</body>
<form>
<p><span></span><input type="text"
onmouseover="texto('salut Alex',this);"
onmouseout="texto('',this);"></p>
<p><span></span><input type="text"
onmouseover="texto('autre info',this);"
onmouseout="texto('',this);"></p>
</form>

--
Stephane Moriaux et son [moins] vieux Mac


Avatar
Alexis Coudeyras
"ASM" a écrit dans le message
de news: 441ff84c$0$19677$
"Alexis Coudeyras" <acoudeyras@[NoSpam]amalthis.com> a écrit dans le
message de news: 441fed41$0$20943$

Bonjour, je cherche un moyen de connaître la position (absolute, c'est à
dire x et y) d'un champ dans une page Web. Je voudrais afficher un texte
à la droite du champ lors du survol de ce dernier.


Bon, vous connaissez l'histoire du mec qui cherche pendant 2 jours et qui
trouve la réponse 2 minutes après l'avoir posée sur le forum ? ;-) Pour
ceux qui cherchent, il faut utiliser une fonction récursive pour obtenir
la position left et top de l'élément et de tous ses parents :

function getLeft(MyObject) {
if (MyObject.offsetParent)
return (MyObject.offsetLeft + getLeft(MyObject.offsetParent));
else
return (MyObject.offsetLeft);
}


et si on a scrollé dans la page c'est-y encore OK ? (IE par exemple)

J'ussions plutôt systématiquement réservé la place pour le texte

<script type="text/javascript">
function texto(montexte,monChamp) {
monChamp.parentNode.firstChild.innerHTML = montexte;
}
</script>
</body>
<form>
<p><span></span><input type="text"
onmouseover="texto('salut Alex',this);"
onmouseout="texto('',this);"></p>
<p><span></span><input type="text"
onmouseover="texto('autre info',this);"
onmouseout="texto('',this);"></p>
</form>


Pour le scrolling ça fonctionne bien sous IE 6 et 7. En fait, j'avais mis
"afficher un texte à la droite du champ" mais c'était pour aller vite. Ta
solution conviendrait parfaitement bien pour ce que j'avais écris mais pas
pour ce que je veux faire exactement. Merci en tout cas.



Avatar
ASM

Pour le scrolling ça fonctionne bien sous IE 6 et 7.


J'ai vu que sur mon IE (Mac) ça avait l'air de coller

pour ce que je veux faire exactement. Merci en tout cas.


Je suis curieux de savoir ce que tu voulais faire
car à afficher qque chose à gauche
- si en relative : déplace le champ
(faut qu'il soit assez grand pour qu'il reste survolé)
- si en absolute, et je suppose que ça l'est sinon pourquoi position ?
faut pas que ça vienne recouvrir là où le pointeur survole déjà
non ?




--
Stephane Moriaux et son [moins] vieux Mac

Avatar
Alexis Coudeyras
"ASM" a écrit dans le message
de news: 441ff84c$0$19677$
"Alexis Coudeyras" <acoudeyras@[NoSpam]amalthis.com> a écrit dans le
message de news: 441fed41$0$20943$

Bonjour, je cherche un moyen de connaître la position (absolute, c'est à
dire x et y) d'un champ dans une page Web. Je voudrais afficher un texte
à la droite du champ lors du survol de ce dernier.


Bon, vous connaissez l'histoire du mec qui cherche pendant 2 jours et qui
trouve la réponse 2 minutes après l'avoir posée sur le forum ? ;-) Pour
ceux qui cherchent, il faut utiliser une fonction récursive pour obtenir
la position left et top de l'élément et de tous ses parents :

function getLeft(MyObject) {
if (MyObject.offsetParent)
return (MyObject.offsetLeft + getLeft(MyObject.offsetParent));
else
return (MyObject.offsetLeft);
}


et si on a scrollé dans la page c'est-y encore OK ? (IE par exemple)

J'ussions plutôt systématiquement réservé la place pour le texte

<script type="text/javascript">
function texto(montexte,monChamp) {
monChamp.parentNode.firstChild.innerHTML = montexte;
}
</script>
</body>
<form>
<p><span></span><input type="text"
onmouseover="texto('salut Alex',this);"
onmouseout="texto('',this);"></p>
<p><span></span><input type="text"
onmouseover="texto('autre info',this);"
onmouseout="texto('',this);"></p>
</form>

--
Stephane Moriaux et son [moins] vieux Mac


Bah les probs posés par ta solution :
1) C'est à droite du champ que je veux afficher mon texte.
2) J'ai presque 200 champs dans le formulaire, les <span></span> je préfère
pas les ajouter ! ;-) Et c'est dans un Rad (Domino) donc pas moyen d'ajouter
les spans simplement. Je pourrais y réfléchir pour le faire en script sur le
onload, mais tout de suite ça complique pas mal le truc.
3) Le monChamp.parentNode, ça marche pas pour les SELECT sous IE, parce
qu'il a l'air de considérer que tu survoles l'option et pas le select. Donc
le parentNode te renvoie le select et pas le <TD> (ou le <P> dans ton
exemple). Bref encore une fois ça complique tout.

Par contre ma solution pose aussi des problèmes. Notamment parce que
j'utilise un DIV avec lequel je joue sur la visibility. Seulement s'il y a
un SELECT à côté, mon DIV est masqué (il passe en dessous). Ce prob est
enfin corrigé dans IE7 mais pas dans IE6.



Avatar
ASM


Bah les probs posés par ta solution :
1) C'est à droite du champ que je veux afficher mon texte.


j'avions compris "à gauche" ... ?

2) J'ai presque 200 champs dans le formulaire, les <span></span> je préfère
pas les ajouter ! ;-)


çà peut se faire via le truc d'insertion

c'est dans un Rad (Domino) donc pas moyen d'ajouter


sais pas ce que c'est

les spans simplement. Je pourrais y réfléchir pour le faire en script sur le
onload, mais tout de suite ça complique pas mal le truc.


non, non, à la volée, au coup par coup
et peut-être pas besoin des spans

3) Le monChamp.parentNode, ça marche pas pour les SELECT


Ha ? mais tu as parlé de "champ"
pour moi un "champ" est un input text

sous IE, parce
qu'il a l'air de considérer que tu survoles l'option et pas le select. Donc
le parentNode te renvoie le select et pas le <TD> (ou le <P> dans ton
exemple). Bref encore une fois ça complique tout.


suffit de renifler à quel niveau est le TD

Par contre ma solution pose aussi des problèmes. Notamment parce que
j'utilise un DIV avec lequel je joue sur la visibility. Seulement s'il y a
un SELECT à côté, mon DIV est masqué (il passe en dessous).


Je ne vois guère la différence entre mon span et ton div ? !

Si le div est dans le TD et *après* le "champ"
il devrait être au-dessus.
Si tu veux que le div reste affiché à droite du select il faut
- que ce soit un span
- ou qu'il soit stylé en display:inline ou display:table-cell;
(à voir ..)
Bien sûr il faut qu'il y ait assez de place !

Ce prob est
enfin corrigé dans IE7 mais pas dans IE6.


alors (à tous z'azzards),
et si j'ai bien compris que tous tes trucs sont tous dans des TDs,
voici qui devrait éviter de devoir rentrer partout et à la main des divs
ou des spans :

function textplus(montexte,monChamp) {
monchamp = (monchamp.parentNode.tagName.toLowerCase=='td')?
monchamp.parentNode :
(monchamp.parentNode.parentNode.tagName.toLowerCase=='td')?
monchamp.parentNode.parentNode :
'erreur';
if(monchamp=='erreur')
alert('Pas possible pour inserer !');
else {
var s = document.createElement('SPAN');
s.innerHTML = montexte;
monChamp.appenChild(s);
}
}
function textmoins(monChamp) {
monchamp = (monchamp.parentNode.tagName.toLowerCase=='td')?
monchamp.parentNode :
(monchamp.parentNode.parentNode.tagName.toLowerCase=='td')?
monchamp.parentNode.parentNode :
'erreur';
if(monchamp=='erreur')
alert('Y a rien a enlever !');
else
monchamp.removeChild(monChamp.lastChild);
}

<input type=text
onmouseover="textplus('salut Alex',this);"
onmouseout="textmoins(this);" />

--
Stephane Moriaux et son [moins] vieux Mac

Avatar
ASM

correctif (mais mon IE en fait une cagade au remove) :

function textplus(montexte,monChamp) {
monChamp = (monChamp.parentNode.tagName.toLowerCase()=='td')?
monChamp.parentNode :
(monChamp.parentNode.parentNode.tagName.toLowerCase()=='td')?
monChamp.parentNode.parentNode :
'erreur';
if(monChamp=='erreur')
alert('Pas possible pour inserer !');
else {
var s = document.createElement('SPAN');
s.innerHTML = montexte;
// monChamp.style.border = '3px solid red';
monChamp.appendChild(s);
}
}
function textmoins(monChamp) {
monChamp = (monChamp.parentNode.tagName.toLowerCase()=='td')?
monChamp.parentNode :
(monChamp.parentNode.parentNode.tagName.toLowerCase()=='td')?
monChamp.parentNode.parentNode :
'erreur';
if(monChamp=='erreur')
alert('Y a rien a enlever !');
else {
// alert(monChamp.tagName);
// monChamp.style.border = '';
var c = monChamp.lastChild;
// alert(c.tagName);
monChamp.removeChild(c);
}
}


--
Stephane Moriaux et son [moins] vieux Mac
Avatar
Alexis Coudeyras
"ASM" a écrit dans le message
de news: 44216359$0$19690$

correctif (mais mon IE en fait une cagade au remove) :

function textplus(montexte,monChamp) {
monChamp = (monChamp.parentNode.tagName.toLowerCase()=='td')?
monChamp.parentNode :
(monChamp.parentNode.parentNode.tagName.toLowerCase()=='td')?
monChamp.parentNode.parentNode :
'erreur';
if(monChamp=='erreur')
alert('Pas possible pour inserer !');
else {
var s = document.createElement('SPAN');
s.innerHTML = montexte;
// monChamp.style.border = '3px solid red';
monChamp.appendChild(s);
}
}
function textmoins(monChamp) {
monChamp = (monChamp.parentNode.tagName.toLowerCase()=='td')?
monChamp.parentNode :
(monChamp.parentNode.parentNode.tagName.toLowerCase()=='td')?
monChamp.parentNode.parentNode :
'erreur';
if(monChamp=='erreur')
alert('Y a rien a enlever !');
else {
// alert(monChamp.tagName);
// monChamp.style.border = '';
var c = monChamp.lastChild;
// alert(c.tagName);
monChamp.removeChild(c);
}
}


--
Stephane Moriaux et son [moins] vieux Mac


Merci, je mets ta solution de côté, mais la mienne marche, j'ai juste ajouté
un param pour modifier le positionnement de mon div (left, top, ...) sur les
champs problématiques afin qu'il ne soit en dessous d'aucun Select.

Avatar
Laurent Vilday
"Alexis Coudeyras" <acoudeyras@[NoSpam]amalthis.com> a écrit dans le message
de news: 441fed41$0$20943$
Bonjour, je cherche un moyen de connaître la position (absolute, c'est à
dire x et y) d'un champ dans une page Web.



http://www.quirksmode.org/js/findpos.html
http://developer.yahoo.com/yui/dom/index.html
http://developer.yahoo.com/yui/dom/docs/YAHOO.util.Dom.html#getX

..., il faut utiliser une fonction récursive pour obtenir la
position left et top de l'élément et de tous ses parents :

function getLeft(MyObject) {
if (MyObject.offsetParent)
return (MyObject.offsetLeft + getLeft(MyObject.offsetParent));
else
return (MyObject.offsetLeft);
}


Houla malheureux, il est, imo, préférable de réduire au maximum les
récursivités. Et là c'est possible, donc profitons-en.

function getLeft(MyObject)
{
var left = 0;
if ( MyObject.offsetParent )
{
while ( MyObject.offsetParent )
{
left += MyObject.offsetLeft;
MyObject = MyObject.offsetParent;
}
}
return left;
}

Ce qui ressemble beaucoup à la fonction findPosX du quirksblog, mise à
part le fait que findPosX utilise aussi la propriété .x pour être
compatible avec NS4 (plus très utile imo)

En lisant un peu la source de la library DOM de yahoo et le quirksblog,
il semblerait que quelques bugs existent suivant les navigateurs, le
type d'élément manipulé, le scrolling de la page et/ou de l'élément et
aussi lorsque certaines propriétés css sont appliquées à l'élément
(position:relative par exemple).

--
laurent