Comment ajouter une déclaration @media dans JS, merci

Bonjour à tous

je cherche à faire un truc qui va surement vous paraitre basique mais je ne suis pas développeur et j'essaye plein de variantes trouvée ici et là, mais sans succès.

Je voudrais ajouter dans le code suivant :

	
    $(document).on('focus', 'input, textarea', function() {
    $(".navbar-default").hide();
	});
	$(document).on('blur', 'input, textarea', function() {
    $(".navbar-default").show();
	});

la déclaration "@media (max-width: 767px)" pour ne cibler que les petits écrans.

Merci pour votre aide

Bonjour,

Je ne peux que te conseiller la lecture de cet article :
http://www.alsacreations.com/article/lire/1500-matchmedia-javascript-media-queries.html

Merci SolidSnake

Alors j'essaye de faire ça

if (window.matchMedia("(max-width: 767px)").matches) {
} else {
		$(document).on('focus', 'input, textarea', function() {
    		$(".navbar-default").hide();
		$(document).on('blur', 'input, textarea', function() {
    		$(".navbar-default").show();
)};
	</script>

mais j'ai un problème de syntaxe avec les {} et ()
Je teste dans tous les sens mais je n'y arrive pas

Sinon, à force de tests, j'y arrive en faisant comme ça

if ($(window).width() < 767) {
	$(document).on('focus', 'input, textarea', function() {
    	$(".navbar-default").hide();
	});
	$(document).on('blur', 'input, textarea', function() {
    	$(".navbar-default").show();
});}

Il y a t-il une méthode qui vauit mieux que l'autre ?
Merci encore de votre aide

Salut Pierrer75,

Dans cet exemple, il n'y pas le compte entre les accolades ouvertes et celles fermées. idem pour les parenthèses

pierrer75 a écrit :

if (window.matchMedia("(max-width: 767px)").matches) {
} else {
		$(document).on/*ici->*/('focus', 'input, textarea', function() /*ici->*/{ //elles ne semblent pas fermées
    		$(".navbar-default").hide();
		$(document).on('blur', 'input, textarea', function() {
    		$(".navbar-default").show();
)//ferme le on('blur'
}//ferme le else;

Sinon quand au choix de la méthode. La question à se poser est que vise window.width ? et est-ce que cela correspond à la mesure prise en compte par matchMedia ?

Pas de bol, je n'a pas la réponse à ces questions.
Modifié par Greg_Lumiere (17 Feb 2016 - 14:28)

Greg_Lumiere a écrit :
Sinon quand au choix de la méthode. La question à se poser est que vise window.width ? et est-ce que cela correspond à la mesure prise en compte par matchMedia ?

Normalement oui, mais j'ai une autre question :
Si on prend le width() cela fonctionne au chargement de la page, mais si on redimensionne la page après le chargement, le code ne va pas être pris en compte quand on passera les limites (il faut pour ça gérer ça avec l’événement window.resize).
Et la question, est-ce que c'est géré directement avec window.matchMedia(), je ne sais pas, il faut tester.
Modifié par SolidSnake (17 Feb 2016 - 12:39)

Merci à vous pour vos réponses.

Je pense que même si cette fonction vise les petits écrans, donc à priori sans gestion de redimensionnement (sauf erreur de ma part), j'aimerai que ce soit fait de façon propre ne serait-ce que pour mes propres tests.

J'essaye donc la solution window.matchMedia mais je bloque avec les { et les (
J'ai beau en rajouter, Firebug m'indique toujours qu'il en manque, grrrrr
J'essaye ça :

if (window.matchMedia("(max-width: 767px)").matches) {
} else {
	$(document).on('focus', 'input, textarea', function() {
	$(".navbar-default").hide();
	$(document).on('blur', 'input, textarea', function() {
    	$(".navbar-default").show();
)};

Je ne m'en sort pas

Plus comme ça je pense :

if (!window.matchMedia("(max-width: 767px)").matches) {
  $(document)
    .on('focus', 'input, textarea', function() {
      $(".navbar-default").hide();
    })
    .on('blur', 'input, textarea', function() {
      $(".navbar-default").show();
    })
}

EDIT :

SolidSnake a écrit :
[...] si on redimensionne la page après le chargement, le code ne va pas être pris en compte quand on passera les limites (il faut pour ça gérer ça avec l’événement window.resize).
Et la question, est-ce que c'est géré directement avec window.matchMedia(), je ne sais pas, il faut tester.

La réponse est non (Cf. l'article du dessus), il faut aussi gérer le resize "manuellement"
Modifié par SolidSnake (17 Feb 2016 - 15:30)

Merci pour ton aide SolidSnake
mais, la condition ne se fait pas, la navbar se masque aussi sur les écrans > 767

SolidSnake a écrit :
La réponse est non (Cf. l'article du dessus), il faut aussi gérer le resize "manuellement"

En effet, je n'avais pas penser à tester le redimensionnement de la page de démo.
Je vais donc garder la méthode que j'arrive à faire fonctionner correctement, comme ceci:

<script>
	if ($(window).width() < 767) {
		$(document).on('focus', 'input, textarea', function() {
		$(".navbar-default").hide();
	});
		$(document).on('blur', 'input, textarea', function() {
    		$(".navbar-default").show();
		});}
</script>

Merci à tous pour votre aide

pierrer75 a écrit :
En effet, je n'avais pas penser à tester le redimensionnement de la page de démo.
Je vais donc garder la méthode que j'arrive à faire fonctionner correctement, comme ceci:

Le redimensionnement n'est pas non plus gérer avec cette méthode ! (Il faut également le prévoir)

EDIT : mais sinon, le code que j'avais donné fonctionne bien (juste le if était inversé), si tu regardes cet EXEMPLE et que tu recharges la page avec différentes largeurs de page, le résultat est bon.

NB : encore une fois reste à gérer le resize !
Modifié par SolidSnake (18 Feb 2016 - 10:14)

Hello,

Pourquoi ne pas faire l'association JS/CSS ?
Perso, je préfère toujours garder mes points de ruptures au même endroit...

Si on dit que:
- un hide de jQuery peut-être fait avec .hide{display: none}
- un show peut-être fait avec .show{display: block}
(on peut par exemple ajouter des effects d'opacité ou autre...)

Pourquoi ne pas faire une déclinaison dans tes styles (où tes MQ sont déjà défnines)

@media(...){
   .hide-small{display: none}
   .show-small{display: block}
}

et puis en JS, tu fais simplement un addClass ou un removeClass...

Juste en passant, +1pt pour Yordi

@_laurent
Merci Yordi
Je suis preneur de toute solution plus simple, ou plus propre, ça fonctionne comme ça mais j'aurais préféré un window.matchMedia mais je n'arrive pas à le faire fonctionner...