Partage
  • Partager sur Facebook
  • Partager sur Twitter

Delimitation zone cliquable Mobile

Sujet résolu
    2 septembre 2018 à 18:39:39

    Bonjour à tous,

    Voila, en ce moment je fait des boutons pour interface mobile sur une page web, et je me retrouve face à un problème tout bête.

    La délimitation des zones cliquables sous les navigateurs. Je m'explique, je vais prendre comme exemple chrome.

    Quand on pose le doigt sur un bouton sous chrome on vois apparaitre la zone cliquable en bleu, et je cherche à faire disparaitre cette fameuse zone bleu.

    Par exemple voici une page :

    Quand on clique dessus voila ce que ça donne:

    Ce que je cherche à faire, c'est faire disparaitre cette fameuse Zone qui apparait, je l'ai entouré en rouge.

    Avez vous une idée, pour éviter ceci ?

    -
    Edité par exen 2 septembre 2018 à 18:40:05

    • Partager sur Facebook
    • Partager sur Twitter

    Compos sui.

      3 septembre 2018 à 3:43:40

      Quelques pistes:

      a:active
      a:visited
      user-select

      -
      Edité par lp177 3 septembre 2018 à 3:45:08

      • Partager sur Facebook
      • Partager sur Twitter
        3 septembre 2018 à 10:40:07

        Bonjour,

        Cette zone bleue sert notamment à répondre aux besoins d'accessibilité et est donc très importante.

        Cependant tu peux la personnaliser si tu souhaites rendre ton site plus "beau"/uniforme.

        En CSS regarde du côté de :focus et outline

        • Partager sur Facebook
        • Partager sur Twitter
          3 septembre 2018 à 16:40:46

          Déjà, Merci pour vos réponses.

          Je ne cherche pas à reproduire cette effet, mon but est de supprimer ce carré bleu, j'en viens même à me demander si ça ne viens pas d'android.

          Les seules choses que j'ai vu se comporter sans produire cette effet à l'heure d'aujourd'hui, ce sont les les gestures en javascript que m'a passé Lucky13 .

          hammerjs et Jquery.finger.

          Mais le problème est que je ne sais pas m'en servir, je suis une truffe en JS (honte à moi je le sais bien).

          Ce qui me surprend d'autant plus c'est que je sois l'un des rares à qui ça ai posé un problème.

          • Partager sur Facebook
          • Partager sur Twitter

          Compos sui.

            4 septembre 2018 à 9:22:01

            As-tu essayé de modifier ton CSS avec les propriétés qu'on t'a données ?

            Si ça ne fonctionne toujours pas, tu devrais peut-être nous montrer ton code.

            Avant d'utiliser des bibliothèques JS, c'est quand même mieux de connâitre les bases...

            -
            Edité par TryAndShare 4 septembre 2018 à 9:22:13

            • Partager sur Facebook
            • Partager sur Twitter
              4 septembre 2018 à 17:46:52

              Re,

              Oui, même si je savait que certaines ne changeraient rien, je l'ai fait. Même pour les plus étranges que l'on m'a conseillé, je passe les idées de survole, hier j'en ai même  un qui m'a soutenu que le :hover fonctionnait sur mobile et que le doigt était le pointeur et qu'en glissant le doit sur l'url le hover se déclenchait et bien sachant ce que je sais j'ai quand même pris le temps de faire le test par acquis de conscience.

              Je le redis c'est un problème récurant à tout les navigateurs mobile en tout cas sous lollipop.

              Pour faire simple, si le test est effectué depuis un ordi qui simule le comportement d'un mobile, on ne verras rien.

              Je n'ai rien contre donner un code vu que le plus basic des code pose ce problème.

              <!DOCTYPE html>
              <html lang="fr">
              
              <head>
              
              <meta charset="utf-8">
              <meta http-equiv="X-UA-Compatible" content="IE=edge">
              <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
              
              <title>Pages Test TMP OCRM</title>
              
              <!-- my css include -->
              <script defer src="https://use.fontawesome.com/releases/v5.0.2/js/all.js"></script>
              
              <!--Import Google Icon Font-->
              <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
              
              <!-- LE CSS 
              <META HTTP-EQUIV="Refresh" CONTENT="8" /> -->
              
              <style type="text/css">
              
              html body{
                margin: 0;
                background-color: black;
              }
              
              
              /*   GRID   */
              
              .grid-container {
                display: grid;
                grid-template-columns: auto auto auto auto;
                grid-template-rows: 100px 100px;
                grid-gap: 10px;
                padding: 10px;
              }
              
              
              /*   BOUTON   */
              
              .bouton  {
                display: flex;
                justify-content: space-around; 
                margin-left: auto;
                margin-right: auto;
                margin-top: 0.8em;
                width:3.5em;
                height: 3.5em;
                text-align:center;
                background: linear-gradient( 
                  #ccc6c3 0%,
                  #000 100%); 
                border-radius:15px;
                box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
              }
              
              .abtn{
                  font-size: 0.8em;
                  color:white;
                  opacity: 0.85;
                  font-weight: bold;
                  text-decoration:none;
                  margin-left: auto;
                  margin-right: auto;
                  padding-top: 1.4em;
                  
              }
              
              .abtn2{
                  font-size: 0.8em;
                  color:white;
                  opacity: 0.85;
                  font-weight: bold;
                  text-decoration:none;
                  margin-left: auto;
                  margin-right: auto;
                  padding-top: 0.8em;
              }
              .bouton:focus{
                color: red;
                background-color: red;
              
              }
              </style>
              
              </head>
              
              
              <body>
              
              <!--    GRID    -->
              
              <div class="grid-container">
              
                <div class="item1">
                  <div class="bouton">
                      <a class="abtn2" href="#">Bouton bouton</a>
                  </div>
                </div>
              
                <div  class="item2">
                  <div class="bouton">
                      <a class="abtn" href="#">Bouton</a>
                      
                  </div>
                </div>
              
              <!-- TESTE CLIC BASIC -->
              
              <a class="abtn2" href="#">Bouton bouton</a>
              
              <!--  ///////////////// \\\\\\\\\\\\\\\  -->
              
                <div class="item3">
                  <div class="bouton">
                      <a class="abtn" href="#">Bouton</a>
                  </div>
                </div>
              
                <div class="item4">
                  <div class="bouton">
                      <a class="abtn" href="#">Bouton</a>
                  </div>
                </div>
              
                <div class="item5">
                  <div class="bouton">
                      <a class="abtn" href="#">Bouton</a>
                  </div>
                </div>
              
                <div class="item6">
                  <div class="bouton">
                      <a class="abtn" href="#">Bouton</a>
                  </div>
                </div>
              
                <div class="item7">
                  <div class="bouton">
                      <a class="abtn" href="#">Bouton</a>
                  </div>
                </div>
              
                <div class="item8">
                  <div class="bouton">
                      <a class="abtn" href="#">Bouton</a>
                  </div>
                </div>
              
              </div>
              
              
              
              </body>
              </html>
              



              @TryAndShare

              J'aimerais te demander un service, pourrais tu avec ton smartphone ouvrir chrome et aller sur le site Openclassrooms et appuyer sur un lien voir si tu a le même cadre bleu qui apparait, si tu reste appuyé sur le lien une demi seconde tu devrais le voir. Au pire même injecter mon code en offline dans ton smartphone ou en faire un basic avec un href:"#", ça permet de bien voir le problème.

              De mon coté ça va me permettre de voir si c'est un comportement récurant lier à toutes les build Android ou juste à la mienne.

              Au passage merci pour le cours, il est dans ma liste, c'est certain il va falloir que je m'y colle.

              -
              Edité par exen 4 septembre 2018 à 17:53:58

              • Partager sur Facebook
              • Partager sur Twitter

              Compos sui.

                4 septembre 2018 à 17:53:22

                Après c'est peut être simplement une feature d’accessibilité du système sur de la sélection de contenu cliquable qui ne peut être court-circuité en html/css

                a tu essayé de remplacé tes <a href="#"> par des <span onclick="window.location = '#'"> pour voire ce que ça donne ? 

                -
                Edité par lp177 4 septembre 2018 à 20:22:28

                • Partager sur Facebook
                • Partager sur Twitter
                  4 septembre 2018 à 18:12:10

                  Merci pour ta réponse je viens de faire le test ca le fait toujours mais en mieux.

                  C'est à dire que là pour le coup l'encadrement du texte reste bleu sous chrome et rien ne se produit sous firefox même pas le suivit d'url.

                  Edit: Mais pour le onclick c'est peut être moi qui l'utilise mal.

                  -
                  Edité par exen 4 septembre 2018 à 18:14:37

                  • Partager sur Facebook
                  • Partager sur Twitter

                  Compos sui.

                    4 septembre 2018 à 18:27:19

                    Mes excuses j'ai ajouté un s à window qui n'est pas censé être là ^^' (corrigé)

                    -
                    Edité par lp177 4 septembre 2018 à 20:22:39

                    • Partager sur Facebook
                    • Partager sur Twitter
                      4 septembre 2018 à 18:37:10

                      Ca arrive, même moi je n'avais pas vu que le 's' était en trop en lisant la doc.

                      Et oui ça fonctionne je n'ai plus ce comportement étrange sur le mobile.

                      Mais j'en viens a te demander un truc , ce serrais lier à quoi ?

                      Dans tout les cas un grand merci.

                      -
                      Edité par exen 4 septembre 2018 à 18:37:37

                      • Partager sur Facebook
                      • Partager sur Twitter

                      Compos sui.

                        4 septembre 2018 à 18:42:44

                        Comme précisé plus haut ce genre de mise en évidence de l'interface sont généralement intégré pour des besoins d'accessibilités par exemple pour des personnes malvoyante ou qui ne pourrais utiliser le doigt/ la souris, je ne saurais te répondre précisément pourquoi cette bordure bleu autour d'un élément interactible car je n'ai que des hypothèses et aucune certitude actuellement (navigation au clavier ou vocal par exemple), mais cela dépend probablement de la spec la plus connu et utilisé dans ce domaine à ma connaisance, Aria: https://developer.mozilla.org/fr/docs/Accessibilit%C3%A9/ARIA bien que chaque constructeur puisse la personnaliser à sa guise en pratique, cela reste un standard donc c'est vraiment une bonne pratique de la suivre à la lettre pour avoir aussi bien un impacte positif sur le confort utilisateur que sur le référencement de les respecter autant que possible.

                        Ça reste tout de même très flexible, par exemple pour ton problème tu peut rester sur un span utiliser l'attribue https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/tabindex

                        et aria-role pour le nav (role="navigation" et le bouton: https://developer.mozilla.org/fr/docs/Accessibilit%C3%A9/ARIA/Techniques_ARIA/Utiliser_le_r%C3%B4le_button

                        -
                        Edité par lp177 4 septembre 2018 à 18:58:51

                        • Partager sur Facebook
                        • Partager sur Twitter
                          4 septembre 2018 à 19:06:11

                          Merci pour ta réponse,

                          Mais pour ce projet aucunes règles accessibilités ne va être appliquées dans un premier temps. Vu qu'il s’agit d'un panel personnel que je vais utilisé pour accéder plus rapidement aux sites que j'utilise pour le css, le html, UI/UX, et la veille.

                          Et de toutes façons sur en ce qui concerne l'accessibilité je comptais me baser sur la charte anglosaxone : https://www.gov.uk/service-manual/user-research

                          Par contre ce serrais peut être bien que tu corrige ton 1er post celui ou tu as mis le 's' en trop.

                          -
                          Edité par exen 4 septembre 2018 à 20:32:00

                          • Partager sur Facebook
                          • Partager sur Twitter

                          Compos sui.

                            4 septembre 2018 à 20:23:14

                            Pas de soucie, le message est corrigé, bon amusement à toi pour la suite
                            • Partager sur Facebook
                            • Partager sur Twitter
                              4 septembre 2018 à 20:30:46

                              Merci à toi pour ta réponse.

                              on va sans doutes se recroiser sur le fofo html.

                              • Partager sur Facebook
                              • Partager sur Twitter

                              Compos sui.

                                5 septembre 2018 à 3:54:09

                                @exen même si ton sujet est résolu, j'ai fait le test sur mon téléphone et je n'ai pas de cadre bleu sur openclassrooms, ni sur aucun des sites que je consulte régulièrement.

                                Quelques remarque sur ton code :

                                • il n'y a pas la propriété outline que je t'avais indiquée, alors impossible de savoir si tu l'as bien utilisée...
                                • tu devrais plutôt utiliser une liste (<ul> avec des <li>). Tu as d'ailleurs choisi des noms de classes CSS (item1, item2...) qui le confirment :)
                                • l'intérêt des classes CSS est que tu peux les réutiliser sur plusieurs éléments, alors il serait plus logique d'avoir une seule classe "item". Si tu as un besoin d'un identifiant unique pour du JS, il est conseillé d'utiliser un id

                                Même si c'est pour un projet personnel, il est toujours bon de prendre des bonnes habitudes dès le début ;)

                                • Partager sur Facebook
                                • Partager sur Twitter
                                  5 septembre 2018 à 6:51:02

                                  @TryAndShare

                                  Merci pour ta réponse, c'est donc due à la build android de mon constructeur si tu n'a pas ces fameux cadres sous chrome.

                                  La propriété outline, je l'ai testée, j'ai même poussé un peut en testant un outline-style:none.

                                  Mais si tu veut me montrer comment tu l'aurais utilisé, je n'ai rien contre, je suis toujours gourmand de nouvelles façons de pratiquer.

                                  Pour ce qui est du morceaux de code que je t'ai passé, si tu regarde le head, tu dois voir qu'on est sur un block teste.

                                  Ca me pousse à te poser une autre question, pourquoi devrais-je plutôt utiliser (<ul> avec des <li>) ?

                                  • Partager sur Facebook
                                  • Partager sur Twitter

                                  Compos sui.

                                    5 septembre 2018 à 7:16:27

                                    Je vais laisser répondre TryAndShare pour cette suggestion mais j'en rajoute deux autres au passage, plutôt que de faire item1 item2....

                                    tu peut utiliser le pseudo selecteur css :nth-child(1) :nth-child(2) ... (voire aussi :nth-of-type(1) ... selon les cas) ça évite de polluer le code html avec des class quand elles ne sont pas utiles et ça te permet d'être plus flexible

                                    voire même idéalement .grid-container > div  si tu applique le même style à tous tes items

                                    https://www.w3.org/TR/selectors/#selectors

                                    Sinon en terme sémantique on utilise plutôt un nav qu'un div ou un ul pour un menu de navigation: https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1605881-structurer-sa-page

                                    -
                                    Edité par lp177 5 septembre 2018 à 7:32:42

                                    • Partager sur Facebook
                                    • Partager sur Twitter
                                      5 septembre 2018 à 9:14:24

                                      Les balises HTML ont une sémantique et bien la respecter permet notamment d'améliorer le référencement, l'accessibilité et la lisibilité du code.

                                      Tu peux bien sûr n'utiliser que des <div>, ça fonctionnera, mais si tu fais une liste d'items (présentée en ligne, en colonne ou en grille), autant utiliser la balise qui sert à ça :)

                                      Quand je veux personnaliser le comportement du navigateur, en général j'utilise "outline: 0;" dans mon reset.css

                                      -
                                      Edité par TryAndShare 5 septembre 2018 à 10:00:33

                                      • Partager sur Facebook
                                      • Partager sur Twitter
                                        5 septembre 2018 à 9:24:55

                                        Quitte à citer un cours sur la sémantique tu n'a vraiment pas trouvé moins à jours ou moins complet ? :p (dernier maj 2013 et c'est dans le cadre du xhtml n'hésite pas à utiliser le lien plus haut sur le même sujet qui est à jours en html5 de cette année ^^ )
                                        • Partager sur Facebook
                                        • Partager sur Twitter
                                          5 septembre 2018 à 9:59:38

                                          Haha! J'avoue que j'ai pris le 1er lien que j'ai trouvé sans le regarder en détails, désolé :ange:
                                          • Partager sur Facebook
                                          • Partager sur Twitter
                                            5 septembre 2018 à 10:39:19

                                            Alors, le outline comme je te l'ai dit je l'ai testé et cela n'a eu aucune incidence sur le comportement de ma build.

                                            Coté sémantique je suis tout à fait d’accord avec toi.

                                            Mais comme je l'ai dit dans mon premier post on est sur "un panel de boutons sur une page web". Ce que j'ai montré c'est le maquettage de cette partie, il y a un menu indépendant, tout comme il y aura un footer.

                                            Si j'utilise des noms basic pour Grid c'est dans un souci de simplicité et de rapidité dans la mise en place de cette partie pendant que j'opère divers changements dessus. Un indice le montre, comme je te l'ai dit plus haut, la ligne de rafraichissement dans le <head>.

                                            Si je suis passé poser cette question c'est parce que ce comportement sur mon smartphone me dérangeait, je cherchais une façon simple de le contourner. Et peut être aussi parce que je peut être légèrement psychorigide quand un truc me démange. :D

                                            De plus là ce n'est que la partie mobile de ce panel, je n'ai même pas encore attaqué son design général ou son comportement à proprement parlé. Comme c'est pour une utilisation personnel pas de seo, je vais même exclure les bots un max sur cette partie du serveur.

                                            Donc sachant qu'un menu va venir se greffer à la page, et que ce que tu à vu n'est qu'un simple panel de boutons qui va être injecté dans une page, est t'il toujours utile d'envisager <ul> et <li> ?

                                            • Partager sur Facebook
                                            • Partager sur Twitter

                                            Compos sui.

                                              5 septembre 2018 à 11:21:40

                                              Concernant les cadres bleus, si tu les vois sur d'autres sites, alors c'est peut-être effectivement ta version d'android/chrome. Si tu ne les vois pas sur un site en particulier, essaie d'analyser le CSS de ce site pour voir ce qu'il y a de différent.

                                              Concernant la sémantique, même si tu n'as pas de problématique de SEO ou d'accessibilité, rien ne t'empêche d'utiliser les bonnes balises pour représenter une liste, ne serait-ce que pour la lisibilité du code. Ce qu'il y a autour de tes boutons (header, nav, footer...) n'a pas d'importance, tu peux avoir plusieurs listes dans une page.

                                              Après c'est ton projet personnel et privé en plus, alors tu es libre d'utiliser ce que tu veux :)

                                              • Partager sur Facebook
                                              • Partager sur Twitter
                                                5 septembre 2018 à 11:41:29

                                                c'est très certainement çà, vu que ca le fait sur tout les navigateur de ma build android.

                                                Concernant la sémantique tu pense que je ne l'utilise pas, mais si, sur le reste elle y est, par contre je ne suis pas pour utiliser une liste sur ce panel de boutons, parce qu'en faite ce sont des cards.

                                                • Partager sur Facebook
                                                • Partager sur Twitter

                                                Compos sui.

                                                  5 septembre 2018 à 18:06:26

                                                  Pas de soucie pour le lien je précise juste au cas où quelqu'un déterre le post car je pense qu'en dehors de l'aspect référencement la sémentique permet surtout d'avoir un code css html moins redondant et donc plus simple à manipuler, je m'explique:

                                                  - Déjà en découpant le code par catégorie d'usage nav/section/caption... tu peut plus facilement sélectionner tel ou tel partie du site en css sans avoir à mettre des id / class à tous va car généralement tu na qu'un voir deux menu de navigation et une section qui est le contenu propre à la page, de plus ça rend le css plus lisible et réutilisable

                                                  - Pour ce qui est du ul je l'ai effectivement beaucoup vue dans des exemple de menu sur internet et je peut comprendre ça pour des raison historique, par exemple sans css c'est ce qui ressemble le plus à un menu et cela permet  de faire facilement un agencement vertical découpé pour un exemple, (c'est d'ailleurs aussi dans l'exemple du cours que j'ai posté).

                                                  Mais en pratique je trouve personnellement que avec les nouvelle balises structurantes html5 comme nav cela perd totalement de son intérêt surtout au vue du designe moderne ou tu va facilement avec flex passer d'un menu horizontal / wrapped / vertical pour le responsive car en générale ton menu ressemble rarement à une liste à puce statique ce qui oblige généralement à réinitialiser le css pour en faire un truc jolie.

                                                  Ce qui me fait poser donc me poser la question des potentielles ressources gaspillées et de l’intérêt final de l'utiliser encore aujourd'hui pour cette usage d’autant plus que comparé à un nav > a | nav > button | nav > * qui est relativement unique dans une page, tu peut avoir plein de liste dans le contenu de ta page.

                                                  Qu'ont ce comprenne bien c'est pas une reproche ou une recommandation mais je me pose moi aussi vraiment la question de l’intérêt et donc j'en profite au passage pour te demander si tu a des arguments positif en cette faveurs autres que sémantiques qui pourrais améliorer ma compréhension de cette pratique répandue ^^

                                                  Sinon pour en revenir au sujet, question bête mais on sait jamais: tu a regardé du coup dans les options d'accessibilités de ton portable configuration > accessibilité si y a pas une case à cocher pour ça ?

                                                  • Partager sur Facebook
                                                  • Partager sur Twitter
                                                    6 septembre 2018 à 4:16:43

                                                    Je ne le prends pas du tout comme un reproche, c'est une discussion intéressante et une question légitime. Je ne prétends pas connaître la bonne réponse (s'il y a en bien une), mais je peux toujours donner mon avis :) 

                                                    Je suis d'accord avec toi concernant la découpe du code mais d'un point de vue de la lisibilité du HTML.

                                                    Dans mes projets (pro et perso) j'utilise presque tout le temps la méthodologie BEM, donc je ne cible jamais des balises HTML en CSS (sauf dans le reset CSS) et utilise toujours des classes. Cela permet notamment :

                                                    • de découpler (un peu) HTML et CSS (par ex : si tu changes une <div> en <p> dans ton HTML, tu n'as pas besoin de modifier ton CSS)
                                                    • d'avoir la même spécifitié pour tous les éléments et d'éviter les risques de surcharge avec !important
                                                    • de ne pas avoir des sélecteurs à rallonge (nav > ul > li > a...)
                                                    • et donc d'améliorer les performances de rendu
                                                    • ...(et certainement plein d'autres choses que j'ai oubliées)

                                                    Il y a bien sûr d'autres méthodologies CSS (modules CSS...) qui sont très bien et qui sont aussi basées sur les classes.

                                                    Concernant le menu de navigation, en général j'utilise cette structure : nav > ul > li > a

                                                    Je pense qu'il faut bien différencier la sémantique (une liste d'élément de même nature) de la représentation par défaut (une liste à puce verticale). Un menu est une liste de liens qui permet de naviguer sur un site, donc l'utilisation d'une liste non ordonnée <ul> me semble naturelle, même avec les nouvelles balises HTML5 et pas forcément pour des raisons historiques.

                                                    Effectivement ça nécessite un peu plus de CSS pour cacher les puces, supprimer le padding par défaut... mais je ne trouve pas ça dérangeant.

                                                    PS : j'ai édité mon précédent message pour supprimer le mauvais lien :ange:

                                                    -
                                                    Edité par TryAndShare 6 septembre 2018 à 4:19:35

                                                    • Partager sur Facebook
                                                    • Partager sur Twitter
                                                      6 septembre 2018 à 4:31:25

                                                      Ok, merci beaucoup pour l'explication, je ne connaissais pas la méthodologie BEM j'en ai profité pour en lire un peut plus au passage et en effet bien qu'elle ne me charme pas du tout l’œil je suis bien obligé de reconnaître qu'il y a de très bon arguments en sa faveurs pour de gros projets à maintenir sur le long terme, c'est d'ailleurs à peut près ce que j'utilise déjà quand j'inclue boostrap dans un projet, un sujet fort intéressant en effet, qui me permettra de pester un peut moins la prochaine fois que je voie un projet avec des class à tous les niveau ^^' 

                                                      • Partager sur Facebook
                                                      • Partager sur Twitter
                                                        6 septembre 2018 à 20:01:14

                                                        Re,

                                                        J'ai pris le temps, de lire ce que vous avez écrit, et c'est très intéressent, même si pour le moment je n'ai fait que le survoler.

                                                        Alors  l'accessibilité, les option DEV, la gesture sensing, ce sont les premières chose que j'ai vérifié avant de poser mes question et faire le tour des forums. Mais plus j'y pense et plus je me dit que ça viens de la build constructeur, c'est l'un des rare tel que je n'ai pas passé sous build  xda, il est brut de pomme et c'est un speed7+.

                                                        @TryAndShare

                                                        Je pense que tu auras compris que le morceau de code que tu as vu, est la partie central de la version mobile, sur la version desktop je ne suis pas encore trop sure de ce que je vais faire, mais je pense que ce serras proche d'un ensemble de crad ou de mosaïques. Donc on auras bien un header, nav, block central, et peut-être un footer. C'est aussi pour çà que je n'ai pas encore déterminé de noms concrets pour mes objets ca va dépendre aussi de la direction que je vais prendre sur la version desktop. Mais bon ce n'est pas non plus le sujet de ce post.

                                                        Au passage j'aurais  autre question si ça ne vous dérange pas.

                                                        J'ai un menu latéral qui va se déclencher via une image, du moins pour le moment.

                                                        <img class="solar myElement" style="cursor:pointer" onclick="openNav()" src="https://media.tenor.com/images/7cc55341b2907f31f67cb573f73c95df/tenor.gif">

                                                        Quelle serrait la meilleur façon de procéder pour intégrer 

                                                        window.location = '#'


                                                        A l’intérieur de

                                                        onclick="openNav()"




                                                        • Partager sur Facebook
                                                        • Partager sur Twitter

                                                        Compos sui.

                                                          6 septembre 2018 à 22:54:08

                                                          Désoler par avance pour cette réponse qui n'aide pas beaucoup mais je ne suis vraiment pas fan des questions du type quelle serais la manière façon de faire tel ou chose spécifiquement alors que l'ont a pas du tout le contexte ni la finalité du code et que je n'ai pas la prétention de connaitre la meilleur façon de faire quoi que ce soit, je m'explique:

                                                          La meilleur vis à vis de quoi ? Les performances ? La simplicité du code ? La portabilité ? La ré utilisabilité ? L'architecture ?

                                                          Qu'est ce qui ne te convient pas actuellement dans la façon de faire comme ça ? Est ce que tu passe par un parseur de code pour faire un build de production ? Quel est le temps que tu souhaite consacrer à ce projet ? Va tu travailler en équipe ? Est ce une maquette que tu va potentiellement rouvrir plusieurs mois après ? Va tu faire beaucoup de redirection de ce type ? quel sont les librairies que tu compte inclure ? Besoin d'intercepter des requête pour un mode offline ou de les gérer de façon générique ? ...

                                                          Enfin tu le comprendra  que c'est en fait pour quelque chose qui parait très simple une très vague et vaste question il me semble et que ça va surtout dépendre de tes préférences et objectifs sur un projet perso.

                                                          -
                                                          Edité par lp177 6 septembre 2018 à 23:01:11

                                                          • Partager sur Facebook
                                                          • Partager sur Twitter
                                                            7 septembre 2018 à 8:33:30

                                                            Je comprend ce que tu veut dire.

                                                            Quand je suis intervenu hier sur le sujet je venais de lire un ou deux articles sur la façons d’intégrer plusieurs fonction sur onclick.

                                                            j'ai donc vu des personnes parler de &&

                                                            onclick="fonc1('xx','xx') && fonc2('xx')"
                                                            

                                                            d'autres de ;

                                                            <p onclick="Fonc1();Fonc2();">

                                                            D'autres encore de  doubler onclick

                                                            	
                                                            onclick="fonc1('xxx')" onclick="fonc2('xxx')"


                                                            Donc j'en ai profité pour poser la question, le but étant pour moi de toujours masquer ce fameux cadre, mais cette fois-ci sur l'image qui va servir de déclencheur pour le volet de navigation. Qui aujourd'hui ce présente comme ceci :

                                                            <img class="solar myElement" style="cursor:pointer" onclick="openNav()" src="#">

                                                            Comme on peut voir onclick actionne la fonction openNav() qui est la suivante :

                                                            <script>
                                                            function openNav() {
                                                                document.getElementById("mySidenav").style.width = "250px";
                                                                document.getElementById("main").style.marginLeft = "50px";
                                                                document.body.style.backgroundColor = "rgba(0,0,0,0.8)";
                                                            }
                                                            </script>



                                                            Voila ce qu'il en était de ma question "Quelle serrait la meilleur façon de procéder pour l'intégrer ?"

                                                            Pour le temps que je vais passer sur ce projet à mon avis pas plus de 6h, et j'y ai déjà consacré environ 2h le temps de définir sa charte graphique, faire la maquette, et échanger sur le forum.

                                                            C'est un projet tout simple, ce sont juste quelques url et 5 ou 6 mémos.



                                                            • Partager sur Facebook
                                                            • Partager sur Twitter

                                                            Compos sui.

                                                              7 septembre 2018 à 9:55:22

                                                              En générale si tu compte mapper un événement sur plusieurs élément, de manière conditionnel ou en faire un code réutilisable on préférera utiliser addEventListener et ne pas mettre de code inline.

                                                              Le code inline a le mérite d'être plus rapide et intuitif à écrire et peut tout à fait convenir pour un événement précis sur un élément précis.

                                                              Ensuite les trois exemples de js inline que tu donne ne sont pas des codes équivalent entre lequel choisir mais 3 code bien distinct qui font des choses différentes.

                                                              Le premier execute f1 et si vrais execute f2, le deuxième execute f1 et f2, le 3eme... hum sérieux ai je bien besoin d'expliquer pourquoi ce code est invalide ? ^^'

                                                              https://codepen.io/lp177/pen/wEPwyX

                                                              -
                                                              Edité par lp177 7 septembre 2018 à 9:57:04

                                                              • Partager sur Facebook
                                                              • Partager sur Twitter

                                                              Delimitation zone cliquable Mobile

                                                              × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                                                              × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                                                              • Editeur
                                                              • Markdown