Liste déroulante : changer la largeur

Le
Gloops
Bonjour tout le monde,

Est-il possible de modifier après affichage de la page la largeur d'une=

liste déroulante ?

Par exemple, si j'ai une liste qui se charge avec "ici on verra des
trucs et des machins" et "ici on verra des machins et des trucs", et que =

mon script modifie le contenu pour le remplacer par "trucs" et
"machins", IE conserve la largeur du texte initial, ce qui fait que j'ai =

une liste déroulante énorme pour dire très peu de chose. Un peu com=
me
quelqu'un qui loue une salle pour toute une journée pour dire qu'il ple=
ut.

En fait le but est d'avoir au départ un texte qui signale qu'avec un
script on aurait autre chose, et une fois que le script a fait son
boulot la place nécessaire est moindre.

J'ai bien mis style="width:50px", mais on garde la largeur donnée de =
la
même manière au chargement, à défaut celle correspondant à la l=
argeur du
texte initial.

Une idée ?
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses Page 1 / 2
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Doug713705
Le #25975382
Le 06-02-2014, Gloops nous expliquait dans
fr.comp.lang.javascript
(
Bonjour tout le monde,



Bonjour,

Est-il possible de modifier après affichage de la page la largeur d'une
liste déroulante ?

Par exemple, si j'ai une liste qui se charge avec "ici on verra des
trucs et des machins" et "ici on verra des machins et des trucs", et que
mon script modifie le contenu pour le remplacer par "trucs" et
"machins", IE conserve la largeur du texte initial, ce qui fait que j'ai
une liste déroulante énorme pour dire très peu de chose. Un peu comme
quelqu'un qui loue une salle pour toute une journée pour dire qu'il pleut.

En fait le but est d'avoir au départ un texte qui signale qu'avec un
script on aurait autre chose, et une fois que le script a fait son
boulot la place nécessaire est moindre.

J'ai bien mis style="width:50px", mais on garde la largeur donnée de la
même manière au chargement, à défaut celle correspondant à la largeur du
texte initial.

Une idée ?




Il faut jouer utiliser style.width sur l'objet select en question :

<select style='width:300px;' width='300px'
onmouseover="javascript:this.style.width='200px';">
<option value='42'>Obi One Kenobi</option>
</select>


--
Petite soeur-soleil au bout du quai désert
Petite gosse fugitive accrochée dans mes nerfs
Je t'ai rêvée ce soir au fond d'une ambulance
Qui me raccompagnait vers mes verts paradis
-- H.F. Thiéfaine, Redescente climatisée
Gloops
Le #25976032
Doug713705 a écrit, le 06/02/2014 23:28 :
Il faut jouer utiliser style.width sur l'objet select en question :

<select style='width:300px;' width='300px'
onmouseover="javascript:this.style.width='200px';">
<option value='42'>Obi One Kenobi</option>
</select>






Effectivement, ça marche, merci.

J'étais pourtant persuadé d'avoir essayé style avec une minuscule e t de
m'être fait jeter (c'est dans une application ASP.Net, donc il y a un
contrôle de syntaxe au démarrage.

J'aurais dû écrire un fichier HTML simple de test, en plus j'aurais e u
une boucle de test plus courte.

Pour la petite histoire il faut savoir que la liste déroulante, select,
a deux propriétés style et Style, qui peuvent avoir des valeurs
différentes (la casse est donc importante), et que IE ignore Style.

Si je dis alert(lst.Style), pour afficher donc celle qui est ignorée, ç a
m'affiche bien la valeur que je lui ai donnée (j'ai mis 100 alors que l a
liste va être affichée en 75, ce qui illustre bien l'indépendance d es
deux propriétés). Si je dis alert(lst.style), ça m'affiche [object
CSS2Properties].

Je n'ai pas réussi à mettre ça dans une zone de texte, et comme c'é tait
juste pour le mettre ici je ne vais pas insister longtemps, d'ailleurs
je note au passage que sous Firefox il y a ça de pratique que je peux
copier ce qui est affiché par alert().


Bon, maintenant si select a deux propriétés style et Style, je peux
m'attendre à ce que certains navigateurs reconnaissent l'une, et
d'autres l'autre ?
Gloops
Le #25976062
En principe, si je mets ça, j'ai fait le tour ?

lst.Style = "width:75px";
lst.Style.width = "75px";
lst.style.width = "75px";
lst.width = "75px";
Doug713705
Le #25976652
Le 07-02-2014, Gloops nous expliquait dans
fr.comp.lang.javascript
(
Pour la petite histoire il faut savoir que la liste déroulante, select,
a deux propriétés style et Style, qui peuvent avoir des valeurs
différentes (la casse est donc importante), et que IE ignore Style.



Jamais entendu parler de ça.

Si je dis alert(lst.Style), pour afficher donc celle qui est ignorée, ça
m'affiche bien la valeur que je lui ai donnée (j'ai mis 100 alors que la
liste va être affichée en 75, ce qui illustre bien l'indépendance des
deux propriétés)



Tu as mis 75 à lst.Style ? Ça en fait une propriété de lst. Du coup tu
as simplement donné une valeur à la propriété Style de l'objet lst.
Propriété que tu viens de définir dans le même temps.

Si je dis alert(lst.style), ça m'affiche [object CSS2Properties].



Ce que tu cherches n'est pas lst.style mais lst.style.width : la
largeur(width) de ta liste(lst) définie dans le style qui lui est
appliqué(style).

Ce que tu as voulu afficher c'est la totalité du style en lui même.

Je n'ai pas réussi à mettre ça dans une zone de texte, et comme c'était
juste pour le mettre ici je ne vais pas insister longtemps, d'ailleurs
je note au passage que sous Firefox il y a ça de pratique que je peux
copier ce qui est affiché par alert().


Bon, maintenant si select a deux propriétés style et Style, je peux
m'attendre à ce que certains navigateurs reconnaissent l'une, et
d'autres l'autre ?



Il faudrait déjà qu'une propriété Style existe ;-)

--
J'suis la môme kaléidoscope.
J'avais des actions dans l'bitume
Mais j'taillais même celle du clodo
Qu'avait jamais l'ombre d'une thune.
-- H.F. Thiéfaine, La môme kaléïdoscope
Doug713705
Le #25976642
Le 07-02-2014, Gloops nous expliquait dans
fr.comp.lang.javascript
(
En principe, si je mets ça, j'ai fait le tour ?

lst.Style = "width:75px";
lst.Style.width = "75px";
lst.style.width = "75px";
lst.width = "75px";



Il y a 3 lignes inutiles et la seule valable est :
lst.style.width = "75px";

--
Chez les vieilles qui trafiquent le spleen,
T'as bouffé tes nerfs et tes nuits
Et maintenant tu cherches une combine
Pour domestiquer nos envies.
-- H.F. Thiéfaine, L'homme politique, le rollmops et la cuve à mazout
Gloops
Le #25976692
Doug713705 a écrit, le 07/02/2014 13:23 :
Il faudrait déjà qu'une propriété Style existe ;-)





Ah, oui, ben on n'est pas rendus :

http://msdn.microsoft.com/fr-fr/library/system.windows.forms.htmlelement. style%28v=vs.110%29.aspx

En tout cas merci pour le coup de main.
Doug713705
Le #25977932
Le 07-02-2014, Gloops nous expliquait dans
fr.comp.lang.javascript
(
Doug713705 a écrit, le 07/02/2014 13:23 :
Il faudrait déjà qu'une propriété Style existe ;-)





Ah, oui, ben on n'est pas rendus :

http://msdn.microsoft.com/fr-fr/library/system.windows.forms.htmlelement.style%28v=vs.110%29.aspx



Tu fais du C# ou du JavaScript ?
Parce que ton lien renvoie vers une doc pour le C# et, a priori, le C#
le navigateur s'en tamponne le coquillard.

Pour la doc développement web, préfère n'importe quoi sauf une doc
Microsoft !

Une vraie bonne doc, c'est là :
http://www.w3schools.com/

En tout cas merci pour le coup de main.



De rien.

--
Et tu cherches une vérité par-delà l'espace
Ouais, tu cherches une vérité par-delà l'espace
-- H.F. Thiéfaine, Le chant du fou
SAM
Le #25984892
Le 07/02/14 13:56, Gloops a écrit :

En tout cas merci pour le coup de main.



Je n'ai rien compris à ce select qui ne s'adapte pas à ses changements

Pour changer le contenu d'un 'select', en JavaScript de nos grand'
mères, on ferait :

function modifSelect(s, Lst) ( // 's' est le select visé
Lst = Lst.split(','); // liste des éléments en tableau
s.length = 0; // on "vide" le select
var o, c = Lst.length;
while(c--) { // on re-remplit le select
o = new Option(Lst[c]);
s[s.length] = o;
}
}

Et là, même IE devrait y arriver.



De styler un élément en pixels alors qu'il doit être dimensionné en
fonction d'un nombre de caractères est une hérésie !
Ça ne respecte pas les particularismes des différents visiteurs et de
leurs navigateurs (leurs configurations) (mon Safari n'est pas réglé
comme mon Fx ni comme mon Chrome).

J'en ai un peu raz l'bol de voir des menus qui sont illisibles (le texte
débordant des cases prévues) ou inexploitables car ne rentrant pas en
ligne dans l'espace alloué par le concepteur à courte vue et dont alors
les survols ne déplient pas les sous-menus voulus.



Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
SAM
Le #25986412
Le 10/02/14 20:17, SAM a écrit :

Et là, même IE devrait y arriver.



Ha! Ben non ! Glops ! typos :-(

Test en ligne :


Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Duzz'
Le #25986472
Le Mardi 11 Fevrier 2014 à 12:02, SAM a écrit :
Le 10/02/14 20:17, SAM a écrit :

Et là, même IE devrait y arriver.



Ha! Ben non ! Glops ! typos :-(

Test en ligne :



IE9 adapte bien la largeur à "anticonstitutionnellement".


--
Article publié avec Nemo :
Publicité
Poster une réponse
Anonyme