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 :

Calcul dynamique window.matchMedia pour conditionner addEventListener ('click', function())


Sujet :

JavaScript

  1. #1
    Membre éclairé
    Profil pro
    Inscrit en
    Mai 2004
    Messages
    731
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2004
    Messages : 731
    Par défaut Calcul dynamique window.matchMedia pour conditionner addEventListener ('click', function())
    Bonjour,


    J'ai deux problèmes.

    1)

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    var mobile = window.matchMedia ('(min-width: 768px)');
    Je veux calculer la valeur au chargement de la page et au resize de la fenêtre.

    2)

    Selon la valeur dynamique de mobile je veux activer-désactiver un addEventListener ('click', function())

    J'ai illustré la question avec un codepen.

    Il fonctionne au chargement mais pas au resize.

    Merci d'avance.

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    essaye en ajoutant un listener sur le resize ...
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    window.addEventListener('resize', maFonctionSurResize);
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #3
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    J'ai vu ta tentative sur le codepen ...

    mobile est un objet dont il faut tester le matches ...

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    window.addEventListener ('resize', function()
    {
     
      mobile = window.matchMedia ('(min-width: 768px)');
     console.log( mobile.matches? "Desktop":"Mobile"  ); 
    }
    );
    pour la modif de couleur sur le clcik :
    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
    const test = document.getElementById ('test');
     
    mobile = window.matchMedia ('(min-width: 768px)');
     
     
    window.addEventListener ('resize', function()
    {
    mobile = window.matchMedia ('(min-width: 768px)');
     
    }
    );
     
     
    if (mobile.matches)
    {
    test.addEventListener ('click', function()
    {
    if (test.style.color=='blue') test.style.color='red';
    else test.style.color='blue';
    });
    }
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  4. #4
    Membre éclairé
    Profil pro
    Inscrit en
    Mai 2004
    Messages
    731
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2004
    Messages : 731
    Par défaut
    Bonjour SpaceFrog,

    Merci pour ton suivi.

    je teste ce soir.

    Je te tiens informé.

  5. #5
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 210
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 210
    Par défaut
    Bonjour,

    attention à ce genre de test :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    if (test.style.color=='blue')
      test.style.color='red';
    else
      test.style.color='blue';
    il ne fonctionnera que si tu as écris :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <element style="color:blue"></element>
    ... mais pas si tu passes par une feuille de style ou une déclaration entre balise <style></style>.

  6. #6
    Membre éclairé
    Profil pro
    Inscrit en
    Mai 2004
    Messages
    731
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2004
    Messages : 731
    Par défaut
    Bonjour SpaceFrog,

    J'ai fait un rapide copier-coller de ton code dans mon codepen mais le résultat n'est pas au rendez-vous.

    Bonjour NoSmoking,

    J'ai fait pour le test la changement demandé.
    Dans la vraie vie mon problème n'est pas de changer une couleur mais de bloquer une fonction qui en gros au click ouvre un pop-up..

  7. #7
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    J"ai testé le premier code et j'ai bien mobile ou desktop en console ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  8. #8
    Membre éclairé
    Profil pro
    Inscrit en
    Mai 2004
    Messages
    731
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2004
    Messages : 731
    Par défaut
    Bonjour SpaceFrog,

    D'accord mais tu vois que sur le codepen le résultat n'est pas celui attendu.

    J'attends que la fonction de changement de couleur au clic soit désactivée dès que le resize passe en dessous de 768px, et réactivée dès que l'on passe au-dessus.

    Actuellement la largeur est reconnue au chargement de la page mais pas au resize.

  9. #9
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    Oui simplement parceque le onclick reste attribué ...

    Change de stratégie n'essaye pas d'ajouter ou supprimer le onclick modifie un flag sur le onresize
    et teste le en debut de fonction ... fais un return false selon le cas pour ne pas
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  10. #10
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    Dans l'idée un truc comme ça


    le fonction de changement de couleur

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    function changecolor(){
      if (!mobile.matches){ return false,} // test du format et sortie de fonction si pas le bon format
      // ici le changement de couleur 
    .../...
    }
    l'attribution du onclick (quelque soit le format )
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    const test = document.getElementById ('test');
    test.addEventListener ('click', changecolor)

    initialisation de mobile
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    var mobile = window.matchMedia ('(min-width: 768px)');
    rafraichissement de mobile sur le resize
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    window.addEventListener ('resize', function(){
      mobile = window.matchMedia ('(min-width: 768px)');    
    });
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  11. #11
    Membre éclairé
    Profil pro
    Inscrit en
    Mai 2004
    Messages
    731
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2004
    Messages : 731
    Par défaut
    Merci de ton suivi.

    Je fais le test ce soir.

    Je vous tiens informés.

  12. #12
    Membre éclairé
    Profil pro
    Inscrit en
    Mai 2004
    Messages
    731
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2004
    Messages : 731
    Par défaut
    Bonjour SpaceFrogm

    Copier-coller de ton code dans le codepen, j'ai juste un peu changé l'ordre, fonctionnement attendu.

    MERCI beaucoup.

    J'attends de transposer dans la vie réelle avant de cocher Résolu.

    Par ailleurs, je ne comprendrai jamais Javascript.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    function changecolor(){
      if (!mobile.matches) {return false;  }
      else
      {   
        if (test.style.color=='blue') test.style.color='red';
    else test.style.color='blue';
    }
     }
    Comment les deux variables mobile et test définies hors de la fonction peuvent-elles y entrer ?

    J'aurais cru devoir faire :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    function changecolor (test, mobile)
    {
     etc...
    }

  13. #13
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    les variables sont initialisée en dehors de la fonction et sont donc "globales"

    d'après un test que je viens de réaliser, le refresh de
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
      mobile = window.matchMedia ('(min-width: 768px)');
    sur le resize ne serait pas utile:
    https://jsfiddle.net/e358bxLw/

    Il semble que la variable se rafraichit toute seule l'affectation se fait par référence ?
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  14. #14
    Membre éclairé
    Profil pro
    Inscrit en
    Mai 2004
    Messages
    731
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2004
    Messages : 731
    Par défaut
    Bonjour SpaceFrog,

    Encore merci pour ton suivi, je regarde cela ce soir.

  15. #15
    Membre éclairé
    Profil pro
    Inscrit en
    Mai 2004
    Messages
    731
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2004
    Messages : 731
    Par défaut
    Hello SpaceFrog,

    Tu as raison, dans le codepen j'ai supprimé le window.addEventListener ('resize', function()) et cela continue à marcher comme avant.

    Pour ma gouverne la valeur de mobile est recalculée dans la fonction Changecolor ?

    if (!mobile.matches) impose un calcul ?

  16. #16
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 210
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 210
    Par défaut
    Comme dit, en début de script tu définis :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    const Mobile = window.matchMedia ('(min-width: 768px)');
    puis tu ne t'en occupes plus, lorsque la largeur du viewport sera inférieure à 768px Mobile.matches vaudra false, dans le cas contraire ta variable vaudra true sans que tu rien à faire.

    Il te suffit donc de prendre cela en compte dans la fonction déclenchée sur le clic.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    element.addEventListener("click", (e) => {
      if (Mobile.matches) {
        // grand écran
      }
      else {
        // petit écran
      }
    });
    Tu pourrais même mettre un gestionnaire directement sur cette variable
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    Mobile.addEventListener ("change", () => {
      console.log(Mobile.matches);
    });

  17. #17
    Membre éclairé
    Profil pro
    Inscrit en
    Mai 2004
    Messages
    731
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2004
    Messages : 731
    Par défaut
    Bonjour NoSmoking,

    Merci de tes précisions.

  18. #18
    Membre éclairé
    Profil pro
    Inscrit en
    Mai 2004
    Messages
    731
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2004
    Messages : 731
    Par défaut
    J'ai installé le code en production.

    Fonctionnement parfait, fluide, même sous IE, parfaitement synchronisé avec les media-queries CSS.

    Merci encore de votre aide.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. addeventlistener = ("click", function(e))
    Par remip31 dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 05/02/2020, 13h47
  2. Réponses: 0
    Dernier message: 18/08/2018, 21h53
  3. Réponses: 1
    Dernier message: 23/03/2016, 18h37
  4. Réponses: 12
    Dernier message: 26/04/2004, 08h32
  5. Context menu Windows - icone pour un item
    Par Cameleon45 dans le forum Composants VCL
    Réponses: 7
    Dernier message: 07/03/2003, 13h48

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