Discussion :

[Ulath0]

Bonjour,

Je suis en train d'ajouter un éditeur de texte (javascript) à un projet, et je bloque un peu sur la façon d'afficher un élément juste en dessous du bouton sur lequel on clique. En fait, exactement comme pour l'éditeur de messages de developpez.com ! (smileys, couleurs, ...).

J'ai en gros

Code :

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

1
2
3
4
5
6
7
8
9
 
<div id='A'>
<div id='B'>
...
<input type='button' onClick='showColorPalette()'/>
(ici : code de la palette)
...
</div>
</div>

Où le div 'A' est en positionnement absolu, et 'B' est en relatif (et float: left). Ma palette sera un bête tableau avec cases colorées + onClick, sans doute stockée ailleurs. Au pire, une pixmap. Comment l'afficher superposée au reste, juste en dessous du bouton flottant ?

[Note: j'ai trouvé ça http://jscolor.com/, mais je n'ai pas besoin de quelque chose d'aussi sophistiqué].

Merci d'avance.

[Ulath0]

En fait si le div 'B' était en position 'absolute', du cache-cache avec 'display block / none' suffirait a priori (http://marcarea.com/tuto/menu-deroulant-css/).

Dans le cas 'B' flottant, il semble que je puisse m'en sortir avec les z-index.

Enfin, sauf avis contraire, j'essayerai ça

[Ulath0]

Soit ça n'intéresse pas grand monde, soit c'est trivial pour tous sauf moi ^^ En tout cas, problème presque résolu par :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<div id='A'>
<div id='B'>
<div id='C'>
<input type='button'/>
(...)
<input type='button'/>
</div>
(...)
</div>
(...)
</div>

où le div 'C' est en absolute, avec width précisée. La palette se superpose alors sans broncher, et est utilisable (il ne me reste qu'à la positionner adroitement).

Un seul souci: lorsque la palette est visible, la zone de texte (une iframe) n'est plus éditable. C'est un peu embêtant (je fais mes tests sous google chrome pour l'instant). La zone de texte ne réagit alors même plus aux 'onClick', comme si elle était au second plan. Peut-être faut-il utiliser les z-index à ce stade... (?!) à suivre.

[omdafer]

Bonjour,
pour mettre un div en 'absolute', il lui faut un parent en 'relative' comme référence.
donc un 'absolute' dans un 'relative'.

Le problème de la zone de texte qui n'est plus éditable, c'est certainement un z-index qui ne sait pas à quoi faire référence et déborde sur la partie de la zone de texte.

En jouant avec la tabulation, je suis sûre qu'on peux mettre le focus sur la zone de texte et l'éditer mais on ne peux pas cliquer dessus.