Montrer ou cacher avec des conditions

Version imprimable

24/05/2014, 22h24
NorthLight

Montrer ou cacher avec des conditions

Bonsoir à tous.

Je suis débutant en matière de programmation, alors pitié soyez indulgent :)

Je suis administrateur d'un forum sous IP board 3.
J'utilise un template pour la mise en page des nouveaux sujets.
Le membre a juste des cases à remplir.
Pour certains liens j'ai utilisé des images cliquables.
J'aimerais pouvoir masquer certains boutons quand le champs n'a pas été rempli.
Comment puis-je faire ?

Voici comment se présente ma ligne de code :

Code:

<a data-ipb="nomediaparse" href="{81_value}" target="_blank"><img src="http://forum.android-mt.com/uploads/images/img_-1400960452-U3.png"></a>

A savoir que {81_value} est le champ qui est rempli ou non.

J'espère être assez clair et ne pas m'être trompé de section pour poster.

Merci d'avance à l'âme charitable qui passera par là :)
26/05/2014, 17h53
Watilin

Citation:

Envoyé par NorthLight

Bonsoir à tous.

Je suis débutant en matière de programmation, alors pitié soyez indulgent :)

Bonjour NorthLight,

voici un début de réponse : afficher ou cacher un élément avec JavaScript
Ceci nécessite que ton lien ait un id, il faudra donc que tu modifies un peu le template.

Pour les conditions, un autre élément de réponse : Vérifier qu'un champ de forumlaire est rempli
Même remarque qu'au-dessus, il faut que tu ajoutes un id sur chacun des champs que tu veux contrôler.

Conseil : ajoute un texte alternatif (attribut alt) à tes images, car si une d'entre elles ne charge pas (ou si le navigateur n'est pas visuel), l'utilisateur ne verra pas le lien et ne pourra pas cliquer dessus.

D'un point de vue accessibilité, il est peut-être préférable d'utiliser un <button> à la place d'un <a> et de le désactiver plutôt que de le masquer. Au moins, l'utilisateur sait dès le départ où il devra cliquer à la fin.

Une dernière remarque à propos de :

Citation:

A savoir que {81_value} est le champ qui est rempli ou non.

Tu as donc mis un champ dans un attribut href ? Ou peut-être que j'ai mal compris. Une fois le template interprété, quel code HTML exactement est généré à la place de {81_value} ?

Citation:

Envoyé par Watilin

Bonjour NorthLight,

Tout d'abord, un grand merci pour l'aide. :)

Citation:

voici un début de réponse : afficher ou cacher un élément avec JavaScript
Ceci nécessite que ton lien ait un id, il faudra donc que tu modifies un peu le template.

merci pour le lien, je vais me pencher dessus sérieusement.

Comment j'ajoute un id ?

Citation:

Conseil : ajoute un texte alternatif (attribut alt) à tes images, car si une d'entre elles ne charge pas (ou si le navigateur n'est pas visuel), l'utilisateur ne verra pas le lien et ne pourra pas cliquer dessus.

Code:

<a data-ipb="nomediaparse" href="{81_value}" target="_blank"><img src="http://forum.android-mt.com/uploads/images/img_-1400960452-U3.png" alt="Cliquez-ici"></a>

Bon ?

Citation:

D'un point de vue accessibilité, il est peut-être préférable d'utiliser un <button> à la place d'un <a> et de le désactiver plutôt que de le masquer. Au moins, l'utilisateur sait dès le départ où il devra cliquer à la fin

Ok merci beaucoup du conseil.
Mais je ne comprend pas pourquoi tu dis :"Au moins, l'utilisateur sait dès le départ où il devra cliquer à la fin".
Que veux tu dire ?

Édit : j'ai essayé avec la balise <button> mais je trouve que c'est moins joli. Mes images sont elles mêmes des boutons et certaines rondes.

Citation:

Une dernière remarque à propos de :

Tu as donc mis un champ dans un attribut href ? Ou peut-être que j'ai mal compris. Une fois le template interprété, quel code HTML exactement est généré à la place de {81_value} ?

oui, je crois bien que j'ai fait ça :)
Il ne faut pas ?
{81_value} est un URL, lien vers réseau social ce qui donne donc un bouton Twitter par exemple qui renvois vers un compte Twitter
Mon code sort au final

Code:

<a data-ipb="nomediaparse" href="http://.................." target="_blank"><img src="http://forum.android-mt.com/uploads/images/img_-1400960452-U3.png"></a>

je suppose.
Ai-je bien compris ?

Un grand merci de m'aider :)
Franchement je pars de 0, je galère un peu ...

Sinon voici mon script en entier si t'as des suggestions :
Code:

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 <center>{1_value}</center> <center> {84_value} {86_value}</center> <img src="http://nsm08.casimages.com/img/2014/04/14//14041404264317459612148925.png" alt="Image IPB" class="bbc_img" />Présentation : {45_label}{45_value} {9_label}{9_value} <img src="http://nsm08.casimages.com/img/2014/04/14//14041404264417459612148926.png" alt="Image IPB" class="bbc_img" />Photos et vidéos : {8_label} {8_value} {46_label} {46_value} {47_label} {47_value} {48_label} {48_value} {49_label} {49_value} {43_label}{43_value} <img src="http://nsm08.casimages.com/img/2014/04/14//14041404264417459612148927.png" alt="Image IPB" class="bbc_img" />Installation : {52_label} {52_value} {53_label} {53_value} <center>Téléchargement : <img src="http://nsm08.casimages.com/img/2014/04/14//14041404264517459612148929.png" alt="Image IPB" class="bbc_img" /> <a data-ipb="nomediaparse" href="{4_value}" target="_blank">{58_value}</a> <a data-ipb="nomediaparse" href="{56_value}" target="_blank">{59_value}</a> <a data-ipb="nomediaparse" href="{57_value}" target="_blank">{60_value}</a> </center> <img src="http://nsm08.casimages.com/img/2014/04/14//14041404264517459612148928.png" alt="Image IPB" class="bbc_img" />Liens utiles : <a data-ipb="nomediaparse" href="{10_value}" target="_blank"><img src="http://forum.android-mt.com/uploads/images/img_-1400345637-U3.png"></a> <a data-ipb="nomediaparse" href="{62_value}" target="_blank">{63_value}</a> <a data-ipb="nomediaparse" href="{82_value}" target="_blank"><img src="http://forum.android-mt.com/uploads/images/img_-1400960206-U3.png"></a> <a data-ipb="nomediaparse" href="{80_value}" target="_blank"><img src="http://forum.android-mt.com/uploads/images/img_-1400960345-U3.png"></a> <a data-ipb="nomediaparse" href="{81_value}" target="_blank"><img src="http://forum.android-mt.com/uploads/images/img_-1400960452-U3.png"></a>

Citation:

Envoyé par NorthLight

Tout d'abord, un grand merci pour l'aide. :)

Mais de rien ;)

Citation:

Comment j'ajoute un id ?

Tout simplement en mettant un attribut id="..." à ta balise, par exemple :

Code:

<a id="bouton-facebook" ...><img ...></a>

Ainsi tu peux y accéder en JavaScript en appelant document.getElementById("image-cliquable-1").
Tu peux choisir ce que tu veux comme id du moment que tu es sûr qu'il n'y en a qu'un seul identique dans la page.

Citation:

Code:

<a data-ipb="nomediaparse" href="{81_value}" target="_blank"><img src="http://forum.android-mt.com/uploads/images/img_-1400960452-U3.png" alt="Cliquez-ici"></a>

Bon ?

C'est exactement ça :) Essaye peut-être de mettre un texte plus précis, par exemple « partager sur Facebook ».

Edit: Pour les images seulement décoratives, c'est mieux de mettre une chaîne vide alt="". La difficulté est de décider si une image apporte de la signification au contenu, et donc s'il faut qu'elle ait un équivalent dans les logiciels non visuels. Par exemple : les images cliquables sont importantes cat l'utilisateur interagit avec. Les petits bonshommes Android oranges, à mon avis, ne sont pas importants : ils accompagnent les titres, ils décorent.

Citation:

Mais je ne comprend pas pourquoi tu dis :"Au moins, l'utilisateur sait dès le départ où il devra cliquer à la fin".
Que veux tu dire ?

Eh bien au début, les champs requis sont vides donc le lien est masqué, non ? Si un utilisateur, avant de commencer à remplir, remarque qu'il n'y a pas de bouton pour soumettre le formulaire, il va peut-être se dire qu'il y a une erreur dans la page, et essayer divers trucs qu'on fait sans trop réfléchir comme rafraîchir la page ou aller vérifier s'il n'y a pas un problème dans les paramètres de son navigateur. Bien sûr, c'est un exemple éxagéré, mais ce que je veux dire, c'est qu'il y a un risque de perturber l'utilisateur et de lui faire perdre du temps. Alors qu'un bouton visble mais désactivé indique clairement qu'il y a quelque chose d'incomplet dans le formulaire (sauf s'il y a effectivement une erreur dans la page :aie:).

Citation:

Édit : j'ai essayé avec la balise <button> mais je trouve que c'est moins joli. Mes images sont elles mêmes des boutons et certaines rondes.

Effectivement cette balise est moche ; en te parlant de ça j'oubliais que tu avais des images dans les liens. En plus de ça elle est difficile à maquiller avec CSS car il y a certains styles qui ne marchent pas sur les éléments de formulaire. Je te propose d'essayer à la place un <input type="image"> : c'est un mélange entre <input type="submit"> et <img> :

Code:

<input type="image" src="http://forum.android-mt.com/uploads/images/img_-1400960452-U3.png" alt="Cliquez-ici">

Il n'a pas de href car il est prévu pour fonctionner avec un élément <form>. S'il n'y a pas de <form>, il ne réagit pas quand on clique dessus. On va donc utiliser une ligne de JavaScript pour simuler un href. Je reviendrai là-dessus juste après.

Il y a aussi ce data-ipb="nomediaparse", je ne sais pas si c'est important, je ne connais pas Ipboard. Pour l'instant, faisons comme si on n'en avait pas besoin.

Une autre solution, plus facile, c'est de garder ton code actuel (lien + image), et rendre le lien à moitié transparent (avec CSS, opacity: 0.5;) pour indiquer qu'il est désactivé.

Citation:

Citation:

Tu as donc mis un champ dans un attribut href ?

oui, je crois bien que j'ai fait ça :)
Il ne faut pas ?
{81_value} est un URL, lien vers réseau social ce qui donne donc un bouton Twitter par exemple qui renvois vers un compte Twitter

Si c'est une URL d'accord, mais comme au début tu as dit :

Citation:

A savoir que {81_value} est le champ qui est rempli ou non.

Je pensais qu'il s'agissait d'un champ de formulaire, c'est-à-dire un <input>. Évidemment on ne peut pas mettre un <input> dans un href.

Citation:

Mon code sort au final

Code:

<a data-ipb="nomediaparse" href="http://.................." target="_blank"><img src="http://forum.android-mt.com/uploads/images/img_-1400960452-U3.png"></a>

je suppose.

Normalement tu n'as pas à supposer : tu fais Ctrl+U dans ton navigateur et tu vois le code généré. Ou sinon, utilise l'inspecteur web de ton navigateur.

Évidemment moi je ne peux pas voir le code généré. Pour te donner une idée, voilà ce que je vois :
http://i.imgur.com/zjfqkmn.png
Citation:
Sinon voici mon script en entier si t'as des suggestions :
Code:

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 <center>{1_value}</center> <center> {84_value} {86_value}</center> <img src="http://nsm08.casimages.com/img/2014/04/14//14041404264317459612148925.png" alt="Image IPB" class="bbc_img" />Présentation : {45_label}{45_value} {9_label}{9_value} <img src="http://nsm08.casimages.com/img/2014/04/14//14041404264417459612148926.png" alt="Image IPB" class="bbc_img" />Photos et vidéos : {8_label} {8_value} {46_label} {46_value} {47_label} {47_value} {48_label} {48_value} {49_label} {49_value} {43_label}{43_value} <img src="http://nsm08.casimages.com/img/2014/04/14//14041404264417459612148927.png" alt="Image IPB" class="bbc_img" />Installation : {52_label} {52_value} {53_label} {53_value} <center>Téléchargement : <img src="http://nsm08.casimages.com/img/2014/04/14//14041404264517459612148929.png" alt="Image IPB" class="bbc_img" /> <a data-ipb="nomediaparse" href="{4_value}" target="_blank">{58_value}</a> <a data-ipb="nomediaparse" href="{56_value}" target="_blank">{59_value}</a> <a data-ipb="nomediaparse" href="{57_value}" target="_blank">{60_value}</a> </center> <img src="http://nsm08.casimages.com/img/2014/04/14//14041404264517459612148928.png" alt="Image IPB" class="bbc_img" />Liens utiles : <a data-ipb="nomediaparse" href="{10_value}" target="_blank"><img src="http://forum.android-mt.com/uploads/images/img_-1400345637-U3.png"></a> <a data-ipb="nomediaparse" href="{62_value}" target="_blank">{63_value}</a> <a data-ipb="nomediaparse" href="{82_value}" target="_blank"><img src="http://forum.android-mt.com/uploads/images/img_-1400960206-U3.png"></a> <a data-ipb="nomediaparse" href="{80_value}" target="_blank"><img src="http://forum.android-mt.com/uploads/images/img_-1400960345-U3.png"></a> <a data-ipb="nomediaparse" href="{81_value}" target="_blank"><img src="http://forum.android-mt.com/uploads/images/img_-1400960452-U3.png"></a>
Ça c'est pas un script, c'est du code HTML avec des chaînes à remplacer. Moi j'appelle ça un template.
Tu l'as fait entièrement ou tu as modifié un truc existant ?