IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Montrer ou cacher avec des conditions


Sujet :

JavaScript

  1. #1
    Candidat au Club
    Profil pro
    Inscrit en
    Décembre 2013
    Messages
    4
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2013
    Messages : 4
    Points : 4
    Points
    4
    Par défaut 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 html : Sélectionner tout - Visualiser dans une fenêtre à part
    <p><a data-ipb="nomediaparse" href="{81_value}" target="_blank"><img src="http://forum.android-mt.com/uploads/images/img_-1400960452-U3.png"></a></p>

    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à

  2. #2
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 094
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 094
    Points : 6 755
    Points
    6 755
    Par défaut
    Citation Envoyé par NorthLight Voir le message
    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 :
    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} ?

  3. #3
    Candidat au Club
    Profil pro
    Inscrit en
    Décembre 2013
    Messages
    4
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2013
    Messages : 4
    Points : 4
    Points
    4
    Par défaut
    Citation Envoyé par Watilin Voir le message
    Bonjour NorthLight,
    Tout d'abord, un grand merci pour l'aide.

    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 ?


    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    <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 ?


    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.

    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    <p><a data-ipb="nomediaparse" href="http://.................." target="_blank"><img src="http://forum.android-mt.com/uploads/images/img_-1400960452-U3.png"></a></p>
    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 : 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
    <p><center><span style="color: #65bad0;"><span style="font-size: 36px;"><strong><span style="text-decoration: underline;">{1_value}</span></strong></span></span></center></p><br />
    <br />
    <center> {84_value}
    {86_value}</center>
    <p><p class="bbc_left"><img src="http://nsm08.casimages.com/img/2014/04/14//14041404264317459612148925.png" alt="Image IPB" class="bbc_img" /><span style="color: #e85a35;"><span style="font-size: 34px;"><span style="text-decoration: underline;"><strong>Présentation :</strong></span></span></span><br />
     {45_label}{45_value} <br />
     {9_label}{9_value}</p>
    <br />
    <p><img src="http://nsm08.casimages.com/img/2014/04/14//14041404264417459612148926.png" alt="Image IPB" class="bbc_img" /><span style="color: #e85a35;"><span style="font-size: 34px;"><span style="text-decoration: underline;"><strong>Photos et vidéos :</strong></span></span></span></p><br />
    <p>{8_label} {8_value} <br />
    {46_label} {46_value}<br />
    {47_label} {47_value}<br />
    {48_label} {48_value}<br />
    {49_label} {49_value}</p>
    <br />
    <p>{43_label}{43_value}</p><br />
    <p><img src="http://nsm08.casimages.com/img/2014/04/14//14041404264417459612148927.png" alt="Image IPB" class="bbc_img" /><span style="color: #e85a35;"><span style="font-size: 34px;"><span style="text-decoration: underline;"><strong>Installation :</strong></span></span></span></p><br />
    <p><strong>{52_label}</strong></p><br />
    <p>{52_value}</p><br />
    <br />
    <p><strong>{53_label}</strong></p><br />
    <p>{53_value}</p><br />
    <br />
     <center><p><span style="color: #e85a35;"><span style="font-size: 34px;"><span style="text-decoration: underline;"><strong>Téléchargement :</strong></span></span></span><br />
     <img src="http://nsm08.casimages.com/img/2014/04/14//14041404264517459612148929.png" alt="Image IPB" class="bbc_img" /></p><br />
    <p><a data-ipb="nomediaparse" href="{4_value}" target="_blank">{58_value}</a></p><br />
    <p><a data-ipb="nomediaparse" href="{56_value}" target="_blank">{59_value}</a></p><br />
    <p><a data-ipb="nomediaparse" href="{57_value}" target="_blank">{60_value}</a></p><br />
    </center>
    <p><img src="http://nsm08.casimages.com/img/2014/04/14//14041404264517459612148928.png" alt="Image IPB" class="bbc_img" /><span style="color: #e85a35;"><span style="font-size: 34px;"><span style="text-decoration: underline;"><strong>Liens utiles :</strong></span></span></span></p><br />
    <p><a data-ipb="nomediaparse" href="{10_value}" target="_blank"><img src="http://forum.android-mt.com/uploads/images/img_-1400345637-U3.png"></a></p><br />
    <p><a data-ipb="nomediaparse" href="{62_value}" target="_blank"><b>{63_value}<b></a></p>
    <br />
    <p><a data-ipb="nomediaparse" href="{82_value}" target="_blank"><img src="http://forum.android-mt.com/uploads/images/img_-1400960206-U3.png"></a></p>     <p><a data-ipb="nomediaparse" href="{80_value}" target="_blank"><img src="http://forum.android-mt.com/uploads/images/img_-1400960345-U3.png"></a></p>     <p><a data-ipb="nomediaparse" href="{81_value}" target="_blank"><img src="http://forum.android-mt.com/uploads/images/img_-1400960452-U3.png"></a></p>

  4. #4
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 094
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 094
    Points : 6 755
    Points
    6 755
    Par défaut
    Citation Envoyé par NorthLight Voir le message
    Tout d'abord, un grand merci pour l'aide.
    Mais de rien

    Comment j'ajoute un id ?
    Tout simplement en mettant un attribut id="..." à ta balise, par exemple :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <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.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <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.

    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 ).

    É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 HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    <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é.

    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 :
    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.

    Mon code sort au final
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <p><a data-ipb="nomediaparse" href="http://.................." target="_blank"><img src="http://forum.android-mt.com/uploads/images/img_-1400960452-U3.png"></a></p>
    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

    Sinon voici mon script en entier si t'as des suggestions :
    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
    <p><center><span style="color: #65bad0;"><span style="font-size: 36px;"><strong><span style="text-decoration: underline;">{1_value}</span></strong></span></span></center></p><br />
    <br />
    <center> {84_value}
    {86_value}</center>
    <p><p class="bbc_left"><img src="http://nsm08.casimages.com/img/2014/04/14//14041404264317459612148925.png" alt="Image IPB" class="bbc_img" /><span style="color: #e85a35;"><span style="font-size: 34px;"><span style="text-decoration: underline;"><strong>Présentation :</strong></span></span></span><br />
     {45_label}{45_value} <br />
     {9_label}{9_value}</p>
    <br />
    <p><img src="http://nsm08.casimages.com/img/2014/04/14//14041404264417459612148926.png" alt="Image IPB" class="bbc_img" /><span style="color: #e85a35;"><span style="font-size: 34px;"><span style="text-decoration: underline;"><strong>Photos et vidéos :</strong></span></span></span></p><br />
    <p>{8_label} {8_value} <br />
    {46_label} {46_value}<br />
    {47_label} {47_value}<br />
    {48_label} {48_value}<br />
    {49_label} {49_value}</p>
    <br />
    <p>{43_label}{43_value}</p><br />
    <p><img src="http://nsm08.casimages.com/img/2014/04/14//14041404264417459612148927.png" alt="Image IPB" class="bbc_img" /><span style="color: #e85a35;"><span style="font-size: 34px;"><span style="text-decoration: underline;"><strong>Installation :</strong></span></span></span></p><br />
    <p><strong>{52_label}</strong></p><br />
    <p>{52_value}</p><br />
    <br />
    <p><strong>{53_label}</strong></p><br />
    <p>{53_value}</p><br />
    <br />
     <center><p><span style="color: #e85a35;"><span style="font-size: 34px;"><span style="text-decoration: underline;"><strong>Téléchargement :</strong></span></span></span><br />
     <img src="http://nsm08.casimages.com/img/2014/04/14//14041404264517459612148929.png" alt="Image IPB" class="bbc_img" /></p><br />
    <p><a data-ipb="nomediaparse" href="{4_value}" target="_blank">{58_value}</a></p><br />
    <p><a data-ipb="nomediaparse" href="{56_value}" target="_blank">{59_value}</a></p><br />
    <p><a data-ipb="nomediaparse" href="{57_value}" target="_blank">{60_value}</a></p><br />
    </center>
    <p><img src="http://nsm08.casimages.com/img/2014/04/14//14041404264517459612148928.png" alt="Image IPB" class="bbc_img" /><span style="color: #e85a35;"><span style="font-size: 34px;"><span style="text-decoration: underline;"><strong>Liens utiles :</strong></span></span></span></p><br />
    <p><a data-ipb="nomediaparse" href="{10_value}" target="_blank"><img src="http://forum.android-mt.com/uploads/images/img_-1400345637-U3.png"></a></p><br />
    <p><a data-ipb="nomediaparse" href="{62_value}" target="_blank"><b>{63_value}<b></a></p>
    <br />
    <p><a data-ipb="nomediaparse" href="{82_value}" target="_blank"><img src="http://forum.android-mt.com/uploads/images/img_-1400960206-U3.png"></a></p>     <p><a data-ipb="nomediaparse" href="{80_value}" target="_blank"><img src="http://forum.android-mt.com/uploads/images/img_-1400960345-U3.png"></a></p>     <p><a data-ipb="nomediaparse" href="{81_value}" target="_blank"><img src="http://forum.android-mt.com/uploads/images/img_-1400960452-U3.png"></a></p>
    Ç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 ?

Discussions similaires

  1. Paginate avec des conditions sur les clés etrangères.
    Par CeDRiC08 dans le forum Ruby on Rails
    Réponses: 3
    Dernier message: 03/07/2007, 09h49
  2. Réponses: 3
    Dernier message: 08/05/2007, 17h32
  3. Makefile avec des conditions
    Par meufeu dans le forum Linux
    Réponses: 2
    Dernier message: 04/08/2006, 11h46
  4. Réponses: 1
    Dernier message: 30/06/2006, 16h01
  5. [ASE][T-SQL] Appel d'une sous-proc avec des conditions
    Par metheorn dans le forum Sybase
    Réponses: 1
    Dernier message: 19/05/2006, 18h38

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo