web-dev-qa-db-fra.com

Masquer div si l'écran est plus petit qu'une certaine largeur

Je veux masquer un div flottant si l'écran de l'utilisateur est <1024 px car il se superposera à la zone de contenu de mon blog. J'ai trouvé ce jQuery sur le net mais je ne sais pas comment l'utiliser.

$(document).ready(function() {

if ((screen.width>1024)) {
    // if screen size is 1025px wide or larger
    $(".yourClass").css('display', 'none'); // you can also use $(".yourClass").hide();
}
elseif ((screen.width<=1024))  {
    // if screen size width is less than 1024px
    $(".yourClass").css('display', 'block'); // here you can also use show();
}
});

Si mon nom de classe div flottant est sharecontent, dois-je remplacer le script ci-dessus comme ci-dessous? Si oui, cela ne fonctionne pas.

$(document).ready(function() {

if ((screen.width>1024)) {
    // if screen size is 1025px wide or larger
    $(".sharecontent").css('display', 'none'); // you can also use $(".yourClass").hide();
}
elseif ((screen.width<=1024))  {
    // if screen size width is less than 1024px
    $(".sharecontent").css('display', 'block'); // here you can also use show();
}
});

J'ai également essayé de remplacer screen.width par window.width mais toujours sans succès :(

jqueryhideresolutionshow
27
dzul

Utilisez requêtes multimédias . Votre code CSS serait:

@media screen and (max-width: 1024px) {
    .yourClass {
        display: none !important;
    }
}
80
Eric

J'ai presque la même situation que la vôtre; que si la largeur de l'écran est inférieure à la largeur spécifiée, cela devrait masquer la div. C'est le code jquery que j'ai utilisé qui a fonctionné pour moi.

$(window).resize(function() {

  if ($(this).width() < 1024) {

    $('.divIWantedToHide').hide();

  } else {

    $('.divIWantedToHide').show();

    }

});
14
jmespinosa

Le problème avec votre code semble être l'instruction elseif qui devrait être else if (Remarquez l'espace).

J'ai réécrit et j'ai simplement ajouté le code à ceci:

$(document).ready(function () {

    if (screen.width < 1024) {
        $(".yourClass").hide();
    }
    else {

        $(".yourClass").show();
    }

});
1
peterthegreat

Le problème que j'avais était mes requêtes de médias CSS et ma déclaration IF dans le conflit Jquery. Ils étaient tous deux réglés sur 700px, mais on pourrait penser que c'est 700px avant l'autre.

Pour contourner cela, j'ai créé un Div vide en haut de mon HTML (en dehors de mon conteneur principal)

<div id="max-width"></div>

En CSS, j'ai mis ce div à afficher aucun

 #max-width {
        display: none;
    }

Dans mon JS a créé une fonction

var hasSwitched = function () {
    var maxWidth = parseInt($('#max-width').css('max-width'), 10);
    return !isNaN(maxWidth);
};

Donc, dans mon instruction IF au lieu de dire si (hasSwitched <700) exécuter le code suivant, j'ai fait ce qui suit

if (!hasSwitched()) { Your code

}

else{ your code

}

En faisant cela, CSS informe Jquery quand il atteint 700 pixels. Donc css et jquery sont tous deux synchronisés ... plutôt que d'avoir une différence de quelques pixels. Essayez ceci, il ne vous décevra certainement pas.

Pour que cette même logique fonctionne pour IE8, j'ai utilisé le plugin Respond.js (qui fonctionne aussi définitivement). Il vous permet d'utiliser des requêtes multimédias pour IE8. La seule chose qui n'était pas prise en charge était la largeur et la hauteur de la fenêtre d'affichage ... d'où ma raison d'essayer de faire fonctionner mes CSS et JS ensemble. J'espère que cela vous aide les gars

0
Dally S

Si votre logique ne va pas dans le mauvais sens dans cet exemple, vous la cachez lorsque l'écran est plus grand que 1024. Inversez les cas, transformez le none en block et vice versa.

0
Orbling