Discussion :

[JujuPomme]

Bonjour à tous,

Je viens à vous avez un petit soucis.

Je suis actuellement en train de réaliser un site web responsive qui doit être relativement bien pensé afin d'être ergonomique le plus possible.

J'ai une liste déroulante faite avec le plugin Jquery multiSelect.

Ce que j'aimerais, c'est lors qu'on réduit la taille de la fenêtre, a peu près à la taille d'un smartphone, en face de chaque option s'affiche une image que l'on peut cliquer, qui affiche des informations.

J'ai déjà essayer plusieurs choses, mais je n'arrive même pas à afficher l'image en face des lignes...

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
<div class="form-group selectBox">
		<label class="col-sm-3 control-label" for="listeGroupe">Groupe de destinataire :</label>
			<div class="col-sm-9">
				<select name="listeGroupe" id="listeGroupe" multiple style="width:100%; style:true;" class="selectListeDest" >
				<?php
				if ( isset($_SESSION['groupe_liste']) ) {
					$total = count($_SESSION['groupe_liste']);
					for ( $i = 0; $i < $total; $i++ ) {
						?>
							<option   value="<?php echo $_SESSION['groupe_liste'][$i]['CODE']; ?>" class="pos" title="<?php 
							$total_destinataires = count($_SESSION['liste_destinataires_groupe']);
 
							for ($x = 0; $x < $total_destinataires; $x++) {
 
									if ($_SESSION['groupe_liste'][$i]['CODE'] == $_SESSION['liste_destinataires_groupe'][$x]['CODE']) {
						/* Un hover axé pour la partie site web */
				                                                echo $_SESSION['liste_destinataires_groupe'][$x]['NOM'];
										echo ('  -  ');
									} 
								} 
 
						?>">
						<?php echo $_SESSION['groupe_liste'][$i]['NOM_GROUPE']; ?>
						</option>
					<?php
					}
				} else {
					?>
					<option value="#">Aucun groupe de destinataire</option>
				<?php   
				}
				?>
				</select>
			</div>
	</div>

Le bout de code qui concerne ce problème.

Un tuto? Peut-être une solution?

Je vous remercie d'avance,

Cordialement,

[Invité]

Bonjour,

on est dans le forum CSS : donc, pas de code PHP...

Il faudrait voir le code source HTML généré ("Ctrl"+"U" ou clic droit-> "Afficher la source")

[JujuPomme]

Bonjour,


Autant pour moi,
Voici la partie concernée générée par le HTML. Par soucis de confidentialité, j'ai enlevé les noms, les id et les groupes, d'ou mes valeurs...

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
	<div class="form-group selectBox">
		<label class="col-sm-3 control-label" for="listeDestinataires">Autres Destinataires :</label>
		<div class="col-sm-9">
			<select name="listeDestinataires" id="listeDestinataires" class="selectListeDest" multiple style="width:100%;">
				<optgroup label='Destinataires'>
											<option value="unID">Un nom</option>
											<option value="unID">Un nom</option>
											<option value="unID">Un nom</option>
											<option value="unID">Un nom</option>
											<option value="unID">Un nom</option>
				</optgroup>
				<optgroup label='Groupe de destinataires'>
											<option   value="unID" class="pos" title="Des noms">Un groupe</option>
											<option   value="unID" class="pos" title="Des noms">Un groupe</option>
											<option   value="unID" class="pos" title="Des noms">Un groupe</option>
				</optgroup>
			</select>
		</div>
	</div>

Merci de l'intérêt que vous portez à mon post !

[Christophe P.]

Bonjour,

la bibliothèque JavaScript DHTMLX permet des listes déroulantes avec des images, cela pourrait peut-être vous donner des idées, à défaut de l'utiliser.

[JujuPomme]

Bonjour,

Merci, c'est bon à prendre !

Ce qui m'intéresse le plus, c'est surtout le côté responsive : faire apparaître une image d'une bulle d'information sur smartphone. Etant géré sur PC, c'est ce côté là qui me manque...

Merci d'avoir pris le temps de me répondre !

[Invité]

Bonjour,

Code :

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

<option   value="unID" class="pos" title="Des noms">Un groupe</option>

• où est le CSS censé afficher les images ?
• Et où sont les images ?

Et si tu pouvais faire un dessin de ce que tu cherches à obtenir...

A voir aussi :

• Créer un plugin jQuery : une liste déroulante personnalisée

[JujuPomme]

Bonjour,

Justement, là est le problème, je ne sais pas de quelle manière les afficher. J'ai déjà essayer plusieurs choses afin de les inclure après la checkbox et le nom, mais sans vain.

Un dessin? mmh.. Paint, rapidement : https://gyazo.com/4c66792b9f8867110763b9e8637c97f4

En gros un smartphone (oui oui, un smartphone) avec sa liste déroulante. Les pastilles au bout, sont la bulle info, qui au clic avec le doigt, fais afficher des informations.

Sur pc, c'est géré sans infoBulle, au survol de l'option. Du coup, il faudrait que la bulle puisse s'afficher seulement à partir d'une certaine dimension (media-queries <3)

[JujuPomme]

Après avoir travailler les média queries, j'ai triché un peu pour résoudre mon problème. Je n'affiche plus d'image dans ma liste, mais une seule qui, au clic, affiche le contenu de mes listes...

#ROOKIE

Bonne journée !