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

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager