web-dev-qa-db-fra.com

jQuery: Comment détecter la largeur de la fenêtre à la volée?

J'ai un élément de défilement sur ma page (avec l'extension jScrollPane jQuery). Ce que je veux accomplir est un moyen de désactiver la fenêtre de défilement en détectant la largeur de la fenêtre du navigateur. Je fais une mise en page réactive et je veux que cette fonctionnalité de défilement soit désactivée lorsque le navigateur est en dessous d'une certaine largeur. Je peux le faire fonctionner lorsque j'actualise la page, mais lorsque je redimensionne la fenêtre du navigateur, la valeur de la largeur ne se met pas à jour à la volée. 

À l'heure actuelle, si je démarre avec une fenêtre large de 1000 pixels, puis redimensionnez à 350 pixels, la fonction de défilement reste active. Je souhaite que la fonction de défilement soit désactivée dès que la largeur du navigateur atteint 440 pixels.

Voici le code que j'ai jusqu'à présent ..

var windowsize = $(window).width();

$(window).resize(function() {
  var windowsize = $(window).width();
});

if (windowsize > 440) {
  //if the window is greater than 440px wide then turn on jScrollPane..
    $('#pane1').jScrollPane({
       scrollbarWidth:15, 
       scrollbarMargin:52
    });
}
javascriptjqueryresponsive-design
64
Dustin

Changer une variable n'exécute pas comme par magie le code dans le bloc if-. Placez le code commun dans une fonction, puis liez l'événement et appelez la fonction:

$(document).ready(function() {
    // Optimalisation: Store the references outside the event handler:
    var $window = $(window);
    var $pane = $('#pane1');

    function checkWidth() {
        var windowsize = $window.width();
        if (windowsize > 440) {
            //if the window is greater than 440px wide then turn on jScrollPane..
            $pane.jScrollPane({
               scrollbarWidth:15, 
               scrollbarMargin:52
            });
        }
    }
    // Execute on load
    checkWidth();
    // Bind event listener
    $(window).resize(checkWidth);
});
140
Rob W

Mettez votre condition si dans la fonction resize:

var windowsize = $(window).width();

$(window).resize(function() {
  windowsize = $(window).width();
  if (windowsize > 440) {
    //if the window is greater than 440px wide then turn on jScrollPane..
      $('#pane1').jScrollPane({
         scrollbarWidth:15, 
         scrollbarMargin:52
      });
  }
});
14
antyrat

Vous trouverez ci-dessous ce que j'ai fait pour masquer un élément Id lorsque la taille de l'écran est inférieure à 768 pixels, et afficher lorsque son contenu dépasse 768 pixels . 

var screensize= $( window ).width();

if(screensize<=768){
        if($('#column-d0f6e77c699556473e4ff2967e9c0251').length>0)
            {
                $('#column-d0f6e77c699556473e4ff2967e9c0251').css('display','none');
            }
}
else{
        if($('#column-d0f6e77c699556473e4ff2967e9c0251').length>0)
            {
                $('#column-d0f6e77c699556473e4ff2967e9c0251').removeAttr( "style" );
            }

}
changething = function(screensize){
        if(screensize<=768){
            if($('#column-d0f6e77c699556473e4ff2967e9c0251').length>0)
            {
                $('#column-d0f6e77c699556473e4ff2967e9c0251').css('display','none');
            }
        }
        else{
        if($('#column-d0f6e77c699556473e4ff2967e9c0251').length>0)
            {
                $('#column-d0f6e77c699556473e4ff2967e9c0251').removeAttr( "style" );
            }

        }
}
$( window ).resize(function() {
 var screensize= $( window ).width();
  changething(screensize);
});
0
li bing zhao

Je ne sais pas si cela vous sera utile lorsque vous redimensionnerez votre page:

$(window).resize(function() {
       if(screen.width == window.innerWidth){
           alert("you are on normal page with 100% zoom");
       } else if(screen.width > window.innerWidth){
           alert("you have zoomed in the page i.e more than 100%");
       } else {
           alert("you have zoomed out i.e less than 100%");
       }
    });
0
Dinnu Buddy