Déclenchement de jquery avec des requêtes média css

Je suis en utilisant le css media queries sur mon projet de créer un site qui fonctionne avec n'importe quelle taille d'écran. Je suis à la recherche de déclencher la différence des fonctions jquery tout comme je le ferais avec css.

Par exemple, Si la taille du navigateur est entre 1000px et 1300px, je voudrais appeler la fonction suivante:

$('#mycarousel').jcarousel({
    vertical: true,
    scroll: 1,
    auto: 2,
    wrap: 'circular'
});

MAIS lorsque la taille du navigateur est en dessous de 1000px, la js serait d'arrêter son traitement. Ainsi de suite et ainsi de suite.

Je ne sais pas si c'est possible, mais il y a peut être une solution existante ou plugin qui crée différentes js environnements basés sur la taille de fenêtre de navigateur. Je suppose que je pourrais créer des instructions conditionnelles dans un format. Toutes les pensées?

source d'informationauteur JCHASE11 | 2011-06-23

  1. 17

    La Modernizr bibliothèque prend en charge directement JavaScript appels d'évaluer les requêtes de média.

    Si vous ne voulez pas le faire, vous pourriez avoir vos règles CSS lecteur une propriété d'un élément masqué, et vous pouvez ensuite utiliser ".css()" pour vérifier la valeur de jQuery. En d'autres termes, la règle pour le "plus grand que 1000px de large" pourrait cachés <div> à "width: 1000px", et vous pouvez ensuite vérifier

    if ( $("#widthIndicator").css("width") === "1000px") {
  //whatever

    Ici est un muet jsfiddle de démontrer. Faites glisser le milieu de la barre de séparation à gauche et à droite pour voir que le code JavaScript (dans l'intervalle de minuterie) détecte le changement efficace de la "largeur" de l'élément masqué.

    Si vous vous référez à une conception sensible, alors vous pourrait également déclencher un élément existant de la propriété sans l'ajout d'une annotation dans votre code html,par exemple

    if ( $("#navigation li").css("float") === "none") {
  2. 14

    À l'aide de Modernizr, Pointu, pointu, est assez facile.

    Ajouter le code javascript suivant:

    $(document).ready(function() {
    function doneResizing() {
        if(Modernizr.mq('screen and (min-width:768px)')) {
            //action for screen widths including and above 768 pixels 
        }
        else if(Modernizr.mq('screen and (max-width:767px)')) {
            //action for screen widths below 768 pixels 
        }
    }

    var id;
    $(window).resize(function() {
        clearTimeout(id);
        id = setTimeout(doneResizing, 0);
    });

    doneResizing();
});

    De cette façon, le Modernizr Mediaquery de détection est ÉGALEMENT lorsque vous redimensionnez la fenêtre du navigateur, non seulement lorsque le document est chargé au départ!

  3. 0

    J'ai eu un problème similaire avec certains manèges qui doit être créé sur mobile, mais qui a été détruit dans le bureau... et je n'ai pas aimé la solution de vérification de la largeur de la fenêtre en pixels, donc j'ai créé une petite fonction pour "écouter" quand le mediaquery modifications de l'état, sans la nécessité de Modernizr.

    Vous pouvez définir votre propre code dans chaque état ("sur la saisie mobile de résolution", "sur le départ de bureau")... et y mettre votre code.

    Espoir pourrait être utile pour quelqu'un d'autre 😉

    https://github.com/carloscabo/MQBE

    (améliorations et idées sont les bienvenus 😉