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

**dragonfly** · 22/06/2007, 10h42

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

**Auteur** · 22/06/2007, 11h47

bonjour,

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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";

**dragonfly** · 22/06/2007, 12h07

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Auteur** · 22/06/2007, 12h14

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).

**dragonfly** · 22/06/2007, 12h25

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Auteur** · 22/06/2007, 16h44

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 : Sélectionner tout - Visualiser dans une fenêtre à part
```
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 CSS : Sélectionner tout - Visualiser dans une fenêtre à part
```
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.

**dragonfly** · 22/06/2007, 17h16

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

**Auteur** · 22/06/2007, 17h26

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 ?

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 ?

**dragonfly** · 25/06/2007, 14h14

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

mon input:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

ayant le style suivant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Voila

**dragonfly** · 25/06/2007, 17h00

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

**Auteur** · 25/06/2007, 18h13

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

ou

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**dragonfly** · 26/06/2007, 09h25

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

**SpaceFrog** · 26/06/2007, 09h28

sinon y'a les fieldset qui m'aident pas mal pour la mise en page dans les forms ...

**dragonfly** · 26/06/2007, 09h31

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...

**SpaceFrog** · 26/06/2007, 09h35

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

[message subliminal] fieldset fieldset fieldest [/message subliminal]

**dragonfly** · 26/06/2007, 09h41

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...

**SpaceFrog** · 26/06/2007, 09h42

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 ...

**dragonfly** · 26/06/2007, 09h49

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 ...

**SpaceFrog** · 26/06/2007, 11h25

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 ...

**dragonfly** · 27/06/2007, 10h53

Re tous,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

JavaScript

Discussions similaires

Partager

Partager