11480 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Mon point de départ est cet excellent tuto sur window.matchMedia.

Mon problème est tout simple.

Cliquer sur une image déclenche un pop-up.
Mais le click ne doit déclencher aucune action pour les écrans de moins de 768px de large.


const mobile = window.matchMedia ("(min-width: 768px)");

if (mobile.matches)
{
imax.addEventListener ('click', function() {PopGrand (ca_id, tist, height)});
}


Mon problème est que la valeur de mobile soit changée au resize de la fenêtre.
Le tuto montre bien un script qui calcule mobile au chargement de la page ET au resize de la fenêtre mais je ne suis pas arrivé à l'adapter à mon problème.

j'ai essayé :

window.addEventListener('resize', function () 
{
const mobile = window.matchMedia ("(min-width: 768px)");
return mobile;
}, false);


Sans succès.

Merci de votre aide.
Modifié par boteha_2 (05 Dec 2021 - 19:55)
Bonjour JENCAL,

Merci de ton suivi mais tu ne réponds pas à toute la question.

Comment récupérer la variable pour l'utiliser dans mon if () ?

En plus je préférerais un code en JS natif.
Bonjour,

j'ai posé vite le problème avec un codepen.

J'améliorerais un peu le truc demain.
Le défi est de rendre le code sensible au resize sans trop changer le structure.
Pierre-YvesTurgeon a écrit :
Tout fonctionne bien, merci.


J'ai fait les changements nécessaires dans le codepen

Si c'est du codepen dont tu parles effectivement il fonctionne à présent.

J'attends un peu avant de cocher Résolu.