9
votes

Changer un nom de classe avec jQuery donné une plage de largeur spécifique (requête médiatique)

J'ai le HTML suivant que j'essaie de modifier: xxx pré>

Je souhaite utiliser les requêtes de support, mais je ne veux pas modifier le CSS, mais plutôt remplacer le nom de la classe de largeur8 à largeur6. Ceci n'est pas typiquement possible avec la requête de support standard ci-dessous: p> xxx pré>

Je souhaite utiliser jQuery pour supprimer la classe et ajouter une classe lorsque la fenêtre est comprise entre 1240 et 1484px de large. Pouvez-vous m'aider avec l'alternative JQuery aux requêtes de média pour modifier les noms de classe et d'identification en ligne? P>

Voici mon jQuery P>

 $(document).ready(function() { 
    $(window).resize(function(){
            var width = $(window).width();

            if(width >= 1240 && width <= 1484){
                $('#info').removeClass('col9').addClass('col8');
            }
            else if(width >= 1485 && width <= 1788){
                $('#info').removeClass('col8').addClass('col7');
            }

            else if(width >= 1789 && width <= 2237){
                $('#info').removeClass('col7').addClass('col6');
            }

            else if(width >= 2238 && width <= 3000){
                $('#info').removeClass('col7').addClass('col6');
            }
            else{
                $('#info').removeClass('col8').addClass('col9');
             }
            })

.resize();

    });

jquery css media-queries

0 commentaires

3 Réponses :

2
votes

Vous pouvez faire quelque chose comme: xxx

0 commentaires

16
votes

Vous pouvez essayer cela. XXX

7 commentaires

C'est génial, mais cela ne fonctionne que sur le redimensionnement de la fenêtre. Comment puis-je le faire fonctionner sur le redimensionnement de la fenêtre et la charge de la page

@ JCHASE11 - Cela fonctionnera également sur la charge de la page car je déclenche l'événement redimensionner sur la charge de la page. J'ai fait une certaine modification vérifier ma réponse modifiée maintenant.

ne fonctionne toujours pas. J'ai ajouté mon code exact jquery ci-dessus. S'il vous plaît laissez-moi savoir quel est le problème. Cela fonctionne très bien lorsque je redimensionniste la fenêtre, mais pas sur la charge.

J'ai ajouté une vérification de message de la console si vous le voyez sur la page de la page sans redimensionner la fenêtre.

Nope, pas caché. La console se connecte dans le redimensionnement uniquement lorsque la fenêtre est redimensionnée, pas sur la charge de la page

Laissez-nous Continuez cette discussion en chat

Jetez un coup d'œil à ce violon jsfiddle.net/dgnv4 Il enregistre le message dès que les charges de la page.

10
votes

Jetez un coup d'œil à Enquire.js

C'est une bibliothèque sans dépendance qui Vous permet de répondre aux requêtes de média avec JavaScript. P>

Par exemple: P>

var $info = $('#info');

enquire.register("screen and (min-width: 1240px) and (max-width: 1484px)", {
    match: function() {
        $info.addClass('col8');
    },

    unmatch: function() {
        $info.removeClass('col8');
    }
}).listen();

0 commentaires