[JavaScript] [SRC] Listes déroulantes avec images

[Auteur]

bonjour,

Auteur : auteur
Description : listes déroulantes : textes seuls, textes et images, ou images seules
Sources : cf. pièce jointe. Vous y trouverez :

• lisez-moi2.txt
• menuImg2.htm
• menuImgTxt2.htm
• menuTxt2.htm
• une série d'images gif

Remarques : j'ai fait le code avec un doctype, pour limiter les problèmes d'incompatibilité.

[Auteur]

J'ai demandé à trotters213 de tester les scripts sous Opéra et Firefox :

Envoyé par trotters213

Je viens de tester tes listes donc voilà ce qui en sort :
Tous tes menus passent bien sous Opera 9 et FF mais pas sous IE 6 (les listes déroulantes ne sont pas assez large donc il y a un scroll horizontal

Il y a également un bug d'affichage si on réduit la taille du navigateur en largeur mais bon il faut être pour réduire autant son navigateur mais je préfère te le dire.

Il y a un truc que je trouve pas bien c'est que lorque tu as une liste avec un texte très long, la liste la plus à gauche est toujours sous celle de droite.

PS : pourquoi ne pas avoir fait ces listes en XHTML ???

Merci à trotters213 d'avoir pris le temps de tester ces scripts.

• Pour le scroll horizontal, cela peut s'arranger en jouant sur le paramètre width des éléments.

• Il y a un truc que je trouve pas bien c'est que lorque tu as une liste avec un texte très long, la liste la plus à gauche est toujours sous celle de droite.

  là aussi c'est juste un paramètre : z-index Seul souci est qu'il faudra le définir pour chaque élément.

• Il y a également un bug d'affichage si on réduit la taille du navigateur en largeur

  sans doute à cause du paramètre float:left des listes et des boutons.

PS : pourquoi ne pas avoir fait ces listes en XHTML ???

euh As tu un exemple ?

[FremyCompany]

Envoyé par Auteur

• Pour le scroll horizontal, cela peut s'arranger en jouant sur le paramètre width des éléments.
• 
  là aussi c'est juste un paramètre : z-index Seul souci est qu'il faudra le définir pour chaque élément.
• sans doute à cause du paramètre float:left des listes et des boutons.

Je n'ai pas réussi à corriger de manière durable le problème de scrollBar sur IE... Comment faire pour que TOUT s'affiche sans problème en tenant compte de la scrollBar quelque soit le contenu de ta liste ?

[Auteur]

Envoyé par FremyCompany

Je n'ai pas réussi à corriger de manière durable le problème de scrollBar sur IE... Comment faire pour que TOUT s'affiche sans problème en tenant compte de la scrollBar quelque soit le contenu de ta liste ?

je crois que cela vient du style item :

Code :

1
2
3
4
5
6
7
8
 
.Item{               /** Style des elements de la liste **/
margin-left: 1px;
margin-top: 0px;
margin-right: 1px;
margin-bottom: 0px;
width: 95%;          /** 90% a cause de l'ascenseur du div "idListe" **/
}

J'ai cru que c'était le texte qui faisait apparaître la barre de défilement horizontale.
Je crois plutôt que c'est la largeur de l'item (un p contenu dans un div) : dans les exemples la largeur de l'item (un p) est à 95% du conteneur (div de class liste). Regarde si tu ne peux pas faire disparaître le scroll horizontal en diminuant cette valeur. (90%-80% par exemple). De préférence garde une valeur en pourcent.

[edit]Correction : les pages sont valides HTML 4.01 strict (j'ai ajouté la balise form, encadré les input de div et placé l'attribut alt dans les images). J'ai mis à jour le ficher zip. J'ai diminué la largeur des paragraphes de classe item (width: 90%)[/edit]

[trotters213]

Voici les listes En XHTML 1.0 Strict pour ceux qui souhaitent conserver une compatibilité XHTML : listes.rar

[cacoun]

Envoyé par Auteur

bonjour,

Comment fait-on pour récupérer l'info ??? en php ?

[Auteur]

bonjour,

dans le code HTML il y a un champ hidden associé à chaque liste :

Code html :

1
2
3
4
 
  <div>
      <input type="hidden" value="_" id="idHidden1" />
  </div>

sa valeur est mise à jour lors de l'appel de la fonction cacheItem(). Dans MenuTxt et MenuImgTxt, c'est le texte (msg) qui est placé dans ce champ. Pour MenuImg, c'est l'id de l'image sélectionnée qui est dans ce champ (idImage).

Pour récupérer la valeur sélectionnée, il faut interroger ce champ hidden.

[edit]
Bien entendu il faut que les champs hidden soient dans un formulaire (balises <form>).
[/edit]