Javascript pour une résolution supérieur à ...

Bonjour,

Totalement incompétente en Javascript, je me permet d'appeler à l'aide...

J'utilise un Jquery pour déclencher un effet smooth scroll (défilement fluide) et ainsi naviguer dans mon site one-page. J'ai, pour ce faire utilisé le tuto disponible ici : http://www.creativejuiz.fr/blog/tutoriels/jquery-effet-smooth-scroll-defilement-fluide.
Tout fonctionne parfaitement.

J'ai ensuite adapté mon site pour mobile à l'aide de media-queries, en concevant une css à part (

<link rel="stylesheet" href="css/queries/smartphones.css" type="text/css" media="screen and (max-width: 469px)" />

) et je souhaiterais désactiver mon javascript que je considère inadapté à ce type de média.

J'appelle actuellement mon javascript, à partir de ma page HTML, à partir de ce code :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/nav.js"></script>    

Est-il possible de signifier que celui-ci ne sera utilisé que pour les écrans de résolutions supérieures à 469px ?

Merci d'avance pour vos réponses,
Bon week-end !

Salut,

natou_van a écrit :
J'ai ensuite adapté mon site pour mobile à l'aide de media-queries, en concevant une css à part

Tu peux parfaitement n'utiliser qu'une seule feuille de style : connais-tu la règle CSS @media ?

natou_van a écrit :
J'appelle actuellement mon javascript, à partir de ma page HTML, à partir de ce code :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/nav.js"></script>    

Est-il possible de signifier que celui-ci ne sera utilisé que pour les écrans de résolutions supérieures à 469px ?

Regarde du côté de la méthode matchMedia (), ce qui t'amènera à modifier ton fichier nav.js.

Soit dit en passant, pour appeler le fichier jQuery, il est plus judicieux d'éviter d'utiliser un service tiers comme Google (imagine qu'un tel service est temporairement indisponible, quelle qu'en puisse être la raison) : soit tu récupères le fichier minifié soit tu utilises, à la rigueur, le CDN de jQuery, comme suit :

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

Bonjour,

Merci Victor pour tes conseils !

J'ai me suis donc penchée sur la méthode matchMedia() que j'ai "tenté" d'adapter comme suit :

/* Si l'affichage dispose de moins de 469px de large */
  if (window.matchMedia("(max-width: 469px)").matches) {
 
	$(document).ready(function(){
   $('nav#navprinc ul li a').click(function()
   {
   /*Lors du clic sur les éléments du menu */
         var id = $(this).attr('href');
   /*Création de la variable permettant de récupérer l'élément "href" de l'id sur lequel on a cliqué */
        scrollTo(id);
   /*Lancement de la fonction scrollTo (créée plus loin)*/
        return false;
   /*Pour annuler le clic */		
   });

   $('nav#navfooter ul li a').click(function() 
   {
   /*Lors du clic sur l'éléments du menu */
         var id = $(this).attr('href');
   /*Création de la variable permettant de récupérer l'élément "href" de l'id sur lequel on a cliqué */
        scrollTo(id);
   /*Lancement de la fonction scrollTo (créée plus loin)*/
        return false;
   /*Pour annuler le clic */		
   });
   
   function scrollTo(target){
   /*Création de la fonction scrollTo*/
       if($(target).length>=1){
   /*Si l'attribut existe (si il est >= à 1) */	   
           height=($(target).offset().top)-220;
   /*Déclaration d'une variable height stockant la hauteur de l'élément par rapport à la page (offset)*/		   
       }
       $('html,body').animate({scrollTop: height}, 1000);
  /*Animation sur body et html - 1000 correspond au temps de l'animation */	   
       return false;
   }
 
});

 } else { 
 /*??? Rien ne se passe ??? */
 } 

J'imagine bien que cela doit être une énormité mais cela ne fonctionne pas...
Merci pour votre temps consacré à une (vrai) débutante !

Essaie d'introduire l'appel à la méthode matchMedia en détectant sa disponibilité et en jouant avec les événements load et resize (en cas de redimensionnement de la fenêtre, il faut suivre), comme suit :

$(document).ready (function ()
{
  // Lorsque la page se charge ou que la fenêtre du navigateur est redimensionnée
  $(window).on ('load resize', function ()
  {
    // On détecte si la méthode matchMedia est disponible
    if ('matchMedia' in window)
    {
      // La largeur maximale de l'écran correspond
      if (window.matchMedia ('(max-width: 469px)').matches)
      {
        // Ici, tes instructions
      }
      // Sinon
      else
      {
        // Ici, tes instructions
      }
    }
    // Si le navigateur ne comprend pas la méthode matchMedia
    else
    {
      // Des instructions éventuelles pour ces derniers
    }
  });
});