Positionner une "div" par rapport a un "input"

Version imprimable

Bonjour à tous,

Etant donné que quand je met un formulaire dans un fieldset, ils ne sont pas à la même position sous IE, je ne peut pas utiliser une position (en px ou en %) pour mettre une div juste en dessous d'un input.

Donc je voudrais savoir comment faire pour en javascript, determiner la position du div en fonction de l'input:

Voila mon code :
Code:

1 2 3 4 5 6 7 8 9 <fieldset> <legend class="legende">Etude</legend> <form method="post" name="etudeform" id="etudeform" > <table border="0"> <tr> <td>Etude</td> <input type="text" id="numEtude" onkeyup="javascript:placerDiv('liste','ASP/affListe.asp?numero='+this.value);" name="numEtude" id="numEtude" value="<%=request.querystring("numEtude")%>" /> .....
J'ai essayé de faire ceci mais ca marche pas
Code:

1 2 3 4 5 6 7 // fonction permettant de placer correctement la div function placerDiv(id,url){ document.getElementById('liste').Top=document.getElementById('etudeform').numEtude.offsetTop+10; document.getElementById('liste').left=document.getElementById('etudeform').numEtude.offsetLeft+10; httprequest(id,url); }
J'ai regardé sur le forum mais je ne trouve pas, le code de la FAQ, je le comprend pas trop il ne me marche pas avec moi :aie:

Si quelqu'un a une idée...

bonjour,

Code:

1
2
3
document.getElementById('liste').style.top=document.getElementById('etudeform').numEtude.offsetTop+10+"px";
	document.getElementById('liste').style.left=document.getElementById('etudeform').numEtude.offsetLeft+10+"px";

22/06/2007, 12h07
dragonfly
Re,

Ca marche un peu mieux, les valeurs sont bien prises en compte et le div change de place mais pas a la bonne place.

De plus quand je fais:
Code:

1 2 alert(document.getElementById('etudeform').numEtude.offsetTop+10);
il m'affiche 1 alors que a vu de nez ca doit être 80-100 et donc le div se met tout en haut de l'ecran a 1 px du haut

EDIT : En regardant bien il se met en haut a droite de mon fieldset (ou du formulaire ) que se soit sous IE ou sous FF
22/06/2007, 12h14
Auteur

Si j'ai bien compris tu veux mettre une "infobulle" (formée par un div) sous ton input ?

Dis moi si ce script répond à ta question (il y a un exemple avec un input).
22/06/2007, 12h25
dragonfly
En gors , c'est a peu prés ca.

Sur le principe ca doit être ca mais par contre pour le code...
Je pige pas trop pourquoi tu te sert de l'offset de la bulle pour la placer ...

De plus mon div ne se trouve pas du tout dans le même container que l'input.

JE crois avoir pigé, en fait la valeur est prise a partir du formulaire qu lui même est pri a partir du fieldset qui doit être priq a partir du div ...

Donc y'aurai-t-il possibilité de faire un truc qui genre.
Code:

1 2 3 4 5 pour chaque parent de numEtude faire numEtude.top+=parent.top; numEtude.left+=parent.left fin de pour

Petite parenthèse : dans ton code tu as inversé les balises fieldset et form...

Visiblement ton code ressemble à un code d'auto-complétion.
Je suis parti de ton code HTML : à savoir que ton input se trouve dans une table.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title></title>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
<style type="text/css">
<!--
.bulle{
width: 160px;
position: absolute;
display: none;
z-index : 1;
background-color: #F4F49C;
padding: 2px;
margin: 15px 0px 0px 0px;
border: ridge 3px #F4F49C;
font-family: Arial;
font-size: 8pt;
}
 
//-->
</style>
 
 
<script type="text/javascript">
<!--
var idBulleT;
var chrono = null;
var delai = "500";
 
function afficheBulle(idBulle, parent)
{
  var bulle = document.getElementById(idBulle);
  var offset;
  var exp = new RegExp("^td_","gi");
 
  if (chrono!=null)
  {
     clearTimeout(chrono);
     cacheBulleT();
  }
 
  bulle.style.display = "block";
 
  if (exp.test(idBulle)==false)
  {
    if (parent.offsetLeft-bulle.offsetWidth<0)
       offset = 0;
    else
       offset = -bulle.offsetWidth;
  
    bulle.style.left = parent.offsetLeft+offset+"px";
  }
  idBulleT = idBulle;
}
 
function cacheBulleT()
{
 
  document.getElementById(idBulleT).style.display = "none";
  chrono = null;
}
 
function cacheBulle(idBulle)
{
  idBulleT = idBulle;
  chrono = setTimeout("cacheBulleT()",delai);
 
  //document.getElementById(idBulle).style.display = "none";
}
 
function mouseOverBulle()
{
  clearTimeout(chrono);
  chrono = null;
}
 
function mouseOutBulle()
{
   chrono = setTimeout("cacheBulleT()",delai);
}
 
 
//-->
</script>
 
 
<script type="text/javascript">
<!--
function placerDiv(liste, valeur)
{
 
}
 
//-->
</script>
 
</head>
 
<body>
<form name="" method="post" action="" enctype="">
  <fieldset>
    <legend>la legende</legend>
    <table border="1">
      <tr>
        <td>&nbsp;du texte</td>
        <td>
            <div>
            <input type="text" id="numEtude" onkeyup="afficheBulle('td_bulle1', this);placerDiv('td_bulle1','ASP/affListe.asp?numero='+this.value);" name="numEtude" id="numEtude" value="<%=request.querystring("numEtude")%>" />
            </div>
 
            <div class="bulle" id="td_bulle1" onmouseover="mouseOverBulle()" onclick="mouseOutBulle()">
            choix 1<br />
            choix 2<br />
            choix 3<br />
            choix 4<br />
            choix 5<br />
            choix 6
            </div>
 
        </td>
        <td>&nbsp;du texte</td>
        <td>&nbsp;du texte</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;du texte</td>
        <td>&nbsp;du texte</td>
        <td>&nbsp;du texte</td>
      </tr>
    </table>
 
 
  </fieldset>
</form>
 
 
 
</body>
 
</html>

J'ai laissé ta fonction placerDiv() sur le onkeyup : j'ai simplement remplacé le paramètre liste par l'id de la bulle (ici td_bulle1), comme ça tu pourras modifier son contenu à ta guise. J'ai précédé son appel par la fonction afficheBulle().

Par contre n'oublie pas de supprimer de ta fonction placerDiv(), tout le code qui permet le placement de la bulle, car la fonction afficheBulle() s'en charge ;)
J'ai encadré ton input d'un div.
La bulle se referme lorsque tu y cliques dedans (tu peux utiliser onmouseout) :

Code:

onclick="mouseOutBulle()"

Je l'ai placée juste après le div qui encadre l'input.
L'espace entre l'input et la bulle, tu peux le régler grâce à la CSS :
Code:

1 2 margin: 15px 0px 0px 0px;
ici il est de 15px (margin-top).
la bulle se trouve dans un tableau donc son id commence par td_ (cf. règle d'utilisation du script)

Une chose importante quand même : cette bulle n'est valable que pour cet input. Dans le lien que je te fournis, tu auras sans doute remarqué que chaque élément survolé a son info-bulle.

22/06/2007, 17h16
dragonfly

Re,

j'ai copié la solution que tu m'as donné (MERCI) mais elle ne m'affiche pas le div au bon endroit (pas au même endroit pour les 2 browsers IE et FF)mais...

Comme tu me l'a fait remarqué j'ai mi le fieldset avant le form donc j'ai remplacé et maintenant sous EI et FF l'input et à la même place, donc en donnant une place précise à mon div, il est placé correctement (0.5% d'écart).

Donc c'est en partie reglé, reste juste a voir en fonction des résolutions d'écran... et ca ne fonctionne pas du tout... snif snif

Je ne vois pas comment m'en sortir....

Edit : Avec ton code, en plus , la div s'affichent vachement plus bas, collé a un autre fieldset
22/06/2007, 17h26
Auteur

J'ai testé ce bout de code en 800x600 et en 1024x768, je n'ai aucun problème.

Tu n'aurais pas oublier de recopier la feuille de style de la bulle par hasard ?

Citation:

donc en donnant une place précise à mon div

euh... Ce n'est pas à toi de fixer le top et le left du div qui forme ton info-bulle.

Sinon montre moi ton code ;)
Et, comptes-tu placer plusieurs info-bulles dans ta page ?

Re,

Tu as passé un bon WE ?

Concernant mon piti probléme, en fait lorsque l'on tape quelque chose dans l'input, mon div apparait et affiche toues les données commencant par se qui est affiché.
Les données s'affichent mais pas a la bonne place => Je n'aurai besoin que d'une info bulle (div).
Voici mon code :

mon script.js ( un morceau)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 
var idBulleT;
var chrono = null;
var delai = "500";
 
function afficheBulle(idBulle, parent)
{
  var bulle = document.getElementById(idBulle);
  var offset;
  var exp = new RegExp("^td_","gi");
 
  if (chrono!=null)
  {
     clearTimeout(chrono);
     cacheBulleT();
  }
 
  bulle.style.display = "block";
 
  if (exp.test(idBulle)==false)
  {
    if (parent.offsetLeft-bulle.offsetWidth<0)
       offset = 0;
    else
       offset = -bulle.offsetWidth;
 
    bulle.style.left = parent.offsetLeft+offset+"px";
  }
  idBulleT = idBulle;
}
 
function cacheBulleT()
{
 
  document.getElementById(idBulleT).style.display = "none";
  chrono = null;
}
 
function cacheBulle(idBulle)
{
  idBulleT = idBulle;
  chrono = setTimeout("cacheBulleT()",delai);
 
  //document.getElementById(idBulle).style.display = "none";
}
 
function mouseOverBulle()
{
  clearTimeout(chrono);
  chrono = null;
}
 
function mouseOutBulle()
{
   chrono = setTimeout("cacheBulleT()",delai);
}

Ma div: (vide et qui se rempli avec les infos)

Code:

1
2
3
4
 
<div id="liste" onmouseover="mouseOverBulle()" onclick="mouseOutBulle()"> 
 
</div>

mon input:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
<form method="post" name="etudeform" id="etudeform" >
<fieldset>
<legend class="legende">Etude</legend>
	<table border="0">
		<tr>
		    <td>Etude</td>
		    <td>
			<img src="prec.gif" id="flec" alt="suivant" width="15px" height="15px" onCLick="httprequest('champsCache','ASP/affichage.asp?kel=prec','fleche');" />
				&nbsp;
				<input type="text" id="numEtude" onkeyup="javascript:afficheBulle('liste', this);placerDiv('liste','ASP/affListe.asp?numero='+this.value);" name="numEtude" id="numEtude" value="<%=request.querystring("numEtude")%>" />
				&nbsp;

Ce fieldset est contenu dans cette div:

Code:

1
2
3
4
 
<div id="etude"> 
  <!--#include file="asp/etude.asp"-->
</div>

ayant le style suivant:

Code:

1
2
3
4
5
6
 
div#etude{
	position:relative;top:0%;left:1%;
	width:45%;
	height:40%;
}

Voila

25/06/2007, 17h00
dragonfly

Je pense que le probléme vient du fait que dans ton exemple, la div se trouve dans le formulaire alors que dans mon code ma div se trouve dans un autre fichier... Si je la met sous l'input, je n'ai plus rien qui s'affiche dans la div:aie:
25/06/2007, 18h13
Auteur
Il est clair que le div id="liste" doit être sous l'input pour que l'affichage soit correct. Ce qui m'embête c'est que je comprends pas pourquoi ta liste reste vide si tu la places sous l'input et se remplit normalement (à défaut d'être bien positionnée) si tu la sorts du formulaire.

Il faudrait voir ton code côté client, pour voir s'il ne manque pas un morceau.

Ton div #etude en position relative, n'est pas le problème (d'ailleurs il encadre la balise form ou la balise fieldset ?)
Code:

1 2 3 4 5 6 7 8 9 <div id="etude"> <form name="" method="post" action="" enctype=""> <fieldset> ...... </fieldset> </form> </div>
ou
Code:

1 2 3 4 5 6 7 8 9 <form name="" method="post" action="" enctype=""> <div id="etude"> <fieldset> ...... </fieldset> </div> </form>
mais bon, quel que soit le cas, c'est sans importance ;)
26/06/2007, 09h25
dragonfly

Re,

Premiére solution, mon div encadre la balise form.
J'ai ressayé de mettre mon div sous l'input, l'affichage s'effectue mais y'a quelque piti probléme :

1- Le div ne s'affiche correctement (un peu trop bas et a gauche)
2- Quand je met le div aprés l'input, tout l'affichage aprés et decalé comme si j'avais une case invisible et c'est assez génant
26/06/2007, 09h28
SpaceFrog

sinon y'a les fieldset qui m'aident pas mal pour la mise en page dans les forms ...
26/06/2007, 09h31
dragonfly

C'est encore moi.

Finalement, quand je met la div liste en position:absolute, le reste de l'affichage ne se décale pas mais la div est trop a gauche.

Quand je met la div liste en position:relative, la div s'affiche parfaitement mais le reste de l'affichage est décalé et comme mon formulaire est dans un table, quand la div liste se rempli, elle agrandi le <tr> se qui donne un rendu assez horrible.

Il me faudrait un mix...
26/06/2007, 09h35
SpaceFrog

ha ben un table dans un form ... ça faut pas s'atendre à des merveilles ...

[message subliminal] fieldset fieldset fieldest [/message subliminal]
26/06/2007, 09h41
dragonfly

Je pige pas trop SpaceFrog, moi je met un tableau c'est pour aligner correctement, les libellés et les input.

Je ne vois pas trop comment avoir le même rendu avec des fieldsets...
J'en ai un met qui emglobe le tableau et donc tout les input...
26/06/2007, 09h42
SpaceFrog

un tableau n'est pas fait pour faire de la mise en page ...
parcontre un fieldset est un element de formulaire qui peut tout à fait être utilisé pour faire de la mise en page ...
26/06/2007, 09h49
dragonfly

Je vois ce que tu veut dire, mais je vois mal comment un fieldset peut faire de la mise en forme, je m'en sert juste pour mettre un joli cadre avec un titre ...:oops:
26/06/2007, 11h25
SpaceFrog

ben si tu enlèves la bordure du fieldset ... ça te permet davoir un conteneur pour l'alignement des inputs et des labels par exemple ...

Re tous,

Finalement, j'ai utilisé un facon un peu barbare, avec ce code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<div id='etude'>
<form method="post" name="etudeform" id="etudeform" >
<fieldset id="fieldsetEtude">
<legend class="legende">Etude</legend>
	<table border="0" id="tableauEtude" cellspadding="0" cellspacing="0">
		<tr id="trUnEtude">
		    <td id="tdUnEtude">Etude</td>
		    <td id="tdDeuxEtude">
				<!-- lien pour voir l'envoi d'avant et forcement aprés l'input on en fait un pour voir aprés l'input -->
				<!-- Ces fléches vont permettrent de gérer l'affichage des etudes déja remplie -->
				<img src="prec.gif" id="flec" alt="suivant" width="15px" height="15px" onCLick="httprequest('champsCache','ASP/affichage.asp?kel=prec','fleche');" />
				&nbsp;
				<input type="text" id="numEtude" onkeyup="javascript:placerDiv('liste','ASP/affListe.asp?numero='+this.value);" name="numEtude" id="numEtude" value="<%=request.querystring("numEtude")%>" />
				&nbsp;
...

Avec en .js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
function placerDiv(id,url){
	var top
	var left
	top=18+document.getElementById('etude').offsetTop+document.getElementById('etudeform').offsetTop;
	top=top+document.getElementById('fieldsetEtude').offsetTop+document.getElementById('tableauEtude').offsetTop;
	top=top+document.getElementById('numEtude').offsetTop+document.getElementById('trUnEtude').offsetTop;
	left=document.getElementById('etude').offsetLeft+document.getElementById('etudeform').offsetLeft;
	left=left+document.getElementById('fieldsetEtude').offsetLeft+document.getElementById('tableauEtude').offsetLeft;
	left=left+document.getElementById('numEtude').offsetLeft+document.getElementById('tdDeuxEtude').offsetLeft;
	left=left+document.getElementById('trUnEtude').offsetLeft;
	document.getElementById('liste').style.top=top+"px";
	document.getElementById('liste').style.left=left+"px";
	document.getElementById('liste').style.width=document.getElementById('numEtude').offsetWidth+"px";
	httprequest(id,url);
}

Je l'admet ce code JS est un peu bourrin (et tout laid) mais ca s'affiche le div ou il faut a quelques pixels prés de différences en fonction des navigateurs.

Pour alléger le code JS, je cherche toujours si il est possible de faire un truc du genre

Code:

1
2
3
4
5
 
 pour chaque parent de numEtude faire
      numEtude.top+=parent.top
      numEtude.left+=parent.left
 fin de pour

Je reviens sur mon idée de départ, la c'est juste pour simplifier le JS et pourquoi pas pour supprimer la différence de quelques pixels...

MERCI d'avance